/* KoalaVPS client portal. Components remain isolated from public site styles. */ :root body:has(#client-area){background:#080e16} :root body:has(#client-area)>:is(.announcement,.header,.footer,#scroll-progress){display:none} :root body #main:has(#client-area){min-height:100dvh} #client-area{--kc-bg:#080e16;--kc-sidebar:#0c1520;--kc-panel:#101d2a;--kc-panel-raised:#152535;--kc-input:#0a1520;--kc-line:#293e51;--kc-line-strong:#3c5870;--kc-text:#e8f0f7;--kc-muted:#a2b3c3;--kc-faint:#798fa4;--kc-cyan:#5ad9ec;--kc-amber:#ffb152;--kc-violet:#b79aff;--kc-green:#86dfb7;--kc-red:#ff9caa;min-height:100dvh;color:var(--kc-text);background:radial-gradient(ellipse at 100% 0,#15323d24,transparent 42%),var(--kc-bg);font-family:var(--font,Manrope,Arial,sans-serif);font-size:15px;line-height:1.65;color-scheme:dark} #client-area *,#client-area *::before,#client-area *::after{box-sizing:border-box} #client-area :is(h1,h2,h3,h4,p,ul,ol,dl,dd,fieldset){margin:0} #client-area :is(h1,h2,h3,h4){color:var(--kc-text);font-weight:650;letter-spacing:-.02em} #client-area h1{font-size:30px;line-height:1.25} #client-area h2{font-size:20px;line-height:1.35} #client-area h3{font-size:16px;line-height:1.4} #client-area p{color:var(--kc-muted);font-size:14px;line-height:1.75} #client-area :is(a,button,input,select,textarea){-webkit-tap-highlight-color:transparent} #client-area :is(button,input,select,textarea){font-family:inherit;font-size:14px;letter-spacing:normal} #client-area :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--kc-cyan);outline-offset:3px} #client-area button{cursor:pointer} #client-area button:disabled{cursor:default} #client-area :is(input,select,textarea):disabled{cursor:not-allowed} #client-area svg{display:block;width:20px;height:20px;flex-shrink:0} #client-area [hidden]{display:none!important} /* Full-height application shell. */ #client-area .kc-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100dvh;max-width:1920px;margin-inline:auto} #client-area .kc-sidebar{display:flex;flex-direction:column;gap:28px;min-width:0;height:100dvh;position:sticky;top:0;padding:28px 16px 20px;background:var(--kc-sidebar);border-right:1px solid var(--kc-line);z-index:30;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#30495c transparent} #client-area .kc-brand{display:flex;align-items:center;gap:10px;padding:0 12px;min-height:36px;color:var(--kc-text);font-size:23px;line-height:1.2;font-weight:750;letter-spacing:-.04em;text-decoration:none} #client-area .kc-brand img{width:34px;height:34px;object-fit:contain} #client-area .kc-brand>span>span{color:#b6c7d4;font-weight:450} #client-area .kc-brand>span>b{color:var(--kc-cyan);font-weight:700} #client-area .kc-brand small{display:block;color:var(--kc-faint);font-size:10px;font-weight:500;letter-spacing:.06em;line-height:1.5;margin-top:4px} #client-area .kc-nav{display:flex;flex-direction:column;gap:6px} #client-area .kc-nav-label{color:var(--kc-faint);font-size:10px;letter-spacing:.07em;text-transform:uppercase;padding:0 14px 6px} #client-area .kc-nav-link{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;border:1px solid transparent;border-radius:8px;padding:11px 13px;color:#a8bacb;background:transparent;font-size:13px;font-weight:600;line-height:1.5;text-align:left;text-decoration:none;transition:background .18s,border-color .18s,color .18s} #client-area .kc-nav-link:hover{background:#162637;border-color:#2b4256;color:#edf7fe;text-decoration:none} #client-area .kc-nav-link[aria-current="page"],#client-area .kc-nav-link.is-active{color:var(--kc-cyan);background:linear-gradient(100deg,#5ad9ec17,#5ad9ec06);border-color:#5ad9ec35;box-shadow:inset 3px 0 0 var(--kc-cyan)} #client-area .kc-nav-icon{display:inline-flex;align-items:center;justify-content:center;color:currentColor;flex:0 0 20px} #client-area .kc-nav-link>span:not(.kc-nav-icon){min-width:0;overflow-wrap:anywhere} #client-area .kc-nav-count{margin-left:auto;padding:1px 6px;border:1px solid #3d5366;border-radius:4px;font-size:10px;font-variant-numeric:tabular-nums} #client-area .kc-sidebar-footer{display:flex;flex-direction:column;gap:12px;margin-top:auto;padding:20px 10px 0;border-top:1px solid var(--kc-line)} #client-area .kc-sidebar-footer p{font-size:11px;line-height:1.65} #client-area .kc-sidebar-footer .kc-nav-link{padding-inline:0;min-height:36px} #client-area .kc-sidebar-backdrop{display:none} #client-area .kc-workspace{min-width:0} #client-area .kc-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:82px;padding:18px 32px;border-bottom:1px solid var(--kc-line);background:#0c1722f2;position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)} #client-area .kc-topbar-start,#client-area .kc-topbar-actions{display:flex;align-items:center;gap:16px;min-width:0} #client-area .kc-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;color:var(--kc-faint);font-size:12px;line-height:1.5} #client-area .kc-breadcrumbs a{color:var(--kc-muted);text-decoration:none} #client-area .kc-breadcrumbs a:hover{color:var(--kc-cyan)} #client-area .kc-breadcrumbs :is(strong,[aria-current]){color:#dce8f3;font-weight:600} #client-area .kc-user{display:flex;align-items:center;gap:11px;min-width:0;max-width:min(32vw,290px);color:var(--kc-text);font-size:12px;text-decoration:none} #client-area .kc-user>span:not(.kc-avatar){min-width:0} #client-area .kc-user :is(strong,[data-client-name]){display:block;max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;line-height:1.5;font-weight:650} #client-area .kc-user small{display:block;color:var(--kc-faint);font-size:10px;line-height:1.5} #client-area .kc-avatar{display:inline-flex;justify-content:center;align-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid #5ad9ec45;border-radius:10px;background:linear-gradient(140deg,#1c4755,#172434);color:#b9f5fc;font-size:12px;line-height:1;font-weight:750;text-transform:uppercase} #client-area .kc-main{display:flex;flex-direction:column;gap:24px;width:100%;max-width:1460px;min-width:0;padding:32px;margin-inline:auto} #client-area .kc-page-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:2px} #client-area .kc-page-heading>div{min-width:0} #client-area .kc-page-heading h1{margin-bottom:10px;overflow-wrap:anywhere} #client-area .kc-page-heading p{max-width:72ch;font-size:14px} #client-area .kc-kicker{display:block;margin-bottom:10px;color:var(--kc-cyan);font-size:10px;line-height:1.5;font-weight:650;letter-spacing:.07em;text-transform:uppercase} #client-area .kc-muted{color:var(--kc-muted)} #client-area .kc-faint{color:var(--kc-faint)} #client-area .kc-icon-btn,#client-area .kc-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:9px;border:1px solid var(--kc-line);border-radius:7px;color:#c5d7e7;background:#122131;transition:background .18s,border-color .18s} #client-area .kc-icon-btn:hover,#client-area .kc-menu-toggle:hover{color:#ecf8ff;background:#1b3042;border-color:#48677e} #client-area .kc-menu-toggle{display:none} #client-area .kc-mobile-brand{display:none;color:var(--kc-text);font-size:18px;font-weight:700;letter-spacing:-.03em;text-decoration:none} #client-area .kc-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--kc-cyan);font-size:10px;line-height:1.6;font-weight:650;letter-spacing:.06em;text-transform:uppercase} #client-area .kc-sidebar-label{display:block;padding:0 14px;color:var(--kc-faint);font-size:10px;line-height:1.6;letter-spacing:.07em;text-transform:uppercase} #client-area .kc-sidebar-note{display:flex;align-items:center;gap:8px;color:#829cad;font-size:9px;line-height:1.65;letter-spacing:.025em} #client-area .kc-sidebar-note svg{width:14px;height:14px;color:#76b7c5} /* Real account metrics and content panels. */ #client-area .kc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} #client-area .kc-stat{--kc-tone:var(--kc-cyan);position:relative;min-width:0;padding:22px;border:1px solid var(--kc-line);border-radius:10px;background:linear-gradient(150deg,#152636,#101c29);box-shadow:0 8px 24px #00000016;overflow:hidden} #client-area .kc-stat::before{content:'';position:absolute;top:0;left:22px;right:22px;height:1px;background:linear-gradient(90deg,var(--kc-tone),transparent);opacity:.6} #client-area .kc-stat[data-tone="amber"]{--kc-tone:var(--kc-amber)} #client-area .kc-stat[data-tone="violet"]{--kc-tone:var(--kc-violet)} #client-area .kc-stat[data-tone="green"]{--kc-tone:var(--kc-green)} #client-area .kc-stat:nth-child(2):not([data-tone]){--kc-tone:var(--kc-amber)} #client-area .kc-stat:nth-child(3):not([data-tone]){--kc-tone:var(--kc-violet)} #client-area .kc-stat:nth-child(4):not([data-tone]){--kc-tone:var(--kc-green)} #client-area .kc-stat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} #client-area .kc-stat-label,#client-area .kc-stat>span:not(.kc-stat-value):not(.kc-stat-icon){display:block;color:var(--kc-muted);font-size:12px;line-height:1.55} #client-area .kc-stat .kc-stat-label{display:flex;align-items:center;gap:9px;margin-bottom:18px} #client-area .kc-stat .kc-stat-label svg{width:17px;height:17px;color:var(--kc-tone)} #client-area .kc-stat-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid color-mix(in srgb,var(--kc-tone) 24%,transparent);border-radius:8px;color:var(--kc-tone);background:color-mix(in srgb,var(--kc-tone) 9%,transparent)} #client-area .kc-stat-icon svg{width:17px;height:17px} #client-area .kc-stat>strong,#client-area .kc-stat-value{display:block;color:var(--kc-text);font-size:28px;line-height:1.2;font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere} #client-area .kc-stat small,#client-area .kc-stat-note{display:block;margin-top:10px;color:var(--kc-faint);font-size:11px;line-height:1.6} #client-area .kc-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:24px;align-items:start} #client-area .kc-grid-equal,#client-area .kc-grid--equal{grid-template-columns:repeat(2,minmax(0,1fr))} #client-area .kc-grid--wide{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)} #client-area .kc-panel{min-width:0;padding:26px;border:1px solid var(--kc-line);border-radius:10px;background:var(--kc-panel);box-shadow:0 10px 30px #00000016} #client-area .kc-panel-heading,#client-area .kc-panel-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-bottom:22px} #client-area :is(.kc-panel-heading,.kc-panel-header) h2{margin-bottom:7px;font-size:18px} #client-area :is(.kc-panel-heading,.kc-panel-header) p{font-size:12px;line-height:1.7;max-width:66ch} #client-area :is(.kc-panel-heading,.kc-panel-header) .kc-inline-link{font-size:12px} #client-area .kc-panel-body{display:flex;flex-direction:column;gap:20px} #client-area .kc-panel>p+:is(.kc-product-grid,.kc-form,.kc-session-list){margin-top:22px} #client-area .kc-panel>.kc-session-list+.kc-form-actions{margin-top:20px} #client-area .kc-panel-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-top:24px;padding-top:20px;border-top:1px solid var(--kc-line)} #client-area .kc-panel-footer p{font-size:12px} #client-area .kc-panel:has(>.kc-table-wrap){padding-bottom:10px} #client-area .kc-panel>.kc-table-wrap{margin-inline:-26px;width:calc(100% + 52px);max-width:calc(100% + 52px)} #client-area .kc-panel>.kc-table-wrap .kc-table :is(th,td):first-child{padding-left:26px} #client-area .kc-panel>.kc-table-wrap .kc-table :is(th,td):last-child{padding-right:26px} /* Actions have no generated arrows. */ #client-area .kc-actions,#client-area .kc-inline-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px} #client-area .kc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;max-width:100%;padding:11px 17px;border:1px solid var(--kc-line-strong);border-radius:7px;background:#182a3a;color:#dceaf6;font-size:13px;line-height:1.5;font-weight:650;text-align:center;text-decoration:none;white-space:normal;transition:background .18s,border-color .18s,color .18s,box-shadow .18s} #client-area .kc-btn svg{width:17px;height:17px} #client-area .kc-btn:hover{background:#213a4e;border-color:#53738a;color:#f4fbff;text-decoration:none} #client-area .kc-btn-primary{background:var(--kc-cyan);border-color:var(--kc-cyan);color:#07151d;box-shadow:0 3px 16px #5ad9ec0b} #client-area .kc-btn-primary:hover{background:#89e6f2;border-color:#89e6f2;color:#07151d;box-shadow:0 4px 20px #5ad9ec17} #client-area .kc-btn-secondary{background:#10202e;border-color:#36546b;color:#c1d9eb} #client-area .kc-btn-danger{background:#ff9caa0c;border-color:#ff9caa43;color:#ffb2bd} #client-area .kc-btn-danger:hover{background:#ff9caa19;border-color:#ff9caa7a;color:#ffd1d7} #client-area .kc-btn-small{min-height:35px;padding:8px 12px;font-size:12px} #client-area .kc-btn-full{width:100%} #client-area .kc-btn:disabled,#client-area .kc-icon-btn:disabled{opacity:.48;box-shadow:none} #client-area .kc-inline-link{color:var(--kc-cyan);font-size:13px;line-height:1.6;font-weight:600;text-decoration:none;overflow-wrap:anywhere} #client-area .kc-inline-link:hover{color:#a8eef7;text-decoration:underline;text-underline-offset:3px} #client-area .kc-divider{height:1px;border:0;background:var(--kc-line);margin-block:24px} /* Orders and billing. Tables scroll inside their panel. */ #client-area .kc-tabs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:5px;border:1px solid var(--kc-line);border-radius:8px;background:#0c1722;width:max-content;max-width:100%} #client-area .kc-tab{padding:8px 13px;min-height:35px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--kc-muted);font-size:12px;line-height:1.5;font-weight:600} #client-area .kc-tab:hover{color:var(--kc-text);background:#172838} #client-area .kc-tab[aria-selected="true"],#client-area .kc-tab[aria-pressed="true"]{color:var(--kc-cyan);background:#17303c;border-color:#325b6b} #client-area .kc-table-wrap{min-width:0;max-width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#35536b #0c1722} #client-area .kc-table{width:100%;min-width:620px;border-collapse:collapse;color:#c5d5e3;font-size:13px;line-height:1.6;text-align:left} #client-area .kc-table th{background:#0d1925;color:var(--kc-faint);padding:12px 16px;border-block:1px solid var(--kc-line);font-size:10px;line-height:1.5;font-weight:650;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} #client-area .kc-table td{padding:17px 16px;border-bottom:1px solid #233749;vertical-align:middle} #client-area .kc-table tbody tr:last-child td{border-bottom:0} #client-area .kc-table tbody tr:hover{background:#152738} #client-area .kc-table :is(strong,b){color:#e0ecf6;font-weight:600} #client-area .kc-table small{display:block;color:var(--kc-faint);font-size:11px;line-height:1.6;margin-top:3px} #client-area .kc-table a{color:var(--kc-cyan);text-decoration:none} #client-area .kc-table a:hover{text-decoration:underline} #client-area .kc-table code{font:11px/1.6 var(--mono,Consolas,monospace);overflow-wrap:anywhere} #client-area .kc-money{color:var(--kc-text);font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap} #client-area .kc-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 8px;border:1px solid #3c5870;border-radius:5px;background:#7991a412;color:#bbcedd;font-size:10px;line-height:1.5;font-weight:600;white-space:normal} #client-area .kc-badge::before{content:'';width:5px;height:5px;flex:0 0 5px;border-radius:50%;background:currentColor} #client-area .kc-badge:is([data-status="active"],[data-status="paid"],[data-status="completed"],[data-status="current"],[data-status="enabled"]){color:var(--kc-green);border-color:#86dfb73d;background:#86dfb70a} #client-area .kc-badge:is([data-status="pending"],[data-status="confirming"],[data-status="review"],[data-status="unpaid"]){color:#ffd199;border-color:#ffb15242;background:#ffb1520c} #client-area .kc-badge:is([data-status="suspended"],[data-status="expired"],[data-status="failed"],[data-status="revoked"],[data-status="cancelled"]){color:#ffb2bf;border-color:#ff9caa38;background:#ff9caa0b} #client-area .kc-badge[data-status="provisioning"]{color:#c9b6ff;border-color:#b79aff40;background:#b79aff0b} #client-area .kc-status-dot{display:inline-block;width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:var(--kc-cyan);box-shadow:0 0 0 4px #5ad9ec0a} #client-area .kc-summary-list{display:flex;flex-direction:column;gap:0} #client-area .kc-summary-list>div,#client-area .kc-summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;min-width:0;padding:13px 0;border-bottom:1px solid var(--kc-line);font-size:12px;line-height:1.6} #client-area .kc-summary-list>div:last-child,#client-area .kc-summary-row:last-child{border-bottom:0;padding-bottom:0} #client-area .kc-summary-list :is(dt,span:first-child){color:var(--kc-muted)} #client-area .kc-summary-list :is(dd,strong){color:#dce9f4;font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere} #client-area .kc-summary-list>div>code{display:block;flex:1;min-width:0;max-width:100%;text-align:right;white-space:normal;overflow-wrap:anywhere} #client-area .kc-order-card{min-width:0;padding:20px;border:1px solid var(--kc-line);border-radius:8px;background:#122130} #client-area .kc-order-card+.kc-order-card{margin-top:14px} #client-area .kc-order-card-head{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px} #client-area .kc-order-card-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--kc-muted);font-size:12px} /* Profile and account forms. */ #client-area .kc-form{display:flex;flex-direction:column;gap:20px;min-width:0} #client-area .kc-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;min-width:0} #client-area .kc-field{display:flex;flex-direction:column;gap:8px;min-width:0;color:#dce7f1;font-size:12px;line-height:1.6;font-weight:600} #client-area .kc-field>label,#client-area .kc-field>span:first-child:not(.kc-field-hint){color:#dce7f1} #client-area .kc-field :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){display:block;width:100%;min-width:0;max-width:100%;min-height:44px;margin:0;padding:11px 13px;border:1px solid #365066;border-radius:7px;background:var(--kc-input);color:var(--kc-text);font-size:14px;line-height:1.5;font-weight:400;box-shadow:inset 0 1px 3px #00000018;transition:border-color .16s,box-shadow .16s} #client-area .kc-field :is(input,textarea)::placeholder{color:#758ba0;opacity:1} #client-area .kc-field :is(input,select,textarea):focus{border-color:var(--kc-cyan);box-shadow:0 0 0 3px #5ad9ec0c} #client-area .kc-field :is(input,select,textarea)[aria-invalid="true"]{border-color:#df788c} #client-area .kc-field input:disabled{color:#8fa4b6;background:#101c27;border-color:#293d4e} #client-area .kc-field textarea{min-height:132px;resize:vertical;overflow-wrap:anywhere} #client-area .kc-field select{padding-right:34px} #client-area .kc-field-hint,#client-area .kc-field small{color:var(--kc-faint);font-size:11px;line-height:1.65;font-weight:400} #client-area .kc-field-error{color:var(--kc-red);font-size:11px;line-height:1.65;font-weight:500} #client-area .kc-form-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding-top:4px} #client-area .kc-form-actions p{font-size:12px} #client-area .kc-check{display:flex;align-items:flex-start;gap:10px;color:var(--kc-muted);font-size:12px;line-height:1.7;font-weight:400} #client-area .kc-check input{flex:0 0 16px;width:16px;height:16px;margin:3px 0 0;accent-color:var(--kc-cyan);cursor:pointer} #client-area .kc-check>span{min-width:0;overflow-wrap:anywhere} #client-area .kc-check a{color:var(--kc-cyan);text-decoration:underline;text-underline-offset:3px} #client-area .kc-consent-links{display:block;margin-top:8px;color:var(--kc-muted);font-size:12px;line-height:1.7;font-weight:400} #client-area .kc-consent-links a+a{margin-left:12px} #client-area .kc-field>span:first-child>small{margin-left:6px;color:var(--kc-faint);font-size:11px;font-weight:400} #client-area .kc-input-wrap{position:relative;min-width:0} #client-area .kc-input-wrap:has(.kc-password-toggle)>input{padding-right:78px} #client-area .kc-password-toggle{display:inline-flex;justify-content:center;align-items:center;gap:5px;position:absolute;right:7px;top:50%;transform:translateY(-50%);min-width:44px;min-height:32px;padding:6px 8px;border:0;border-radius:4px;background:transparent;color:#a4c9dc;font-size:11px;line-height:1.4;font-weight:500} #client-area .kc-password-toggle:hover{background:#1b3345;color:#e0f7ff} #client-area .kc-password-toggle svg{width:16px;height:16px} #client-area .kc-alert,#client-area .kc-form-status{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:14px 16px;border:1px solid #426072;border-radius:7px;background:#17303c;color:#c2e8f3;font-size:12px;line-height:1.75;overflow-wrap:anywhere} #client-area .kc-alert svg,#client-area .kc-form-status svg{width:17px;height:17px;margin-top:2px} #client-area .kc-alert p,#client-area .kc-form-status p{color:inherit;font-size:12px} #client-area :is(.kc-alert,.kc-form-status):is([data-tone="error"],.is-error){color:#ffc3cd;border-color:#78434f;background:#331f2a} #client-area :is(.kc-alert,.kc-form-status):is([data-tone="success"],.is-success){color:#b7eed1;border-color:#3b6559;background:#18332e} #client-area :is(.kc-alert,.kc-form-status):is([data-tone="warning"],.is-warning){color:#ffdab0;border-color:#70563a;background:#31291e} #client-area .kc-form-status:empty{display:none} /* Security, browser sessions and recovery material. */ #client-area .kc-session-list{display:flex;flex-direction:column;gap:14px} #client-area .kc-session{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:18px;border:1px solid #30495e;border-radius:8px;background:#0d1b28;min-width:0} #client-area .kc-session-device{display:flex;align-items:flex-start;gap:13px;min-width:0} #client-area .kc-session-device>svg{width:20px;height:20px;color:#81c4db;margin-top:3px} #client-area .kc-session-device strong{display:block;color:#dceaf5;font-size:13px;line-height:1.6;overflow-wrap:anywhere} #client-area .kc-session-meta{display:flex;flex-wrap:wrap;gap:4px 13px;color:var(--kc-faint);font-size:11px;line-height:1.7;margin-top:5px;overflow-wrap:anywhere} #client-area .kc-session>.kc-session-meta{display:block;flex:1;min-width:0;margin:0} #client-area .kc-session-meta strong{font-size:13px;line-height:1.65;color:#d8e8f3} #client-area .kc-session-meta p{font-size:12px;margin-top:5px} #client-area .kc-session-meta small{display:block;font-size:11px;margin-top:3px} #client-area .kc-session .kc-actions{justify-content:flex-end;flex-shrink:0} #client-area .kc-copy-group{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;padding:14px;border:1px solid #375267;border-radius:7px;background:#08141e} #client-area .kc-copy-group code{min-width:0;color:#cbebf7;font:12px/1.7 var(--mono,Consolas,monospace);overflow-wrap:anywhere;word-break:break-word} #client-area .kc-copy-group .kc-btn{flex-shrink:0} #client-area .kc-recovery-code,#client-area .kc-code-box{display:block;min-width:0;margin-block:20px;padding:20px 18px;border:1px dashed #7f673f;border-radius:8px;background:#ffb15209;color:#ffd3a0;font:500 18px/1.7 var(--mono,Consolas,monospace);letter-spacing:.025em;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;text-align:center;user-select:all} #client-area .kc-code-box code{font:inherit;letter-spacing:inherit;overflow-wrap:anywhere;white-space:pre-wrap} #client-area .kc-code-box>.kc-recovery-code{margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit} #client-area .kc-recovery-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px 0 22px} #client-area .kc-recovery-note{padding-top:16px;color:#b3a48e;font-size:12px;line-height:1.75} #client-area .kc-security-check{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid #31524f;border-radius:8px;background:#102723;color:#b7e2cf;font-size:12px;line-height:1.7} #client-area .kc-security-check svg{width:19px;height:19px;margin-top:1px;color:var(--kc-green)} #client-area .kc-security-check p{color:inherit;font-size:12px} #client-area .kc-security-check+.kc-security-check{margin-top:14px} /* Genuine empty and loading states. */ #client-area .kc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:258px;padding:30px 22px;text-align:center} #client-area .kc-empty-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;margin-bottom:20px;border:1px solid #37566a;border-radius:16px;background:linear-gradient(145deg,#193243,#102331);color:#82cfe0;box-shadow:0 0 34px #5ad9ec07} #client-area .kc-empty-icon svg{width:26px;height:26px} #client-area .kc-empty h2,#client-area .kc-empty h3{font-size:18px;line-height:1.4;margin-bottom:10px} #client-area .kc-empty p{max-width:48ch;font-size:13px;line-height:1.8} #client-area .kc-empty :is(.kc-actions,.kc-inline-actions){justify-content:center;margin-top:22px} #client-area .kc-empty>.kc-btn{margin-top:22px} #client-area .kc-loading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:220px;color:var(--kc-muted);font-size:13px} #client-area .kc-spinner{display:inline-block;width:18px;height:18px;flex:0 0 18px;border:2px solid #5ad9ec30;border-top-color:var(--kc-cyan);border-radius:50%;animation:kc-spin .9s linear infinite} #client-area .kc-skeleton{display:block;position:relative;min-height:16px;border:1px solid #263e51;border-radius:6px;background:#172a3a;overflow:hidden} #client-area .kc-skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#b3e6fb0a,transparent);transform:translateX(-100%);animation:kc-shimmer 1.7s ease-in-out infinite} #client-area .kc-skeleton-large{min-height:120px} #client-area .kc-skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} @keyframes kc-spin{to{transform:rotate(360deg)}} @keyframes kc-shimmer{to{transform:translateX(100%)}} /* Overview introduction and product shortcuts. */ #client-area .kc-welcome{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;min-height:252px;padding:30px 34px;background:radial-gradient(ellipse at 100% 45%,#1b58693b,transparent 60%),linear-gradient(115deg,#132a38,#101c2b);border-color:#35576b;isolation:isolate;overflow:hidden} #client-area .kc-welcome::before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#80d8ed05 1px,transparent 1px),linear-gradient(90deg,#80d8ed05 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000)} #client-area .kc-welcome-copy{position:relative;z-index:1;min-width:0;padding-block:8px;max-width:66ch} #client-area .kc-welcome-copy :is(h1,h2){font-size:26px;line-height:1.3;margin-bottom:13px} #client-area .kc-welcome-copy p{font-size:13px;max-width:56ch} #client-area .kc-welcome-copy :is(.kc-actions,.kc-inline-actions){margin-top:23px} #client-area .kc-welcome-art{width:100%;height:260px;max-height:100%;object-fit:cover;object-position:50% 25%;mask-image:linear-gradient(90deg,transparent,#000 24%,#000 82%,transparent);align-self:stretch;margin-block:-30px;opacity:.92} #client-area .kc-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} #client-area .kc-product-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:24px;border:1px solid #30495d;border-radius:10px;background:linear-gradient(145deg,#162a39,#101d2c);color:var(--kc-text);text-decoration:none;transition:border-color .18s,background .18s} #client-area .kc-product-card:hover{border-color:#5b899c;background:#193142;text-decoration:none} #client-area .kc-product-card h2,#client-area .kc-product-card h3{font-size:17px;line-height:1.35;margin-bottom:8px} #client-area .kc-product-card p{font-size:12px;line-height:1.75} #client-area .kc-product-card .kc-inline-link{margin-top:auto} #client-area .kc-product-card>strong{font-size:17px;font-weight:650} #client-area .kc-product-icon{--kc-product-tone:var(--kc-cyan);display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--kc-product-tone) 30%,transparent);border-radius:10px;background:color-mix(in srgb,var(--kc-product-tone) 9%,transparent);color:var(--kc-product-tone)} #client-area .kc-product-icon[data-family="dedicated"]{--kc-product-tone:var(--kc-amber)} #client-area .kc-product-icon[data-family="rdp"]{--kc-product-tone:var(--kc-violet)} #client-area .kc-product-icon svg{width:21px;height:21px} #client-area .kc-shortcuts,#client-area .kc-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} #client-area .kc-shortcut{display:flex;align-items:center;gap:11px;min-width:0;min-height:54px;padding:14px;border:1px solid #2d465b;border-radius:7px;background:#112131;color:#cbdde9;font-size:12px;font-weight:600;line-height:1.6;text-decoration:none;transition:background .18s,border-color .18s} #client-area .kc-shortcut:hover{background:#193245;border-color:#497085;color:#e8f9ff;text-decoration:none} #client-area .kc-shortcut svg{width:18px;height:18px;color:#83c8de} /* Full-page account access. */ #client-area .kc-auth{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;min-height:100dvh;padding:48px 24px;background:radial-gradient(ellipse at 12% 12%,#1a49553b,transparent 45%),radial-gradient(ellipse at 90% 90%,#392c6226,transparent 42%),#080e16} #client-area .kc-auth-card{width:min(480px,100%);min-width:0;padding:36px;border:1px solid #334d62;border-radius:14px;background:linear-gradient(145deg,#142433,#0e1b28);box-shadow:0 24px 80px #00000048,inset 0 1px 0 #c3edff07} #client-area .kc-auth-card--wide{width:min(600px,100%)} #client-area .kc-auth-card>:is(.kc-alert,.kc-check){margin-top:22px} #client-area .kc-auth-card>.kc-form-status{margin-top:18px} #client-area .kc-auth-card>.kc-btn{margin-top:22px;width:100%} #client-area .kc-auth-brand{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;width:100%;max-width:100%;color:var(--kc-text);font-size:25px;line-height:1.25;font-weight:750;letter-spacing:-.04em;text-decoration:none;margin:0 auto 30px} #client-area .kc-auth-brand .kc-brand{padding:0;font-size:25px} #client-area .kc-auth-brand>.kc-inline-link{font-size:12px;font-weight:500;letter-spacing:normal} #client-area .kc-auth-brand img{width:38px;height:38px;object-fit:contain} #client-area .kc-auth-brand span span{color:var(--kc-cyan)} #client-area .kc-auth-heading{text-align:center;margin-bottom:28px} #client-area .kc-auth-heading h1{font-size:28px;line-height:1.3;margin-bottom:12px} #client-area .kc-auth-heading p{font-size:13px;line-height:1.8;max-width:40ch;margin-inline:auto} #client-area .kc-auth .kc-tabs{width:100%;margin-bottom:26px} #client-area .kc-auth .kc-tab{flex:1} #client-area .kc-auth .kc-form-actions{padding-top:2px} #client-area .kc-auth .kc-form-actions>.kc-btn{width:100%} #client-area .kc-auth .kc-form-status{margin-bottom:22px} #client-area .kc-auth-links{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;margin-top:22px;font-size:12px} #client-area .kc-auth-links p{font-size:12px} #client-area .kc-auth-links a{color:var(--kc-cyan);font-size:12px;text-decoration:none} #client-area .kc-auth-links a:hover{text-decoration:underline;text-underline-offset:3px} #client-area .kc-auth-footer{margin-top:26px;padding-top:21px;border-top:1px solid var(--kc-line);color:var(--kc-faint);font-size:12px;line-height:1.75;text-align:center} #client-area .kc-auth-footer>span{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;font-size:11px} #client-area .kc-auth-footer>span svg{width:14px;height:14px;color:#86becb} #client-area .kc-auth-footer>button{display:block;margin:15px auto 0} #client-area .kc-auth-footer .kc-inline-link{font-size:12px} #client-area .kc-auth-back{color:#9fb3c5;font-size:12px;line-height:1.6;text-decoration:none} #client-area .kc-auth-back:hover{color:var(--kc-cyan)} #client-area .kc-auth-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 auto 20px;color:var(--kc-cyan);border:1px solid #5ad9ec3d;border-radius:14px;background:#5ad9ec0a} #client-area .kc-auth-icon svg{width:26px;height:26px} /* Existing private support keeps its own form semantics inside the portal. */ #client-area .kv-support{padding:0;font-size:14px} #client-area .kv-support .container{width:100%;max-width:none;margin:0;padding:0} #client-area .kv-support-grid{gap:24px} #client-area .kv-support-panel,#client-area .kv-support-side-card{background:var(--kc-panel);border-color:var(--kc-line);border-radius:9px;box-shadow:none} #client-area .kv-support-panel{padding:24px} #client-area .kv-support :is(h2,h3){letter-spacing:-.02em} #client-area .kv-support h2{font-size:23px} #client-area .kv-support p{font-size:14px} #client-area .kv-support-sidebar{gap:20px} #client-area .kv-support input,#client-area .kv-support select,#client-area .kv-support textarea{border-radius:6px;background:var(--kc-input);border-color:#365066} #client-area .kv-support-btn{border-radius:6px} @media(min-width:1600px){ #client-area .kc-main{padding:40px;gap:28px} #client-area .kc-topbar{padding-inline:40px} } @media(max-width:1250px){ #client-area .kv-support-grid{grid-template-columns:minmax(0,1fr)} #client-area .kv-support-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:1200px){ #client-area .kc-shell{grid-template-columns:218px minmax(0,1fr)} #client-area .kc-main{padding:26px} #client-area .kc-topbar{padding-inline:26px} #client-area .kc-stats,#client-area .kc-skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #client-area .kc-grid{grid-template-columns:minmax(0,1fr)} #client-area .kc-welcome{grid-template-columns:minmax(0,1fr) 210px;padding:28px} #client-area .kc-welcome-art{height:250px;margin-block:-28px} #client-area .kc-product-grid{gap:16px} #client-area .kc-product-card{padding:20px} } @media(max-width:900px){ :root body:has(#client-area .kc-shell[data-menu-open="true"]){overflow:hidden} #client-area .kc-shell{grid-template-columns:minmax(0,1fr)} #client-area .kc-sidebar{position:fixed;top:0;bottom:0;left:0;width:min(284px,calc(100vw - 48px));height:100dvh;padding-top:24px;z-index:60;visibility:hidden;pointer-events:none;transform:translateX(-110%);transition:transform .22s ease,visibility 0s .22s;box-shadow:22px 0 65px #00000055} #client-area .kc-shell[data-menu-open="true"] .kc-sidebar{visibility:visible;pointer-events:auto;transform:translateX(0);transition-delay:0s} #client-area .kc-shell[data-menu-open="true"] .kc-sidebar-backdrop{display:block;position:fixed;inset:0;z-index:50;width:100%;height:100%;margin:0;padding:0;border:0;background:#020811bd;backdrop-filter:blur(3px)} #client-area .kc-menu-toggle{display:inline-flex} #client-area .kc-topbar{min-height:74px;padding:15px 24px} #client-area .kc-main{padding:28px 24px 40px} } @media(max-width:640px){ #client-area h1{font-size:26px} #client-area .kc-topbar{gap:12px;padding-inline:16px} #client-area .kc-topbar-start,#client-area .kc-topbar-actions{gap:10px} #client-area .kc-breadcrumbs{font-size:11px;gap:6px} #client-area .kc-breadcrumbs>a{display:none} #client-area .kc-user>span:not(.kc-avatar){display:none} #client-area .kc-avatar{width:34px;height:34px;flex-basis:34px} #client-area .kc-mobile-brand{display:inline-flex;align-items:center;gap:8px} #client-area .kc-mobile-brand img{width:26px;height:26px} #client-area .kc-main{padding:24px 16px 32px;gap:20px} #client-area .kc-page-heading{gap:18px} #client-area .kc-page-heading h1{margin-bottom:9px} #client-area .kc-page-heading p{font-size:13px} #client-area .kc-page-heading>.kc-actions{width:100%} #client-area .kc-stats,#client-area .kc-skeleton-grid{gap:14px} #client-area .kc-stat{padding:18px 15px} #client-area .kc-stat::before{left:15px;right:15px} #client-area .kc-stat-top{align-items:flex-start;gap:8px;margin-bottom:14px} #client-area .kc-stat-label,#client-area .kc-stat>span:not(.kc-stat-value):not(.kc-stat-icon){font-size:11px} #client-area .kc-stat-icon{width:28px;height:28px;flex:0 0 28px;border-radius:6px} #client-area .kc-stat-icon svg{width:14px;height:14px} #client-area .kc-stat>strong,#client-area .kc-stat-value{font-size:25px} #client-area .kc-grid{gap:20px} #client-area .kc-panel{padding:20px} #client-area .kc-panel-heading,#client-area .kc-panel-header{padding-bottom:19px} #client-area :is(.kc-panel-heading,.kc-panel-header) h2{font-size:18px} #client-area .kc-panel>.kc-table-wrap{margin-inline:-20px;width:calc(100% + 40px);max-width:calc(100% + 40px)} #client-area .kc-panel>.kc-table-wrap .kc-table :is(th,td):first-child{padding-left:20px} #client-area .kc-panel>.kc-table-wrap .kc-table :is(th,td):last-child{padding-right:20px} #client-area .kc-panel-footer{margin-top:20px;padding-top:18px} #client-area .kc-form-grid{grid-template-columns:minmax(0,1fr);gap:18px} #client-area .kc-form{gap:18px} #client-area .kc-form-actions{gap:10px} #client-area .kc-session{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:16px} #client-area .kc-session>.kc-btn{grid-column:2;justify-self:start} #client-area .kc-session .kc-actions{justify-content:flex-start} #client-area .kc-summary-list>div,#client-area .kc-summary-row{gap:14px} #client-area .kc-copy-group{flex-direction:column;align-items:stretch;padding:13px;gap:12px} #client-area .kc-copy-group code{font-size:11px} #client-area .kc-copy-group .kc-btn{align-self:flex-start} #client-area .kc-empty{min-height:240px;padding:25px 8px} #client-area .kc-empty p{font-size:12px} #client-area .kc-empty .kc-actions{width:100%} #client-area .kc-empty .kc-actions .kc-btn{width:100%} #client-area .kc-tabs{gap:4px;padding:4px} #client-area .kc-tab{padding:8px 10px;font-size:11px} #client-area .kc-welcome{display:block;min-height:0;padding:24px 22px} #client-area .kc-welcome-copy{padding:0} #client-area .kc-welcome-copy :is(h1,h2){font-size:23px} #client-area .kc-welcome-art{position:absolute;right:-20px;bottom:0;width:180px;height:190px;max-height:none;margin:0;opacity:.12;z-index:0;mask-image:linear-gradient(90deg,transparent,#000 30%)} #client-area .kc-product-grid{grid-template-columns:minmax(0,1fr);gap:16px} #client-area .kc-product-card{gap:14px;padding:22px} #client-area .kc-shortcuts,#client-area .kc-link-grid{grid-template-columns:minmax(0,1fr)} #client-area .kc-auth{padding:28px 16px} #client-area .kc-auth-card{padding:28px 22px} #client-area .kc-auth-heading h1{font-size:26px} #client-area .kc-auth-brand{font-size:24px;margin-bottom:26px} #client-area .kc-auth-heading{margin-bottom:24px} #client-area .kc-recovery-code,#client-area .kc-code-box{font-size:16px;padding:17px 13px} #client-area .kc-recovery-actions>.kc-btn{width:100%} #client-area .kv-support-sidebar{grid-template-columns:minmax(0,1fr)} #client-area .kv-support-grid{gap:20px} #client-area .kv-support-panel{padding:20px 16px} } @media(max-width:380px){ #client-area [data-client-form="profile"] .kc-summary-list>div{flex-direction:column;align-items:flex-start;gap:6px} #client-area [data-client-form="profile"] .kc-summary-list>div>:is(code,strong){text-align:left} #client-area .kc-stats,#client-area .kc-skeleton-grid{grid-template-columns:minmax(0,1fr)} #client-area .kc-stat-top{margin-bottom:12px} #client-area .kc-stat>strong,#client-area .kc-stat-value{font-size:26px} #client-area .kc-stat{padding:20px} #client-area .kc-main{padding-inline:14px} #client-area .kc-topbar{padding-inline:14px} #client-area .kc-icon-btn,#client-area .kc-menu-toggle{width:36px;height:36px;flex-basis:36px} #client-area .kc-panel{padding:18px 16px} #client-area .kc-panel>.kc-table-wrap{margin-inline:-16px;width:calc(100% + 32px);max-width:calc(100% + 32px)} #client-area .kc-panel>.kc-table-wrap .kc-table :is(th,td):first-child{padding-left:16px} #client-area .kc-panel>.kc-table-wrap .kc-table :is(th,td):last-child{padding-right:16px} #client-area .kc-btn{padding-inline:13px} #client-area .kc-order-card{padding:16px} #client-area .kc-auth{padding-inline:12px} #client-area .kc-auth-card{padding:26px 18px} #client-area .kc-alert,#client-area .kc-form-status{padding:12px} #client-area .kc-breadcrumbs{max-width:32vw} } /* Text inputs keep their size when a phone brings up its keyboard. */ @media(max-width:640px){ #client-area .kc-field :is(input:not([type="checkbox"]):not([type="radio"]):not([readonly]),select,textarea){font-size:16px} #client-area .kv-support .kv-support-field :is(input:not([readonly]),select,textarea){font-size:16px} } @media(pointer:coarse){ #client-area .kc-password-toggle{min-height:44px} #client-area .kc-btn{min-height:44px} #client-area .kc-sidebar-footer .kc-nav-link{min-height:44px} #client-area :is(.kc-auth-footer,.kc-auth-links) :is(a,button){display:inline-flex;align-items:center;min-height:44px} } @media(prefers-reduced-motion:reduce){ #client-area :is(.kc-nav-link,.kc-icon-btn,.kc-menu-toggle,.kc-btn,.kc-sidebar,.kc-shortcut,.kc-product-card){transition:none} #client-area .kc-skeleton::after{animation:none;transform:none} #client-area .kc-spinner{animation-duration:1.8s} } /* The configured order survives login, signup and recovery. */ #client-area .kc-checkout-context{display:flex;align-items:flex-start;gap:12px;padding:16px 17px;margin:0 0 24px;border:1px solid #2d5868;border-radius:12px;background:linear-gradient(120deg,#14313f,#0d202b)} #client-area .kc-checkout-context>svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;color:#63dff0} #client-area .kc-checkout-context strong{display:block;font-size:13px;line-height:1.5;color:#e3f2f8} #client-area .kc-checkout-context p{margin:6px 0 0;color:#a8c2cf;font-size:12px;line-height:1.75} #client-area .kc-order-resume{display:inline-block;margin-top:8px;font-size:12px}