:root{
  /* Warm brown theme (Discord-style taupe/brown) */
  --bg:#2b2723;--panel:#35302b;--panel2:#3b352f;--elevated:#413a33;
  --line:#4a423a;--line2:#3a342e;
  --fg:#f3eee6;--muted:#b3a899;
  --accent:#d9a066;--accent2:#e9b885;--accent-soft:rgba(217,160,102,.16);
  --ok:#8bc48a;--err:#e58a86;--warn:#e7b55c;
  --sidebar:#262320;
  --sidebar-surface:#3c362f;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.4);
  --topbar-h:62px;
}
*{box-sizing:border-box}
html,body{height:100%}
/* Lock the viewport shell; the dashboard column scrolls beneath the fixed header. */
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 Ubuntu,-apple-system,Segoe UI,Arial,sans-serif;display:flex;height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}

/* ===== Sidebar ===== */
#side{position:fixed;left:0;top:var(--topbar-h);width:250px;background:var(--sidebar-surface);border-right:1px solid var(--line);border-radius:0;display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h));color:var(--fg);z-index:35}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px}
.brand .logo-img{height:34px;width:auto;display:block;object-fit:contain}
/* legacy letter-box logo (unused now the image is in place) */
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex-shrink:0}

#nav{flex:1;overflow:auto;padding:8px 12px;display:flex;flex-direction:column}
#nav a{display:flex;align-items:center;gap:13px;padding:11px 13px;margin:3px 0;border-radius:14px;cursor:pointer;color:var(--muted);text-decoration:none;font-weight:500;transition:background .15s,color .15s}
#nav a .ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
#nav a .ic svg{width:20px;height:20px;display:block}
#nav a:hover{background:rgba(255,255,255,.06);color:var(--fg)}
#nav a.on{background:var(--accent-soft);color:#fff}
#nav a.on .ic{color:var(--accent)}
/* Pushes the Billing + Support group to the bottom of the sidebar, with a divider on top. */
#nav .nav-spacer{margin-top:auto;height:1px;background:var(--line);margin-left:10px;margin-right:10px;margin-bottom:8px}

/* Copyright stays at the end of the dashboard document, not over scrolling content. */
#page-foot{position:static;flex:0 0 auto;min-height:42px;display:flex;align-items:center;justify-content:center;margin:0 12px 0 0;padding:8px 16px;background:var(--sidebar);text-align:center;color:var(--muted);font-size:12px}

/* ===== Page column (topbar + content) ===== */
#page{flex:1;min-width:0;min-height:0;height:100vh;margin-left:250px;padding-top:var(--topbar-h);display:flex;flex-direction:column;background:var(--sidebar);overflow-x:hidden;overflow-y:auto}
/* Content sits in a rounded card (Hostinger-style) over a darker brown. */
#page>#main{background:var(--panel);border-radius:0 22px 22px 0;margin:0 12px 0 0}

/* Topbar: fixed-height bar that never shrinks; content scrolls beneath it */
#topbar{position:fixed;top:0;left:0;right:0;width:100%;height:var(--topbar-h);display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:0 26px;background:var(--sidebar);z-index:50}
#topbar .spacer{flex:1}

