:root{--portal-accent:#219ebc;--portal-ink:#20252b;--portal-muted:#737a82;--portal-line:#e7e4de;--portal-paper:#fff;--portal-bg:#f5f3ef}
.portal-body{min-height:100vh;background:var(--portal-bg);color:var(--portal-ink)}.portal-header{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--portal-line);box-shadow:none}.portal-brand{display:flex;align-items:center;gap:.7rem;color:var(--portal-ink);text-decoration:none;font-weight:800;font-size:1rem}.portal-brand-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:#fff;background:#252a30;box-shadow:none}.portal-logout{border:1px solid var(--portal-line);background:#fff;color:#5d6268;display:flex;gap:.45rem;align-items:center;border-radius:10px}.portal-nav{border-top:1px solid #f0eee9}.portal-nav a{display:flex;align-items:center;gap:.45rem;white-space:nowrap;padding:.72rem 1rem;color:#74787d;text-decoration:none;font-size:.86rem;font-weight:700;border-bottom:2px solid transparent}.portal-nav a:hover,.portal-nav a.active{color:var(--portal-ink);background:#faf9f6;border-bottom-color:var(--portal-accent)}.portal-nav a i{color:#96999d}.portal-nav a.active i{color:var(--portal-accent)}
.portal-main .soft-card{background:#fff;border:1px solid var(--portal-line);box-shadow:0 8px 28px rgba(44,40,34,.045);border-radius:17px}.portal-main .profile-avatar{background:#292e34;color:#fff;box-shadow:none}.portal-main .btn-brand{background:#252a30;border:0;box-shadow:none}.portal-main .modern-table thead th{background:#f8f7f4;color:#6e7378}.portal-main .role-badge{border-radius:999px}.portal-main table a{color:#247e93;text-decoration:none}.portal-welcome{background:#fff!important}.portal-stat{display:flex;align-items:center;gap:1rem;padding:1.1rem;text-decoration:none;color:#2f3439;height:100%}.portal-stat small{display:block;color:#85898e;font-size:.76rem}.portal-stat strong{display:block;font-size:1.5rem;margin-top:.1rem}.portal-stat .metric-icon{background:#f1f0ec;color:#555d63}.portal-quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}.portal-quick-grid a{display:flex;align-items:center;gap:.7rem;padding:1rem;border-radius:12px;background:#f7f6f3;color:#3e4449;text-decoration:none;font-weight:700;border:1px solid #eeece7}.portal-quick-grid a:hover{background:#fff;color:#247e93;border-color:#d9d5ce}.portal-quick-grid i{font-size:1.1rem;color:#7b8287}.portal-panel{background:#faf9f6;border:1px solid var(--portal-line);border-radius:14px;padding:1.15rem}.usage-tile{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1rem 1.1rem;border-radius:13px;border:1px solid var(--portal-line);background:#faf9f6!important}.usage-tile span{font-size:.82rem;color:#777d82}.usage-tile strong{font-size:1.05rem}.usage-tile i{color:#687078!important}
.portal-page-head{margin-bottom:1.35rem}.portal-page-head .page-title{font-size:1.75rem;margin:.25rem 0}.portal-page-head p{color:var(--portal-muted);margin:0}.subscription-list{display:grid;gap:1rem}.subscription-card{background:var(--portal-paper);border:1px solid var(--portal-line);border-radius:18px;padding:1.35rem;box-shadow:0 8px 25px rgba(44,40,34,.04)}.subscription-head{display:flex;align-items:start;justify-content:space-between;gap:1rem;padding-bottom:1.1rem;border-bottom:1px solid #efede8}.subscription-code{font:700 .73rem/1.2 monospace;color:#8a8e92;letter-spacing:.04em}.subscription-head h2{font-size:1.15rem;margin:.35rem 0 0}.connection-state{display:flex;align-items:center;gap:.45rem;font-size:.76rem;font-weight:700;color:#8b8f93;background:#f5f4f1;padding:.45rem .7rem;border-radius:999px}.connection-state span{width:7px;height:7px;border-radius:50%;background:#a6a6a3}.connection-state.is-online{color:#31745b;background:#edf7f1}.connection-state.is-online span{background:#3a9b70}
.subscription-essentials{display:grid;grid-template-columns:1.35fr 1fr .72fr;gap:0;margin-top:1.1rem}.essential-block{display:flex;gap:.8rem;padding:.65rem 1.25rem;border-inline-start:1px solid #efede8;min-width:0}.essential-block:first-child{padding-inline-start:0;border-inline-start:0}.essential-block:last-child{padding-inline-end:0}.essential-icon{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#eaf5f7;color:#247e93}.essential-icon.warm{background:#f7f0e7;color:#9b6737}.essential-icon.calm{background:#efefed;color:#62696e}.essential-content{min-width:0;flex:1}.essential-content h3{font-size:.75rem;color:#898d91;margin:0 0 .55rem;font-weight:700}.essential-content p{font-size:.78rem;color:#85898d;margin:.25rem 0 0}.package-name{font-size:1rem}.credential-row{display:grid;grid-template-columns:84px minmax(80px,1fr) 30px 30px;align-items:center;gap:.3rem;min-height:33px;border-top:1px solid #f1efeb}.credential-row:first-of-type{border-top:0}.credential-row>span:first-child{font-size:.73rem;color:#888d91}.credential-row strong{font:700 .84rem/1.2 monospace;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis}.credential-row:not(:has(.reveal-password)) .icon-action{grid-column:4}.icon-action{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:8px;background:transparent;color:#7a8085}.icon-action:hover{background:#efeeea;color:#222}.password-value{display:none!important}.subscription-price{display:flex;align-items:baseline;gap:.3rem;direction:ltr;justify-content:flex-end}.subscription-price strong{font-size:1.55rem;line-height:1}.subscription-price span{font-weight:700;color:#73787c}
@media(max-width:900px){.subscription-essentials{grid-template-columns:1fr 1fr}.essential-block{border:0;border-top:1px solid #efede8;padding:1rem .5rem}.essential-block:first-child{grid-column:1/-1;border-top:0}.essential-block:last-child{padding-inline-end:.5rem}}@media(max-width:576px){.portal-logout span{display:none}.portal-main{padding-top:1.15rem!important}.portal-main .soft-card{border-radius:14px}.portal-main .page-title{font-size:1.35rem}.portal-nav a{padding:.65rem .78rem;font-size:.78rem}.portal-stat{padding:.85rem;gap:.6rem}.portal-stat .metric-icon{width:34px;height:34px}.portal-stat strong{font-size:1.15rem}.portal-quick-grid{grid-template-columns:1fr 1fr}.subscription-card{padding:1rem;border-radius:15px}.subscription-essentials{grid-template-columns:1fr}.essential-block,.essential-block:first-child{grid-column:auto;border-top:1px solid #efede8;padding:1rem 0}.essential-block:first-child{border-top:0}.credential-row{grid-template-columns:80px minmax(70px,1fr) 30px 30px}.portal-page-head .page-title{font-size:1.4rem}}