:root{
  --gx-bg:#080a12;
  --gx-surface:rgba(17,20,33,.94);
  --gx-surface-soft:rgba(255,255,255,.025);
  --gx-border:rgba(188,198,255,.105);
  --gx-border-hover:rgba(177,164,255,.3);
  --gx-ink:#f2f3fc;
  --gx-muted:#929bb2;
  --gx-purple:#a28aff;
  --gx-blue:#80a9ff;
  --gx-red:#ff8fa6;
  --gx-radius:20px;
}
html{scroll-padding-top:20px;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{background-color:var(--gx-bg);color:var(--gx-ink);line-height:1.58}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid rgba(172,153,255,.9);outline-offset:3px}
button:disabled{cursor:not-allowed!important;opacity:.55;transform:none!important;filter:none!important}
::selection{background:rgba(154,126,255,.35);color:#fff}
.dashboard-shell{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(34px,env(safe-area-inset-bottom))}
.topbar{border-bottom:1px solid rgba(195,202,255,.075);margin-bottom:12px;padding-bottom:18px}
.brand-link img{box-shadow:0 8px 28px rgba(114,93,255,.2)}
.profile{min-width:0;max-width:100%}
.card,.login-card,.login-showcase,.hero-panel{border-color:var(--gx-border);box-shadow:0 18px 58px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.018)}
.card{background-image:linear-gradient(145deg,rgba(255,255,255,.014),transparent 50%)}
.card:has(> .panel-card-heading){overflow:visible}
.panel-card-heading{gap:14px}
.panel-card-heading p,.builder-heading p,.key-panel-picker-intro p,.key-generator-empty p{overflow-wrap:anywhere}
.dashboard-tab,.primary-btn,.secondary-btn,.logout-btn,.saved-panel-actions button,.file-row-actions button,.file-row-actions a,.published-link-row button,.published-link-row a,.panel-loader-box button{transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease}
.primary-btn{min-height:46px;box-shadow:0 9px 25px rgba(107,92,255,.16),inset 0 1px 0 rgba(255,255,255,.12)}
.secondary-btn,.logout-btn{min-height:42px}
.panel-field input:not([type=checkbox]):not([type=color]):not([type=file]),.panel-field textarea,.panel-field select,.search-box input,.key-search-field input,.key-duration-unit input{font-size:16px}
.panel-field input:not([type=checkbox]):not([type=color]):not([type=file]),.panel-field textarea,.panel-field select,.key-duration-unit input,.key-search-field,.key-status-field .ga-select-trigger{border-color:rgba(190,198,255,.14)}
.panel-field input:not([type=checkbox]):not([type=color]):not([type=file]):focus,.panel-field textarea:focus,.panel-field select:focus,.key-duration-unit input:focus,.key-search-field:focus-within{border-color:rgba(172,153,255,.65);box-shadow:0 0 0 4px rgba(162,139,255,.09)}
.panel-fields.two-col{column-gap:16px;row-gap:16px}
.panel-form-section{border-color:rgba(196,203,255,.09)}
.panel-feature-editor,.panel-form-section,.saved-panel-row,.api-token-row,.api-project-row,.api-script-row{min-width:0}
.api-layout-grid,.api-stats-grid,.api-pricing-grid,.api-pricing-cards{min-width:0}
.api-token-card,.api-usage-card,.api-pricing-card,.docs-topic{border-color:var(--gx-border)}
.api-token-card,.api-usage-card,.api-pricing-card{box-shadow:0 16px 45px rgba(0,0,0,.14)}
footer,.docs-footer{max-width:100%;flex-wrap:wrap;row-gap:8px}
#toast{max-width:min(440px,calc(100vw - 28px));overflow-wrap:anywhere;padding:13px 16px;border:1px solid rgba(188,198,255,.14);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);backdrop-filter:blur(18px)}