/* Account notifications */
.notification-menu,.user-menu{position:relative;flex:0 0 40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;line-height:0}
.notification-btn{position:relative;box-sizing:border-box;width:38px;height:38px;min-width:38px;min-height:38px;margin:0;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(243,238,230,.14);border-radius:50%;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#f3eee6;cursor:pointer;line-height:0;transition:color .15s,border-color .15s,transform .12s;-webkit-tap-highlight-color:transparent}
#topbar .notification-btn:hover:not(:disabled){background:transparent;border-color:rgba(243,238,230,.34);box-shadow:none;color:#fff}
#topbar .notification-btn:active{transform:scale(.96);background:transparent;box-shadow:none}
.notification-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#topbar .notification-btn svg{display:block;width:20px;height:20px;stroke-width:1.9}
.notification-badge{position:absolute;top:-5px;right:-5px;min-width:24px;height:24px;padding:0 5px;border-radius:999px;background:#f23568;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;border:2px solid var(--sidebar)}
.notification-popover{position:absolute;right:0;top:50px;width:min(380px,calc(100vw - 28px));max-height:min(520px,calc(100vh - 90px));display:flex;flex-direction:column;overflow:hidden;background:var(--elevated);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:45}
.notification-popover[hidden]{display:none}
.notification-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.notification-head b,.notification-head span{display:block}
.notification-head b{font-size:14px;color:var(--fg)}
.notification-head span{margin-top:3px;font-size:12px;color:var(--muted)}
.notification-head button{border:0;background:none;color:var(--accent2);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
.notification-list{overflow:auto;padding:6px}
.notification-item{display:block;width:100%;padding:11px 12px;border:0;border-radius:9px;background:transparent;text-align:left;color:var(--fg);font:inherit;cursor:pointer}
.notification-item:hover{background:rgba(255,255,255,.06)}
.notification-item.unread{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.notification-item-title{display:flex;align-items:center;gap:8px;font-weight:650;font-size:13px}
.notification-item-title:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:0;flex:0 0 7px}
.notification-item.unread .notification-item-title:before{opacity:1}
.notification-item-message{display:block;margin:4px 0 0 15px;color:var(--muted);font-size:12px;line-height:1.45}
.notification-item-time{display:block;margin:6px 0 0 15px;color:var(--muted);font-size:10px}
.notification-empty{margin:0;padding:24px 14px;text-align:center;color:var(--muted);font-size:13px}

/* Avatar + dropdown */
.avatar-btn{box-sizing:border-box;width:40px;height:40px;min-width:40px;min-height:40px;border-radius:0;border:none;padding:0;margin:0;cursor:pointer;background:transparent;color:#f3eee6;display:flex;align-items:center;justify-content:center;line-height:0;transition:color .15s,transform .12s;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;opacity:1;box-shadow:none}
.avatar-btn svg{width:23px;height:23px;display:block;flex:0 0 23px;stroke-width:2.1}
#topbar .avatar-btn:hover:not(:disabled){background:transparent;box-shadow:none;color:var(--accent2)}
.avatar-btn:active{transform:scale(.96);opacity:1;background:transparent;box-shadow:none}
.avatar-btn:focus{outline:none}
.avatar-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:none;background:transparent}
.avatar-btn .av-img,.dropdown .head .av .av-img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar-picker{display:flex;align-items:center;gap:16px;margin:0 0 14px}
.avatar-picker .avatar-fields{flex:1;min-width:0}
.avatar-preview{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--panel2);border:1px solid var(--line)}

.dropdown{position:absolute;right:0;top:52px;width:280px;background:var(--elevated);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:40}
.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown .head{display:flex;align-items:center;gap:12px;padding:12px 12px 14px;border-bottom:1px solid var(--line)}
.dropdown .head .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#2b2723;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.dropdown .head .av svg{width:22px;height:22px;display:block}
.dropdown .head b{display:block;color:var(--fg);font-size:14px}
.dropdown .head span{display:block;color:var(--muted);font-size:12px;word-break:break-all}
.dropdown .items{padding:6px 0}
.dropdown .item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:10px 12px;margin:1px 0;color:var(--fg);font:inherit;cursor:pointer;text-decoration:none;transition:background .12s}
.dropdown .item:hover{background:rgba(255,255,255,.06)}
.dropdown .item .ic{display:inline-flex;color:var(--muted);width:18px;height:18px}
.dropdown .item .ic svg{width:18px;height:18px}
.dropdown .item .lbl{flex:1;display:flex;align-items:center;gap:11px}
.dropdown .item .val{color:var(--muted);font-size:12px}
.dropdown .item.danger{color:var(--err)}
.dropdown .sep{height:1px;background:var(--line);margin:6px 2px}
.dropdown select{width:auto;max-width:120px;padding:4px 8px;font-size:12px;border-radius:7px}

/* Language picker — searchable combobox with flags inside the account menu */
.dropdown .item.lang-row{position:relative}
.lang-picker{position:relative}
.lang-current{display:flex;align-items:center;gap:7px;background:var(--panel2,rgba(255,255,255,.05));border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--fg);font:inherit;font-size:12px;cursor:pointer;max-width:150px}
.lang-current:hover{background:rgba(255,255,255,.09)}
.lang-flag{width:20px;height:15px;border-radius:2px;object-fit:cover;flex-shrink:0;display:inline-block;vertical-align:middle;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-flag-wrap{display:inline-flex;align-items:center}
.lang-current .lang-flag,.lang-current .lang-flag-wrap{line-height:0}
.lang-current .lang-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px}
.lang-current .lang-caret{color:var(--muted);font-size:10px;margin-left:1px}
.lang-pop{position:absolute;right:0;top:calc(100% + 6px);width:230px;background:var(--elevated);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:7px;display:none;z-index:60}
.lang-picker.open .lang-pop{display:block}
.lang-search{width:100%;box-sizing:border-box;background:var(--panel2,rgba(0,0,0,.2));border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--fg);font:inherit;font-size:12px;margin-bottom:6px;outline:none}
.lang-search:focus{border-color:var(--accent)}
.lang-opts{max-height:240px;overflow-y:auto;overflow-x:hidden}
.lang-opt{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;border-radius:7px;padding:7px 9px;color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.lang-opt:hover{background:rgba(255,255,255,.07)}
.lang-opt.on{background:var(--accent-soft,rgba(255,255,255,.1))}
.lang-opt .lang-flag{width:22px;height:16px}
.lang-opt .lang-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-empty{padding:10px;color:var(--muted);font-size:12px;text-align:center}
/* Country grouping headings inside the language popup */
.lang-group{padding:9px 9px 4px;color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;position:sticky;top:0;background:var(--elevated);z-index:1}

/* ============================================================
   Full-screen animated loader shown while the UI is re-translated
   ============================================================ */
.i18n-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(10,12,16,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
.i18n-loader.show{opacity:1;visibility:visible}
.i18n-box{display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px 34px;background:var(--elevated);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);transform:scale(.92);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.i18n-loader.show .i18n-box{transform:scale(1)}
.i18n-flag{line-height:0}
.i18n-flag .lang-flag,.lang-flag-lg{width:40px;height:30px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.i18n-spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);border-right-color:var(--accent2,var(--accent));animation:i18nspin .8s linear infinite}
.i18n-txt{color:var(--fg);font-size:14px;font-weight:500;letter-spacing:.01em;max-width:260px;text-align:center}
@keyframes i18nspin{to{transform:rotate(360deg)}}
.vps-dots{display:inline-flex;margin-left:2px}
.vps-dots i{font-style:normal;animation:vps-dot 1.2s infinite both}
.vps-dots i:nth-child(2){animation-delay:.2s}
.vps-dots i:nth-child(3){animation-delay:.4s}
@keyframes vps-dot{0%,80%,100%{opacity:.15}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.i18n-spin{animation-duration:1.6s}}

/* Main content grows naturally; #page scrolls so the footer appears only at the end. */
#main{flex:0 0 auto;min-width:0;min-height:calc(100vh - var(--topbar-h) - 42px);width:100%;overflow:visible;padding:28px 34px 68px}
/* Keep text/cards readable on very wide screens while the card fills width */
#main>*{max-width:1180px}
#main>.cards,#main>.grid2{max-width:1180px}
h2{margin:0 0 20px;font-size:22px;font-weight:700;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--fg)}
/* Section header: title left, action button pushed to the right, aligned on the heading row */
.sec-head{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line);margin:0 0 20px;padding-bottom:14px}
.sec-head h2{margin:0;padding:0;border:0;flex:1}
.sec-head .order-link{margin-left:auto}
.sec-head .order-link,.sec-head button{margin:0}
/* Sharp-edged, no-glow button variant (higher specificity to beat .primary) */
button.sharp,button.primary.sharp{border-radius:0;box-shadow:none}
button.sharp:hover,button.primary.sharp:hover:not(:disabled){box-shadow:none}
h3{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--fg)}