/* Key expiry builder */
.key-generator-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(170px,.9fr);gap:12px;align-items:end;margin-top:18px}
.key-generator-grid .primary-btn{grid-column:auto;min-width:0;width:100%;height:46px;margin:0;justify-content:center;gap:12px;white-space:nowrap}
.key-generator-grid .primary-btn b{font-size:1.05rem}
.key-generator-grid .panel-field{min-width:0}
.key-custom-expiry{display:grid;gap:16px;margin-top:16px;padding:19px;border:1px solid rgba(162,138,255,.19);border-radius:17px;background:linear-gradient(145deg,rgba(128,103,255,.075),rgba(255,255,255,.016) 58%,rgba(89,133,255,.035))}
.key-duration-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0}
.key-duration-heading>div{min-width:0}
.key-duration-heading strong,.key-duration-heading small{display:block}
.key-duration-heading strong{color:#f0edff;font-size:.9rem;font-weight:850;letter-spacing:-.02em}
.key-duration-heading small{margin-top:5px;color:var(--gx-muted);font-size:.7rem;line-height:1.55}
.key-duration-badge{flex:0 0 auto;padding:6px 8px;border:1px solid rgba(168,146,255,.2);border-radius:999px;background:rgba(168,146,255,.08);color:#c7bbff;font-size:.53rem;font-weight:850;letter-spacing:.09em}
.key-expiry-mode-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px;border:1px solid rgba(188,198,255,.09);border-radius:12px;background:rgba(7,9,16,.62)}
.key-expiry-mode-switch button{min-width:0;min-height:39px;padding:8px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:#939cb4;font-size:.68rem;font-weight:800;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.key-expiry-mode-switch button:hover{color:#e6e4ff;background:rgba(255,255,255,.035)}
.key-expiry-mode-switch button.is-active{border-color:rgba(167,145,255,.22);background:linear-gradient(115deg,rgba(146,116,255,.16),rgba(91,137,255,.09));color:#e9e4ff;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.key-duration-grid,.key-exact-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.key-duration-unit{display:grid;gap:7px;min-width:0;padding:10px;border:1px solid rgba(192,199,255,.08);border-radius:12px;background:rgba(8,10,18,.34)}
.key-duration-unit>span{color:#cbd0e2;font-size:.68rem;font-weight:800}
.key-duration-unit input{width:100%;min-width:0;min-height:42px;padding:8px 9px;border:1px solid rgba(190,198,255,.14);border-radius:9px;background:rgba(8,11,19,.84);color:#f2f1ff;font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;outline:none}
.key-duration-unit input::-webkit-inner-spin-button,.key-duration-unit input::-webkit-outer-spin-button{opacity:.52}
.key-expiry-preview{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 13px;border:1px solid rgba(103,226,181,.15);border-radius:12px;background:rgba(67,203,156,.045)}
.key-expiry-preview-icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(103,226,181,.18);border-radius:10px;background:rgba(103,226,181,.08);color:#9ae9ca;font-size:1.2rem}
.key-expiry-preview>div{min-width:0}
.key-expiry-preview small,.key-expiry-preview strong{display:block}
.key-expiry-preview small{color:#8aa89e;font-size:.61rem;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.key-expiry-preview strong{margin-top:3px;color:#dff9ed;font-size:.78rem;line-height:1.55;overflow-wrap:anywhere}
.key-expiry-preview.is-invalid{border-color:rgba(255,143,166,.2);background:rgba(255,111,145,.045)}
.key-expiry-preview.is-invalid .key-expiry-preview-icon{border-color:rgba(255,143,166,.2);background:rgba(255,111,145,.08);color:#ffb3c2}
.key-expiry-preview.is-invalid small,.key-expiry-preview.is-invalid strong{color:#ffb3c2}
.key-custom-expiry>.field-hint{margin:0!important}

/* Searchable key library and per-key controls */
.key-list-head{align-items:center;gap:14px;margin-top:23px;padding-top:18px;border-top:1px solid rgba(192,200,255,.085)}
.key-list-head>div{min-width:0}
.key-list-head>div>strong{display:block;color:#f1f2fb;font-size:.87rem;letter-spacing:-.015em}
.key-list-head>div>small{display:block;margin-top:4px;color:#8992a8;font-size:.66rem;line-height:1.55}
.key-list-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(135px,.33fr) auto;align-items:center;gap:10px;margin:14px 0 12px}
.key-search-field{display:flex;align-items:center;gap:9px;min-width:0;min-height:43px;padding:0 12px;border:1px solid rgba(190,198,255,.14);border-radius:11px;background:rgba(8,11,19,.78);color:#9ca4bd}
.key-search-field>span{font-size:1.2rem;line-height:1}
.key-search-field input{width:100%;min-width:0;min-height:40px;padding:0;border:0;outline:none;background:transparent;color:#eff0fb;font-size:.75rem;box-shadow:none!important}
.key-search-field input::placeholder{color:#727b93}
.key-status-field{display:grid;grid-template-columns:1fr;gap:5px;min-width:0;color:#919ab2;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.key-status-field .ga-select{min-width:0}
.key-status-field .ga-select-trigger{min-height:43px;border-radius:11px;background:rgba(8,11,19,.85)}
.key-status-field .ga-select-value{font-size:.73rem;text-transform:none;letter-spacing:0}
.key-list-summary{justify-self:end;color:#929bb2;font-size:.64rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-keys-list{display:grid;gap:9px}
.panel-key-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:13px;border:1px solid rgba(188,198,255,.09);border-radius:14px;background:linear-gradient(120deg,rgba(255,255,255,.022),rgba(255,255,255,.008));transition:border-color .18s ease,background-color .18s ease}
.panel-key-row:hover{border-color:rgba(172,153,255,.19);background-color:rgba(157,133,255,.025)}
.panel-key-info{grid-column:1;grid-row:1;min-width:0;flex:initial}
.panel-key-info strong{color:#eff0fb;font-size:.76rem;letter-spacing:.01em;line-height:1.4}
.panel-key-info small{color:#8c95ad;font-size:.64rem;line-height:1.55;overflow-wrap:anywhere}
.panel-key-status{grid-column:2;grid-row:1;align-self:start;justify-self:end;padding:5px 8px;border:1px solid rgba(103,226,181,.12);border-radius:999px;background:rgba(103,226,181,.06);color:#9beacb;font-size:.56rem;font-weight:850;letter-spacing:.05em}
.panel-key-status.used,.panel-key-status.expired,.panel-key-status.revoked{border-color:rgba(200,205,225,.1);background:rgba(255,255,255,.04);color:#a3aabd}
.panel-key-actions{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:7px;min-width:0}
.panel-key-reset-hwid,.panel-key-revoke,.panel-key-delete{min-height:36px;padding:0 11px;border:1px solid rgba(190,198,255,.12);border-radius:9px;background:rgba(255,255,255,.035);color:#d1d5e6;font-size:.64rem;font-weight:800;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .18s ease}
.panel-key-reset-hwid{border-color:rgba(162,138,255,.2);background:rgba(162,138,255,.055);color:#d5c8ff}
.panel-key-revoke{border-color:rgba(255,190,111,.16);background:rgba(255,190,111,.04);color:#f2c795}
.panel-key-delete{border-color:rgba(255,143,166,.17);background:rgba(255,111,145,.055);color:#ffacbc}
.panel-key-reset-hwid:hover{border-color:rgba(162,138,255,.32);background:rgba(162,138,255,.085);color:#e0d7ff}
.panel-key-revoke:hover{border-color:rgba(255,190,111,.35);background:rgba(255,190,111,.09);color:#ffe1b9}
.panel-key-delete:hover{border-color:rgba(255,143,166,.36);background:rgba(255,111,145,.11);color:#ffd1da}
.key-list-toolbar .ga-select-menu{z-index:70}

/* Comfortable sizing on tablets and phones */
@media(max-width:980px){
  .key-generator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .key-generator-grid .primary-btn{grid-column:1/-1}
  .key-duration-grid,.key-exact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .key-list-toolbar{grid-template-columns:minmax(0,1fr) minmax(130px,.4fr)}
  .key-list-summary{grid-column:1/-1;justify-self:start}
}
@media(max-width:700px){
  .dashboard-shell{width:calc(100% - 24px);padding-top:max(10px,env(safe-area-inset-top))}
  .topbar{gap:9px;padding-inline:0}
  .brand-link{min-width:0}
  .brand-link img{width:39px;height:39px;border-radius:12px}
  .brand-link strong{font-size:.93rem}
  .brand-link small{font-size:.62rem}
  .top-actions{gap:6px}
  .profile{padding:4px 7px 4px 4px;gap:6px}
  .profile strong{font-size:.66rem}
  .profile small{font-size:.57rem}
  .status{font-size:.58rem;padding:7px 8px}
  .logout-btn{min-height:36px;padding-inline:9px;font-size:.65rem}
  .hero-panel{grid-template-columns:minmax(0,1fr);padding:clamp(17px,4.5vw,24px);gap:4px}
  .hero-art{display:none}
  .metric-grid{gap:7px}
  .metric-grid article{padding:12px 10px}
  .upload-card,.result-card,.quick-card,.files-card,.panel-editor-card,.panel-preview-card,.saved-panels-card,.key-manager-card,.api-token-card,.api-usage-card,.api-pricing-card{padding:clamp(13px,3.8vw,18px)}
  .section-top,.result-head,.files-head,.panel-card-heading{gap:10px}
  .panel-form-section{padding-block:16px}
  .key-panel-picker-card{padding:15px}
  .key-manager-card{gap:12px}
  .key-generator-grid{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:15px}
  .key-generator-grid .primary-btn{grid-column:auto;width:100%;min-height:47px}
  .key-custom-expiry{padding:14px;gap:13px;border-radius:14px}
  .key-duration-heading{gap:8px}
  .key-expiry-mode-switch{gap:4px;padding:4px}
  .key-expiry-mode-switch button{min-height:40px;padding-inline:6px;font-size:.64rem}
  .key-duration-heading strong{font-size:.82rem}
  .key-duration-heading small{font-size:.68rem}
  .key-duration-badge{font-size:.48rem;padding:6px 7px}
  .key-duration-grid,.key-exact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .key-duration-unit{padding:9px;gap:6px}
  .key-duration-unit>span{font-size:.65rem}
  .key-duration-unit input{min-height:43px;padding-inline:9px}
  .key-expiry-preview{align-items:flex-start;padding:11px}
  .key-expiry-preview strong{font-size:.73rem}
  .key-list-head{align-items:flex-start;gap:9px;margin-top:19px;padding-top:15px}
  .key-list-head>div>small{max-width:340px}
  .key-list-head .secondary-btn{min-height:38px;padding-inline:10px}
  .key-list-toolbar{grid-template-columns:minmax(0,1fr) minmax(105px,.55fr);gap:8px}
  .key-search-field{min-height:43px;padding-inline:10px}
  .key-search-field input{font-size:16px}
  .key-status-field .ga-select-trigger{min-height:43px;padding-inline:9px}
  .key-list-summary{grid-column:1/-1}
  .panel-key-row{gap:8px;padding:11px;border-radius:12px}
  .panel-key-info strong{font-size:.72rem}
  .panel-key-info small{font-size:.62rem}
  .panel-key-reset-hwid,.panel-key-revoke,.panel-key-delete{min-height:36px;padding-inline:10px;font-size:.62rem}
}
@media(max-width:420px){
  .dashboard-shell{width:calc(100% - 18px)}
  .topbar{flex-wrap:wrap}
  .profile{max-width:calc(100% - 112px)}
  .profile strong,.profile small{max-width:100px}
  .key-duration-heading{align-items:flex-start;flex-direction:column}
  .key-list-head{align-items:flex-start}
  .key-list-toolbar{grid-template-columns:minmax(0,1fr)}
  .key-status-field{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px}
  .key-list-summary{grid-column:1}
  .panel-key-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .panel-key-info{grid-column:1;grid-row:1}
  .panel-key-status{grid-column:2;grid-row:1}
  .panel-key-actions{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .builder-heading{align-items:flex-start}
  .builder-heading h1{font-size:clamp(1.95rem,9vw,2.55rem)}
  .published-link-row,.panel-loader-box>div{grid-template-columns:minmax(0,1fr)}
  .published-link-row input,.published-link-row button,.published-link-row a{grid-column:1}
}
@media(max-width:340px){
  .dashboard-shell{width:calc(100% - 14px)}
  .key-duration-grid{gap:6px}
  .key-duration-unit{padding:7px}
  .panel-key-reset-hwid,.panel-key-revoke,.panel-key-delete{padding-inline:7px;font-size:.59rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}