/* Buttons */
button{background:var(--elevated);color:var(--fg);border:1px solid var(--line);border-radius:9px;padding:8px 15px;font:inherit;font-weight:500;cursor:pointer;margin:0 6px 6px 0;transition:.15s}
button:hover:not(:disabled){background:#4a423a;border-color:#5c5248}
button:disabled{opacity:.45;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#2b2723;box-shadow:none}
button.primary:hover:not(:disabled){background:var(--accent2);border-color:var(--accent2)}
button.danger{border-color:#6e4038;color:var(--err);background:var(--elevated)}
button.danger:hover:not(:disabled){background:#3a2420;border-color:#8a4a40}

/* Inputs */
input,select,textarea{background:#2a2621;color:var(--fg);border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;width:100%;max-width:380px}
textarea{max-width:600px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:none}
label{display:block;margin:12px 0 4px;color:var(--muted);font-size:13px;font-weight:500}
.row{display:flex;gap:8px;align-items:center;max-width:600px}
.row input{flex:1}
.trk-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.trk-form input{flex:1;min-width:220px;max-width:420px}
.trk-form button{flex-shrink:0}

/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%;max-width:100%;table-layout:auto;margin:12px 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{border-bottom:1px solid var(--line2);padding:11px 13px;text-align:left;vertical-align:top;word-break:break-word}
/* In the overview panels, let long descriptions wrap so columns stay aligned */
.panel table{margin:0}
.panel td,.panel th{white-space:normal}
tr:last-child td{border-bottom:0}
th{background:#2f2a25;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
table tr:hover td{background:#3a342e}
td code{background:#2a2621;padding:2px 6px;border-radius:5px;font-size:12px;color:var(--accent2)}

/* Boxes & panels */
.box{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:12px 0;background:var(--panel2)}
.box.ok{border-color:#4a5e3e;background:#2e3326}.box.warn{border-color:#6a5a2e;background:#3a3220}.box.err{border-color:#6e4038;background:#3a2622}
.panel{border:1px solid var(--line);border-radius:14px;padding:20px;margin:0 0 20px;background:var(--panel);box-shadow:var(--shadow);min-width:0}
/* Flat panel: no box background/border/shadow (used by the Account > Profile card). */
.panel.panel-flat{background:none;border:none;box-shadow:none;padding:0}
/* Equal columns; minmax(0,1fr) lets children (tables) shrink instead of overflowing */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
/* Panels inside grid2 match height and never overflow their column */
.grid2>.panel{height:100%;margin:0;overflow:hidden}
/* Account summary boxes: equal width, consistent spacing */
.grid2>.panel .box{margin:0 0 10px}
.grid2>.panel .box:last-child{margin-bottom:0}

/* Greeting banner */
.greet{margin:0 0 24px}
.greet h1{margin:0 0 6px;font-size:30px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.greet p{margin:0;color:var(--muted);font-size:14px}

/* Overview quick links and actionable account updates. */
.overview-quick-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
.overview-quick-link{display:flex;align-items:center;gap:12px;min-width:0;padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s,background .15s}
.overview-quick-link:hover{border-color:var(--accent);background:var(--elevated);transform:translateY(-1px)}
.overview-quick-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.overview-quick-icon{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 25px;color:var(--accent2)}
.overview-quick-icon svg{width:23px;height:23px}
.overview-quick-link b,.overview-quick-link small{display:block}
.overview-quick-link b{font-size:13px;line-height:1.35}
.overview-quick-link small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.35}
.overview-quick-arrow{margin-left:auto;color:var(--accent2);font-size:22px;line-height:1}
.overview-section{margin:0 0 24px;padding:17px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
#main .overview-section.overview-renewals-card{background-color:#20d6c2;border-color:#20d6c2;color:#102522}
#main .overview-renewals-card .overview-section-head h3,
#main .overview-renewals-card .overview-section-head p,
#main .overview-renewals-card .overview-section-head>.l,
#main .overview-renewals-card .overview-renewal,
#main .overview-renewals-card .overview-renewal-name small,
#main .overview-renewals-card .overview-renewal-due{color:#102522}
#main .overview-renewals-card .overview-renewal{margin:6px 0;padding:11px 12px;border:1px solid #242424;border-radius:8px;background:#000;color:#f3eee6}
#main .overview-renewals-card .overview-renewal-name small{color:#b3a899}
#main .overview-renewals-card .overview-renewal-due{color:#20d6c2}
.overview-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.overview-section-head h3{margin:0;color:var(--fg);font-size:16px}
.overview-section-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.overview-section-head>.l{white-space:nowrap;font-size:12px;font-weight:600}
.overview-section table{margin:0}
.overview-renewals{display:flex;flex-direction:column}
.overview-renewal{display:flex;align-items:center;gap:12px;padding:11px 2px;border-top:1px solid var(--line2);color:var(--fg);text-decoration:none}
.overview-renewal:first-child{border-top:0}
.overview-renewal:hover .overview-renewal-name b{color:var(--accent2)}
.overview-renewal-mark{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;color:var(--accent2)}
.overview-renewal-mark svg{width:19px;height:19px}
.overview-renewal-name{min-width:0;flex:1}
.overview-renewal-name b,.overview-renewal-name small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.overview-renewal-name b{font-size:13px;font-weight:600}
.overview-renewal-name small{margin-top:2px;color:var(--muted);font-size:11px}
.overview-renewal-due{color:var(--warn);font-size:12px;text-align:right}
.overview-empty{margin:0;padding:10px 0}

/* Active-services categories */
.svc-cat{margin:0 0 26px}
.svc-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.svc-head .ic{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.svc-head .ic svg{width:22px;height:22px}
.svc-head h3{margin:0;font-size:16px;font-weight:700;color:var(--fg)}
.svc-head .count{font-size:12px;font-weight:600;color:var(--accent2);background:var(--accent-soft);border-radius:999px;padding:3px 10px}
.svc-head .svc-manage{margin-left:auto;font-size:13px;font-weight:600}
.svc-cat table{margin:0}
.svc-cat>.muted{padding:14px 16px;border:1px dashed var(--line);border-radius:12px;margin:0}

/* Overview cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.statcard{display:block;border:1px solid var(--line);border-radius:14px;padding:20px;background:linear-gradient(160deg,#41392f,#35302b);text-decoration:none;color:var(--fg);transition:.15s;box-shadow:var(--shadow)}
.statcard:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.statcard .n{font-size:28px;font-weight:700;color:#fff}
.statcard .t{color:var(--muted);margin-top:2px}
.statcard .cta{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--accent2)}

/* Steps + progress */
.steps{margin-bottom:16px;color:var(--muted)}
.steps b{color:var(--accent2)}
.bar{border:1px solid var(--line);border-radius:6px;height:16px;overflow:hidden;margin:12px 0;max-width:600px;background:#2a2621}
.bar div{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;transition:width .5s}
.log{font:12px/1.6 monospace;max-height:220px;overflow:auto;border:1px solid var(--line2);border-radius:8px;padding:10px;background:#242019;margin-top:10px}

/* Badges & status text */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);text-transform:capitalize}
.badge.ok{color:var(--ok);border-color:#4a5e3e;background:#2e3326}
.badge.warn{color:var(--warn);border-color:#6a5a2e;background:#3a3220}
.badge.err{color:var(--err);border-color:#6e4038;background:#3a2622}
.badge.muted{color:var(--muted)}
.ok{color:var(--ok)}.err{color:var(--err)}.warn{color:var(--warn)}.muted{color:var(--muted)}

/* Icon picker */
.icon{width:96px;height:96px;border:1px solid var(--line);border-radius:12px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px;cursor:pointer;margin-right:8px;background:var(--panel2)}
.icon.sel,.icon:hover{border-color:var(--accent)}

/* Switch */
.switch{position:relative;display:inline-block;width:40px;height:22px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:#554c42;border-radius:999px;transition:.2s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(18px)}

/* Invoice paper (kept light for print realism) */
.paper{background:#fff;color:#000;padding:28px;max-width:660px;font:13px Arial,sans-serif;border-radius:8px;margin-top:14px}
.paper table{margin:12px 0;background:#fff}.paper th,.paper td{border:1px solid #000;color:#000;background:#fff;padding:5px 7px;text-transform:none;letter-spacing:0}

a.l{color:var(--accent2);cursor:pointer;word-break:break-all}

/* Mobile menu toggle */
#menu{display:none;position:fixed;top:12px;left:12px;z-index:50;font-size:18px;background:var(--elevated)}
/* Existing logo is aligned in the full-width topbar at every viewport size. */
.mobile-logo{display:block;position:absolute;left:26px;top:50%;transform:translateY(-50%);height:34px;width:auto;object-fit:contain;flex-shrink:0}
#side>.brand{display:none}

/* ===== Skeleton loaders ===== */
/* Shimmer placeholders shown while async views fetch data. Built from the theme
   tokens so they blend into the warm-brown look instead of reading as grey. The
   .sk-wrap container carries role="status"/aria-busy for screen readers; the
   shapes themselves are aria-hidden. */
.sk-wrap{margin:0}
.skeleton{display:block;border-radius:8px;background:linear-gradient(90deg,var(--panel2) 25%,rgba(255,255,255,.08) 37%,var(--panel2) 63%);background-size:200% 100%;animation:sk-shimmer 1.4s ease-in-out infinite}
@keyframes sk-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-line{height:12px;margin:8px 0;width:100%}
.sk-line.sm{width:60%}
.sk-line.lg{width:40%}
.sk-title{height:22px;width:220px;margin-bottom:16px}
.sk-block{height:120px;border-radius:14px}
.sk-avatar{width:72px;height:72px;border-radius:50%}
.sk-section-title{height:18px;width:210px;margin:22px 0 12px;border-radius:6px}
.sk-table-head{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 16px}
.sk-table-head .sk-line{height:10px;width:72%;margin:0 0 10px}
.sk-rows .sk-line:nth-child(3n+1){width:88%}
.sk-rows .sk-line:nth-child(3n+2){width:96%}
.sk-slow{display:flex;align-items:center;gap:9px;margin-top:16px;color:var(--muted);font-size:12px}
.sk-slow-spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sk-slow-spin .8s linear infinite}
@keyframes sk-slow-spin{to{transform:rotate(360deg)}}
/* Table skeleton: panel-like frame holding repeated shimmer rows. */
.sk-rows{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--panel)}
.sk-rows .sk-line:first-child{margin-top:0}
.sk-rows .sk-line:last-child{margin-bottom:0}
/* Card-grid skeleton mirrors the overview .cards layout. */
.sk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
@media(max-width:900px){.sk-cards{grid-template-columns:repeat(2,1fr)}}
/* Reduced motion: keep a static muted block, drop the shimmer animation. */
@media(prefers-reduced-motion:reduce){.skeleton{animation:none;background:var(--panel2)}.sk-slow-spinner{animation:none}}

@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.overview-quick-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  #menu{display:inline-block;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  #side{top:0;height:100vh;z-index:45;transform:translateX(-100%);transition:transform .2s}
  body.open #side{transform:translateX(0)}
  #side>.brand{display:none}
  #side #nav{padding-top:64px}
  #page{margin-left:0;padding-top:var(--topbar-h)}
  #page-foot{margin-right:8px}
  #page>#main{margin-right:8px;border-radius:0 18px 18px 0}
  #topbar{padding:0 16px 0 60px}
  .mobile-logo{left:50%;transform:translate(-50%,-50%)}
  #main{padding:22px 16px 68px}
  .dropdown{width:260px}
  .notification-popover{right:-54px}
}

/* ---- Renewal countdown ring (Game server "Renews / expires") ---- */
.renew-cell{display:flex;align-items:center;gap:14px}
.renew-ring{display:inline-flex;flex:0 0 auto;line-height:0}
.renew-ring svg{display:block}
.renew-ring circle{transition:stroke .5s ease,opacity .5s ease}
.renew-ring svg{animation:renew-clock 3s ease-in-out infinite}
@keyframes renew-clock{0%,100%{opacity:1}50%{opacity:.72}}
.renew-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.renew-meta .renew-date{font-weight:600}
.renew-meta .renew-sub{font-size:12px}
@media(max-width:760px){
  .renew-cell{gap:10px}
}
@media(prefers-reduced-motion:reduce){.renew-ring svg{animation:none}}

/* ============================================================
   Mobile table → stacked cards
   List tables (first row is all <th>) get the .tbl-list class
   from app.js. On narrow screens each data row becomes a card
   and every cell shows its column header as a left-side label
   via the data-label attribute. Detail tables (per-row <th>/<td>
   pairs like order details) are left untouched — they're already
   a 2-column label/value layout that fits mobile.
   ============================================================ */
@media(max-width:760px){
  /* Shrink the greeting on small screens */
  .greet h1{font-size:24px}
  /* Overview stat cards: 2-up is fine down to ~360px */
  .cards{grid-template-columns:repeat(2,1fr)}
  .overview-section{padding:14px}
  .overview-section-head{align-items:flex-start}

  table.tbl-list{
    border:none;background:transparent;border-radius:0;box-shadow:none;
  }
  /* Hide the header row (tagged .tbl-head by app.js) */
  table.tbl-list tr.tbl-head{display:none}
  /* Each remaining row becomes a card */
  table.tbl-list tr:not(.tbl-head){
    display:block;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:14px;
    overflow:hidden;
  }
  table.tbl-list tr:not(.tbl-head):last-child{margin-bottom:0}
  table.tbl-list tr:not(.tbl-head):hover td{background:transparent}

  /* Cells become label + value rows */
  table.tbl-list tr:not(.tbl-head) td{
    display:block;
    position:relative;
    padding:10px 14px 10px 44%;
    text-align:right;
    border-bottom:1px solid var(--line2);
    min-height:1px;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  table.tbl-list tr:not(.tbl-head) td:last-child{border-bottom:none}
  /* Header label sits in the left padding area */
  table.tbl-list tr:not(.tbl-head) td::before{
    content:attr(data-label);
    position:absolute;
    left:14px;top:10px;
    width:40%;
    text-align:left;
    color:var(--muted);
    font-weight:600;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:1.4;
  }
  /* Action column (empty header): no label, full-width button */
  table.tbl-list tr:not(.tbl-head) td[data-label=""],
  table.tbl-list tr:not(.tbl-head) td:not([data-label]){
    padding-left:14px;text-align:center;
  }
  table.tbl-list tr:not(.tbl-head) td[data-label=""]::before,
  table.tbl-list tr:not(.tbl-head) td:not([data-label])::before{display:none}
  table.tbl-list tr:not(.tbl-head) td[data-label=""] button,
  table.tbl-list tr:not(.tbl-head) td[data-label=""] a{
    display:block;width:100%;margin:2px 0;
  }
  /* Badges/code inside cells */
  table.tbl-list td .badge{margin-left:auto}
  table.tbl-list td code{font-size:12px}

  /* Detail tables (label/value rows) — allow the value column to wrap */
  .panel table tr th{white-space:nowrap;vertical-align:top}
}
@media(max-width:420px){.overview-quick-links{grid-template-columns:1fr}.overview-renewal{gap:8px}.overview-renewal-due{max-width:100px}}