/* ============================================================
   PERFECT PANEL — "CUBE" THEME (Followcube-style)
   Warm paper light theme + burgundy accent, optional dark mode.
   Fonts: Libre Franklin (UI) + IBM Plex Mono (labels/numbers)
   ============================================================ */

/* =========== DESIGN TOKENS =========== */
:root,
body[data-theme="light"] {
    --bg-app:        #DEDBCE;
    --bg-content:    #E9E6DA;
    --bg-panel:      #F2F0E6;
    --bg-card:       #FBFAF3;
    --bg-sidebar:    #F0EDE1;
    --bg-input:      #F2EFE3;
    --bg-readonly:   #DEDBCE;
    --bg-hover:      #E9E5D7;
    --line:          rgba(0,0,0,0.08);
    --line2:         rgba(0,0,0,0.12);
    --rowline:       rgba(0,0,0,0.09);
    --grid-line:     rgba(72,70,58,0.075);
    --ink:           #212228;
    --ink-muted:     #5B5C63;
    --ink-faint:     #8A8C94;
    --ink-ghost:     #A6A8B0;
    --accent:        #E8402D;
    --accent-hover:  #C22F1F;
    --accent-deep:   #C93B2A;
    --accent-tint:   #F9D9CC;
    --accent-soft:   #FCE9DF;
    --charcoal:      #26272E;
    --thead:         #26272E;
    --row:           #fff;
    --success-bg:    #eaf6ef;
    --success-fg:    #2F9E63;
    --danger-bg:     #FDECEA;
    --danger-fg:     #C0392B;
    --warning-bg:    #FBF0DF;
    --warning-fg:    #9C7218;
    --info-bg:       #E9F1FB;
    --info-fg:       #3573BC;
    --nav-bg:        linear-gradient(105deg,#FCE9DF,#F3D3C0);
    --nav-fg:        #C93B2A;
    --nav-glow:      0 4px 14px rgba(232,64,45,.18), inset 0 0 0 1px rgba(232,64,45,.22);
    --header-bg:     linear-gradient(90deg,#FBF6F1,#F4EDEE);
    --logo-bg:       linear-gradient(120deg,#FBF6F1,#F7EAE1);
    --logo-glow:     none;
    --logo-mark-bg:  linear-gradient(150deg,#F6E0E6,#EEC3CD);
    --logo-mark-glow:0 4px 14px rgba(232,64,45,.20), inset 0 0 0 1px rgba(232,64,45,.14);
    --bd-accent-bg:  #F9D9CC;
    --bd-accent-fg:  #C93B2A;
}

body[data-theme="dark"] {
    --bg-app:        #121316;
    --bg-content:    #17181C;
    --bg-panel:      #1E2025;
    --bg-card:       #25272D;
    --bg-sidebar:    #1B1D22;
    --bg-input:      #2C2E35;
    --bg-readonly:   #1F2126;
    --bg-hover:      #31333B;
    --line:          rgba(255,255,255,0.085);
    --line2:         rgba(255,255,255,0.15);
    --rowline:       rgba(255,255,255,0.08);
    --grid-line:     rgba(255,255,255,0.045);
    --ink:           #ECEDEF;
    --ink-muted:     #A9ABB3;
    --ink-faint:     #7B7D86;
    --ink-ghost:     #5B5D66;
    --accent:        #FF6A55;
    --accent-hover:  #FF8168;
    --accent-deep:   #FF9B84;
    --accent-tint:   #33231F;
    --accent-soft:   #2A211E;
    --charcoal:      #0E0F12;
    --thead:         #2F3138;
    --row:           #25272D;
    --success-bg:    #16271F;
    --success-fg:    #5FC08A;
    --danger-bg:     #2E1A17;
    --danger-fg:     #E88A7D;
    --warning-bg:    #2C2415;
    --warning-fg:    #D8A84E;
    --info-bg:       #17222E;
    --info-fg:       #7FB1E6;
    --nav-bg:        linear-gradient(105deg,#2A211E 0%,#8F3325 58%,#C2492F 100%);
    --nav-fg:        #FFEDE6;
    --nav-glow:      0 4px 14px rgba(255,106,85,.20), inset 0 0 0 1px rgba(255,106,85,.30);
    --header-bg:     linear-gradient(90deg,#1E1F24 0%,#17181C 62%,#141519 100%);
    --logo-bg:       linear-gradient(120deg,#1E1F24,#2A211E);
    --logo-glow:     inset 0 -1px 0 rgba(255,106,85,.08);
    --logo-mark-bg:  linear-gradient(150deg,#33231E,#8F3A28);
    --logo-mark-glow:0 0 12px rgba(255,106,85,.24), inset 0 0 0 1px rgba(255,106,85,.30);
    --bd-accent-bg:  #3a2519;
    --bd-accent-fg:  #e8895f;
}

/* =========== BASE =========== */
html, body {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body.fc-body {
    font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.55;
}
.fc-body h1, .fc-body h2, .fc-body h3, .fc-body h4, .fc-body h5 {
    color: var(--ink);
    letter-spacing: -.02em;
    font-weight: 800;
    margin-top: 0;
}
.fc-body a { color: var(--accent); text-decoration: none; }
.fc-body a:hover { color: var(--accent-hover); text-decoration: none; }
.fc-mono {
    font-family: 'IBM Plex Mono', monospace;
}

/* Hide default PP navbar (design replaces it entirely) */
.navbar, .navbar-default, .navbar-static-top { display: none !important; }

/* =========== KEYFRAMES (landing + shared) =========== */
@keyframes fc-pulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.7);opacity:.3;} }
@keyframes fc-marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes fc-draw { from{stroke-dashoffset:1000;} to{stroke-dashoffset:0;} }
@keyframes fc-popdot { 0%{transform:scale(0);opacity:0;} 70%{transform:scale(1.25);} 100%{transform:scale(1);opacity:1;} }
@keyframes fc-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }

/* ============================================================
   GUEST SHELL (#fcg-site) — landing & public pages
   ============================================================ */
#fcg-site * { box-sizing: border-box; }
#fcg-site {
    font-family: 'Libre Franklin', system-ui, sans-serif;
    color: #212228;
    -webkit-font-smoothing: antialiased;
    background-color: #F4EDEE;
    background-image:
        linear-gradient(rgba(232,64,45,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232,64,45,.065) 1px, transparent 1px),
        linear-gradient(180deg, #FAF4F5, #F4EDEE);
    background-size: 56px 56px, 56px 56px, auto;
    min-height: 100vh;
}
#fcg-site .fc-nav-link:hover { color: #E8402D !important; }
#fcg-site .fc-flink:hover { color: #E8402D !important; }
#fcg-site .fc-btn-pri:hover { background: #C22F1F !important; }
#fcg-site .fc-plat:hover { border-color: #212228 !important; background: #fff !important; }
#fcg-site .fc-row:hover { border-color: rgba(232,64,45,.4) !important; }
#fcg-site .fc-cat:hover { border-color: #212228 !important; }
#fcg-site .fc-favbtn:hover { background: #F9D9CC !important; }
#fcg-site .fc-idchip:hover { border-color: #E8402D !important; }
#fcg-site .fc-detail:hover { border-color: #212228 !important; }
#fcg-site .fc-cart:hover { background: #C22F1F !important; }
#fcg-site .fc-in:focus { background: #fff !important; border-color: #E8402D !important; outline: none; }
.fc-accent { color: #E8402D !important; -webkit-text-fill-color: #E8402D !important; }
.fc-grid {
    background:
        radial-gradient(circle at 80% 6%, rgba(232,64,45,.155), transparent 40%),
        linear-gradient(180deg, rgba(232,64,45,.05), rgba(232,64,45,.02) 55%, transparent 85%);
}

/* guest content wrapper for standard PP pages (blog, terms, faq…) */
.fcg-page,
#fcg-site > .container,
#fcg-site > div > .container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px 28px 72px;
    width: auto;
}
#fcg-site .well {
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(33,34,40,.06);
    padding: 32px;
}
#fcg-site .row { margin: 0; }
#fcg-site .col-md-8.col-md-offset-2,
#fcg-site .col-md-6.col-md-offset-3 { float: none; margin: 0 auto; padding: 0; }

/* landing responsive helpers (inline-style targeted, ported verbatim) */
@media (max-width:768px){ .fc-desktopnav{display:none!important;} #fc-burger{display:inline-flex!important;} }
@media (max-width:900px){ .fc-footgrid{grid-template-columns:repeat(2,1fr)!important;} }
@media (max-width:560px){ .fc-footgrid{grid-template-columns:1fr!important;} }
@media (max-width:1439px){
 [style*="zoom: 1.17"]{ zoom:1 !important; }
 [style*="zoom: 1.18"]{ zoom:1 !important; }
}
@media (max-width:1024px){
 #dc-root [style*="grid-template-columns: 1.25fr 1fr"],
 #dc-root [style*="grid-template-columns: 1fr 1.08fr"],
 #dc-root [style*="grid-template-columns: 1.15fr .85fr"],
 #dc-root [style*="grid-template-columns: 1.2fr .8fr"],
 #dc-root [style*="grid-template-columns: 1fr auto"]{ grid-template-columns:1fr !important; gap:36px !important; }
 #dc-root [style*="grid-template-columns: repeat(4, 1fr)"]{ grid-template-columns:repeat(2, 1fr) !important; }
 #dc-root h1[style*="font-size: 94px"]{ font-size:60px !important; }
 #dc-root [style*="font-size: 50px"]{ font-size:38px !important; }
 #dc-root [style*="font-size: 46px"]{ font-size:36px !important; }
 #dc-root [style*="font-size: 42px"]{ font-size:32px !important; }
}
@media (max-width:900px){
 #dc-root [style*="repeat(4"]{grid-template-columns:repeat(2,1fr)!important;}
 #dc-root [style*="1.25fr"], #dc-root [style*="1.15fr"], #dc-root [style*="1.2fr"],
 #dc-root [style*="1.08fr"], #dc-root [style*="1.1fr"],
 #dc-root [style*="grid-template-columns: 1fr auto"],
 #dc-root [style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important;}
}
@media (max-width:640px){
 header nav a[href^="#"]{ display:none !important; }
 #dc-root [style*="grid-template-columns"]{grid-template-columns:1fr!important;}
 #dc-root [style*="grid-template-columns: 1fr 1fr"][style*="border-top: 2px solid rgb(33, 34, 40)"]{grid-template-columns:1fr 1fr!important;}
 #dc-root [style*="grid-template-columns: 1fr 1fr"][style*="border-top: 2px solid rgb(33, 34, 40)"]>div{padding:20px 16px!important;}
 #dc-root [style*="repeat(3, 1fr)"][style*="padding-top: 36px"]{grid-template-columns:repeat(3,1fr)!important;gap:4px!important;}
 #dc-root [style*="repeat(3, 1fr)"][style*="padding-top: 36px"]>div{padding-left:0!important;padding-right:4px!important;}
 #dc-root [style*="repeat(3, 1fr)"][style*="padding-top: 36px"] [style*="font-size: 13px"]{font-size:9px!important;letter-spacing:.04em!important;margin-top:5px!important;}
 #dc-root h1[style*="94px"]{font-size:36px!important;line-height:.98!important;}
 #dc-root [style*="font-size: 52px"], #dc-root [style*="font-size:52px"],
 #dc-root [style*="font-size: 50px"], #dc-root [style*="font-size: 46px"],
 #dc-root [style*="font-size: 42px"], #dc-root [style*="font-size: 48px"]{font-size:26px!important;}
 #dc-root [style*="padding: 84px"], #dc-root [style*="padding: 90px"],
 #dc-root [style*="padding: 56px"], #dc-root [style*="padding: 52px"]{padding:36px 18px!important;}
}
#dc-root .sc-interp { display: contents; }

/* ============================================================
   APP SHELL (#fc-app) — authenticated pages
   ============================================================ */
#fc-app, #fc-app * { box-sizing: border-box; }
#fc-app {
    height: 100vh;
    overflow: hidden;
    font-family: 'Libre Franklin', system-ui, sans-serif;
}
.fc-shell {
    height: 100%;
    background: var(--bg-app);
    padding: clamp(14px, 2vmin, 32px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}
.fc-appc {
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 2400px;
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(33,34,40,.10);
}

/* --- sidebar --- */
.fc-sidebar {
    flex-shrink: 0;
    width: 206px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fc-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 75px;
    flex-shrink: 0;
    padding: 0 20px;
    border-bottom: 1px solid var(--line);
    background: var(--logo-bg);
    box-shadow: var(--logo-glow);
    text-decoration: none;
    color: var(--ink);
}
.fc-logo .mk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--logo-mark-bg);
    box-shadow: var(--logo-mark-glow);
}
.fc-logo .wd { font-size: 17px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-logo .wd .a { color: var(--accent); }
.fc-logo img { max-height: 34px; max-width: 150px; }
.fc-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px 12px 0;
    overflow-y: auto;
    min-height: 0;
}
.fc-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fc-nav__item .ni {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 14px;
}
.fc-nav__item:hover { background: var(--bg-hover); color: var(--ink); }
.fc-nav__item.on {
    background: var(--nav-bg);
    color: var(--nav-fg);
    box-shadow: var(--nav-glow);
    font-weight: 700;
}
.fc-balance { margin-top: auto; padding: 18px 14px; flex-shrink: 0; }
.fc-balance .cd {
    background: var(--charcoal);
    color: #fff;
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 10px 26px rgba(33,34,40,.22);
}
.fc-balance .lb {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #A6A8B0;
}
.fc-balance .vl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    color: #fff;
}
.fc-balance .bt {
    margin-top: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    background: var(--accent);
    color: #fff;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}
.fc-balance .bt:hover { background: var(--accent-hover); color: #fff; }

/* --- main column --- */
.fc-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fc-header {
    height: 75px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--header-bg);
}
.fc-header .ttl { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.fc-header .sub { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.fc-hact { display: flex; align-items: center; gap: 10px; }
.fc-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    min-width: 38px;
    padding: 0 13px;
    border: 1px solid var(--line2);
    background: var(--bg-card);
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-muted);
    cursor: pointer;
    text-decoration: none;
    line-height: 0;
}
.fc-ibtn:hover { color: var(--ink); border-color: var(--accent); }
.fc-ibtn.sq { padding: 0; }
.fc-ibtn.acc { background: var(--accent); border: none; color: #fff; }
.fc-ibtn.acc:hover { background: var(--accent-hover); color: #fff; }
.fc-ibtn.pw  { background: var(--charcoal); border: none; color: #fff; }
.fc-hbal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line2);
    background: var(--bg-card);
    border-radius: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}
.fc-burger { display: none; }
.fc-content {
    padding: 24px 28px;
    background-color: var(--bg-content);
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}
.fc-grid-bg {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 56px 56px;
}
.fc-page { max-width: 1340px; margin: 0 auto; }

/* --- banner --- */
.fc-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: linear-gradient(100deg, var(--accent-soft) 0%, var(--bg-card) 62%);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 15px 18px 15px 20px;
    margin-bottom: 22px;
}
.fc-banner .bl { display: flex; align-items: center; gap: 14px; min-width: 0; }
.fc-banner .ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border-radius: 12px;
    background: var(--accent-tint);
    color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(255,106,85,.28);
}
.fc-banner .nw {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
    color: #fff; background: var(--accent);
    padding: 2px 8px; border-radius: 20px;
}
.fc-banner .t1 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.fc-banner .t2 { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }
.fc-banner a.cta {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 16px; border-radius: 11px;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 800;
    text-decoration: none; white-space: nowrap;
}
.fc-banner a.cta:hover { background: var(--accent-hover); }

/* ============================================================
   PP COMPONENT SKINS (work inside #fc-app and guest pages)
   ============================================================ */

/* --- platform filter (services page) --- */
.filter-row {
    background: var(--bg-card) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin: 0 0 22px !important;
}
.filter-wrapper h4, .filter-row h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-faint);
    margin: 0 0 13px;
}
.filter-btn-text, .hide-filter { display: none !important; }
.filter-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 9px;
    padding: 0; margin: 0;
}
.filter-list > li { list-style: none; min-width: 0; }
.brand-category {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 100%; height: 60px;
    border-radius: 13px;
    border: 1px solid var(--line2);
    background-color: var(--bg-card);
    color: var(--ink-muted);
    cursor: pointer; font-family: inherit;
    transition: .12s;
    padding: 4px;
}
.brand-category:hover { border-color: var(--accent); color: var(--accent); }
.brand-category.active, .brand-category.is-active {
    border: 1px solid var(--accent);
    color: var(--accent);
    background-image: linear-gradient(180deg, var(--accent-soft), var(--accent-tint));
    box-shadow: 0 10px 24px rgba(232,64,45,.30);
}
.brand-category .filter-icon, .brand-category .social-icon {
    width: 26px !important; height: 26px !important;
    display: flex; align-items: center; justify-content: center;
    margin: 0 !important;
}
.brand-category .filter-icon svg, .brand-category .social-icon svg { width: 24px; height: 24px; }
.fc-tile__label {
    font-family: 'Libre Franklin';
    font-size: 9.5px; font-weight: 700; letter-spacing: -.01em;
    max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1; color: inherit;
}

/* --- two-column grid inside app --- */
#fc-app .row { margin: 0; display: grid; grid-template-columns: 1.55fr 1fr; gap: 22px; align-items: start; }
#fc-app .row.filter-row { display: block !important; }
/* single-column rows must not be squeezed into the 2-col grid */
#fc-app .row:has(> [class*='col-']:only-child) { display: block; }
#fc-app .row > [class*='col-'] { width: auto; float: none; padding: 0; min-width: 0; }
#fc-app .col-md-7 { grid-column: 1 !important; }
#fc-app .col-sm-5 { grid-column: 2 !important; }
#fc-app .row .row { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
#fc-app .row::before, #fc-app .row::after { display: none !important; }
#fc-app .col-md-8.col-md-offset-2,
#fc-app .col-md-6.col-md-offset-3 { grid-column: 1 / -1 !important; margin-left: 0; }
#fc-app .row:has(> .col-md-8.col-md-offset-2),
#fc-app .row:has(> .col-md-6.col-md-offset-3) { display: block; }
#fc-app .container, #fc-app .container-fluid { width: auto; max-width: none; padding: 0; margin: 0; }

/* --- cards / wells --- */
.well, .panel {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: none;
    padding: 24px;
    margin: 0 0 18px;
}
.well-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; display: flex; align-items: center; }
/* long-form content inside wells (faq, terms, blog): breathing room between sections */
#fc-app .well h3 { font-size: 17px; margin: 20px 0 6px; }
#fc-app .well h3:first-child { margin-top: 0; }
.panel-heading {
    background: transparent;
    border-bottom: 1px solid var(--line);
    padding: 0 0 14px;
    margin: 0 0 18px;
    font-weight: 800;
    color: var(--ink);
}
.panel-title { color: var(--ink); font-weight: 800; font-size: 16px; }
.panel-body { padding: 0; }

/* --- tabs (mode switcher) --- */
.nav-tabs, .nav-tabs.well-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-hover);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
    border-bottom: none;
    list-style: none;
}
.nav-tabs > li { flex: 1; margin: 0; float: none; }
.nav-tabs > li > a {
    display: block; text-align: center;
    border: none !important;
    border-radius: 9px !important;
    font-size: 13px; font-weight: 700;
    padding: 9px 6px;
    color: var(--ink-faint);
    background: transparent;
    margin: 0;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { color: #fff; background: var(--accent); }
.nav-tabs > li.fc-hide { display: none !important; }

.nav-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: var(--bg-hover); border: 1px solid var(--line); border-radius: 12px; padding: 4px; margin-bottom: 20px; list-style: none; }
.nav-pills > li { flex: 0 0 auto; margin: 0 !important; float: none; }
.nav-pills > li > a { display: block; text-align: center; border-radius: 9px; font-size: 13px; font-weight: 700; padding: 9px 16px; color: var(--ink-faint); }
.nav-pills > li.active > a, .nav-pills > li > a:hover { color: #fff; background: var(--accent); }
/* search / trailing controls sit at the far end of the pill bar */
.nav-pills > li.search, .nav-pills > li.pull-right { margin-left: auto !important; float: none; }
.nav-pills .input-group { display: flex; width: 300px; max-width: 100%; }
.nav-pills .input-group .form-control { height: 40px; flex: 1; min-width: 0; border-radius: 9px 0 0 9px; margin: 0; }
.nav-pills .input-group-btn { width: auto; }
.nav-pills .input-group-btn .btn { height: 40px; padding: 0 14px; border-radius: 0 9px 9px 0; margin: 0; }
.nav-pills .dropdown-toggle { height: 40px; display: inline-flex; align-items: center; gap: 8px; }
/* PP fills this label via JS; until then show a sane default */
[data-filter-active-category]:empty::after { content: 'All services'; }

/* --- forms --- */
.control-label, label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-faint);
    margin-bottom: 7px;
}
.form-control {
    width: 100%;
    height: 50px;
    border: 1px solid var(--line2);
    background: var(--bg-input);
    padding: 0 16px;
    border-radius: 11px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    box-shadow: none;
}
select.form-control { cursor: pointer; font-weight: 600; }
.form-control:focus {
    background: var(--bg-card);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(232,64,45,.16);
    outline: none;
}
.form-control[readonly] { background: var(--bg-readonly); }
textarea.form-control {
    height: auto;
    min-height: 180px;
    padding: 14px 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    line-height: 1.7;
}
.form-group { margin-bottom: 16px; }
.help-block { font-size: 12px; color: var(--ink-faint); }
#service_description .panel-body {
    background: var(--bg-input);
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--ink-muted);
}
.input-group-addon {
    background: var(--bg-hover);
    border: 1px solid var(--line2);
    color: var(--ink-muted);
    border-radius: 11px;
}
.forgot-password { position: absolute; right: 0; top: 2px; font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.form-group__password { position: relative; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 15px; height: 15px; }

/* --- search input with icon --- */
.input-wrapper { position: relative; }
.input-wrapper .select2-selection, .input-wrapper input, .input-wrapper .form-control { padding-left: 42px !important; }
.input-wrapper > button, .input-wrapper .fa-search {
    position: absolute !important;
    left: 14px !important; right: auto !important;
    top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    color: var(--ink-ghost);
    z-index: 3; pointer-events: none;
    padding: 0;
    display: flex; align-items: center;
}

/* --- buttons --- */
.btn { font-family: inherit; }
/* .fc-body a paints anchors accent-red — button-shaped anchors must keep their own colors */
.fc-body a.btn-primary, .fc-body a.btn-success, .fc-body a.btn-danger { color: #fff; }
.fc-body a.btn-default { color: var(--ink-muted); }
.fc-body a.btn-default:hover { color: var(--ink); }
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--accent);
    border: none;
    color: #fff;
    font-weight: 800;
    border-radius: 13px;
    height: 50px;
    padding: 0 28px;
    font-size: 14.5px;
    box-shadow: 0 12px 26px rgba(232,64,45,.32);
    cursor: pointer;
    white-space: nowrap;
    text-shadow: none;
}
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); color: #fff; }
#fc-app #order-form .btn-primary { height: 62px; padding: 0 40px; font-size: 17px; box-shadow: 0 16px 34px rgba(232,64,45,.42); }
.btn-default {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--line2);
    color: var(--ink-muted);
    font-weight: 700;
    border-radius: 11px;
    height: 44px; padding: 0 18px;
    font-size: 13px;
}
.btn-default:hover { color: var(--ink); border-color: var(--accent); background: var(--bg-card); }
.btn-success { background: var(--success-fg); border: none; color: #fff; font-weight: 700; border-radius: 11px; }
.btn-danger  { background: var(--danger-fg);  border: none; color: #fff; font-weight: 700; border-radius: 11px; }
.btn-sm { height: 34px !important; padding: 0 13px !important; font-size: 12px !important; border-radius: 9px !important; box-shadow: none !important; }
.btn-block { display: flex; width: 100%; }

/* --- charge box --- */
.fc-chargebox {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; margin-top: 22px;
    padding: 22px 26px;
    background: var(--accent-soft);
    border: 1px solid rgba(232,64,45,.2);
    border-radius: 16px;
    flex-wrap: wrap;
}
.fc-chargebox > div:first-child { flex: 1 1 auto; min-width: 0; }
.fc-chargebox .cl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--accent-deep);
}
.fc-chargebox .cv {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 44px; font-weight: 700; line-height: 1;
    color: var(--accent);
    letter-spacing: -.02em;
    margin-top: 4px;
}
.fc-chargebox .csub { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--accent-deep); opacity: .8; margin-top: 6px; }
.fc-chargebox .btn-primary { width: auto !important; flex: 0 0 auto !important; }

/* --- info chips --- */
.fc-infochips { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 18px; }
.fc-ichip {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 500;
    color: var(--ink-muted);
    border-radius: 7px; padding: 5px 10px;
    border: 1px solid var(--line);
}
.fc-ichip b { text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; font-weight: 600; }
.fc-ichip--rate { background: var(--accent-soft); } .fc-ichip--rate b { color: var(--accent-deep); }
.fc-ichip--drop { background: #F2F0EC; } .fc-ichip--drop b { color: #8A8C94; }
.fc-ichip--refill { background: #EAF3EC; } .fc-ichip--refill b { color: #3AA96C; }
.fc-ichip--speed { background: #F6E3D7; } .fc-ichip--speed b { color: #C93B2A; }
body[data-theme="dark"] .fc-ichip--drop { background: #31333B; }
body[data-theme="dark"] .fc-ichip--refill { background: #16271f; } body[data-theme="dark"] .fc-ichip--refill b { color: #5fc08a; }
body[data-theme="dark"] .fc-ichip--speed { background: #2E211E; } body[data-theme="dark"] .fc-ichip--speed b { color: #FF9B84; }

/* --- toggle switch (drip-feed etc.) --- */
.form-group__checkbox { display: flex !important; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 6px; }
.form-group__checkbox-label {
    position: relative !important;
    display: inline-block !important;
    width: 38px !important; height: 22px !important; min-width: 38px;
    margin: 0 !important; padding: 0 !important;
    cursor: pointer; flex-shrink: 0;
}
.form-group__checkbox-label input {
    position: absolute !important; inset: 0;
    opacity: 0 !important;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; cursor: pointer; z-index: 2;
}
.form-group__checkbox .checkmark {
    position: absolute !important; inset: 0 !important;
    border: none !important;
    border-radius: 20px !important;
    background: var(--line2) !important;
    width: 38px !important; height: 22px !important;
    transition: background .15s;
}
.form-group__checkbox-label input:checked ~ .checkmark { background: var(--accent) !important; }
.form-group__checkbox .checkmark::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 2px !important; left: 2px !important;
    width: 18px !important; height: 18px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transform: none !important;
    transition: left .15s;
}
.form-group__checkbox-label input:checked ~ .checkmark::after { left: 18px !important; }
.form-group__label-title { font-size: 13.5px !important; font-weight: 700 !important; margin: 0 !important; color: var(--ink) !important; cursor: pointer; text-transform: none; letter-spacing: 0; }

/* --- select2 --- */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid var(--line2) !important;
    border-radius: 11px !important;
    background: var(--bg-input) !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box;
}
.select2-selection__rendered {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    color: var(--ink) !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 0 5px;
    line-height: 1.25;
    padding-left: 12px !important;
    padding-right: 24px !important;
}
.select2-selection__arrow { height: 48px !important; right: 8px !important; }
.select2-selection__id {
    display: inline-flex !important; align-items: center;
    background: var(--accent-soft) !important;
    color: var(--accent-deep) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    padding: 3px 9px !important; border-radius: 7px !important;
    line-height: 1; border: none !important; margin: 0 !important;
}
.select2-selection__text { font-weight: 600; }
.select2-selection__icon { display: inline-flex !important; align-items: center; margin-right: 3px; color: var(--accent); }
.select2-selection__icon a, .select2-selection__icon .btn-group-vertical,
.select2-selection__icon * { margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.select2-dropdown {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    background: var(--bg-card) !important;
    border-color: var(--line2) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.select2-search__field {
    background: var(--bg-input) !important;
    border: 1px solid var(--line2) !important;
    border-radius: 8px !important;
    color: var(--ink) !important;
    padding: 6px 10px !important;
    font-family: inherit !important;
}
.select2-results__option {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    display: flex; align-items: center; gap: 6px;
    line-height: 1.35; flex-wrap: wrap;
    padding: 9px 12px;
}
.select2-results__option[aria-selected=true] { background: var(--accent-soft) !important; color: var(--accent-deep) !important; }
.select2-results__option .select2-selection__id, .select2-dropdown .badge, .select2-results__option .badge {
    background: var(--accent-soft) !important;
    color: var(--accent-deep) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11.5px !important; font-weight: 700 !important;
    padding: 3px 9px !important; border-radius: 7px !important; border: none !important;
}
.select2-results__option--highlighted,
.select2-results__option--highlighted[aria-selected] { background: var(--accent-tint) !important; color: var(--accent-deep) !important; }
.select2-results__option a, .select2-results__option .btn-group-vertical,
.select2-results__option .select2-selection__icon, .select2-results__option .select2-selection__icon * {
    background: transparent !important; border: none !important; box-shadow: none !important;
}

/* --- tables --- */
.table-responsive { border: none; background: transparent; }
.fc-tablewrap, .table-responsive { overflow-x: auto; }
.table {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 14px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    color: var(--ink);
    margin-bottom: 18px;
}
.table > thead > tr > th {
    background: var(--thead);
    color: #fff;
    font-family: 'Libre Franklin', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: none;
    padding: 13px 16px;
    white-space: nowrap;
}
.table > tbody > tr > td {
    background: var(--row);
    border-top: 1px solid var(--rowline);
    padding: 13px 16px;
    font-size: 13px;
    vertical-align: middle;
}
.table > tbody > tr:first-child > td { border-top: none; }
.table-hover > tbody > tr:hover > td { background: var(--bg-hover); }
.table .fc-mono, .table td.mono { font-family: 'IBM Plex Mono', monospace; }
/* long YouTube URLs must wrap, or the link column pushes the actions
   column (refill/cancel) out of the card's visible area */
#fc-app .table td.width-40 { overflow-wrap: anywhere; }
/* compact in-table action buttons (refill / cancel) */
.btn-xs {
    height: 28px !important; padding: 0 12px !important;
    font-size: 11px !important; font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 2px 2px 0 var(--hard-shadow) !important;
}
.btn-xs:hover, .btn-xs:active { transform: none !important; box-shadow: 2px 2px 0 var(--hard-shadow) !important; }
.order-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }

/* --- status labels / badges --- */
.label, .badge, .status-badge {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-block;
    width: fit-content;
    white-space: nowrap;
    line-height: 1.5;
}
.status-badge { background: var(--bg-hover); color: var(--ink-faint); }
.label-success, .badge-success, .status-completed, .status-active, .status-answered { background: var(--success-bg) !important; color: var(--success-fg) !important; }
.label-danger, .badge-danger, .status-canceled, .status-rejected, .status-error, .status-expired { background: var(--danger-bg) !important;  color: var(--danger-fg) !important; }
.label-warning, .badge-warning, .status-pending, .status-partial, .status-paused, .status-open { background: var(--warning-bg) !important; color: var(--warning-fg) !important; }
.label-info, .badge-info, .status-inprogress, .status-processing      { background: var(--info-bg) !important;    color: var(--info-fg) !important; }
.status-closed { background: var(--bg-hover) !important; color: var(--ink-faint) !important; }
.label-primary, .badge-primary                     { background: var(--accent-soft) !important; color: var(--accent-deep) !important; }
.label-default, .badge-default                     { background: var(--bg-hover) !important;   color: var(--ink-faint) !important; }

/* --- alerts --- */
.alert {
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 13.5px;
    font-weight: 600;
    background: var(--bg-card);
    color: var(--ink);
    margin-bottom: 18px;
}
.alert-success { border-left-color: var(--success-fg); background: var(--success-bg); color: var(--success-fg); }
.alert-danger, .alert-error { border-left-color: var(--danger-fg); background: var(--danger-bg); color: var(--danger-fg); }
.alert-warning { border-left-color: var(--warning-fg); background: var(--warning-bg); color: var(--warning-fg); }
.alert-info { border-left-color: var(--info-fg); background: var(--info-bg); color: var(--info-fg); }
.alert .close { color: currentColor; opacity: .6; text-shadow: none; }
.alert h4 { color: inherit; font-weight: 800; margin-bottom: 6px; }

/* --- pagination --- */
.pagination > li > a, .pagination > li > span {
    background: var(--bg-card);
    border: 1px solid var(--line2);
    color: var(--ink-muted);
    font-weight: 700;
    font-size: 13px;
    margin: 0 3px;
    border-radius: 9px !important;
    padding: 8px 13px;
}
.pagination > li > a:hover { border-color: var(--accent); color: var(--accent); background: var(--bg-card); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --- modal --- */
.modal-backdrop { background: rgba(33,34,40,.5); }
.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(33,34,40,.25);
    color: var(--ink);
}
.modal-header { border-bottom: 1px solid var(--line); padding: 18px 24px; }
.modal-title { font-weight: 800; color: var(--ink); }
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--line); padding: 16px 24px; }
.close { color: var(--ink); text-shadow: none; opacity: .5; }
.close:hover { color: var(--ink); opacity: 1; }

/* --- list group --- */
.list-group-item {
    background: var(--bg-card);
    border-color: var(--line);
    color: var(--ink);
    padding: 13px 16px;
}
.list-group-item:first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.list-group-item:last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
.list-group-item:hover { background: var(--bg-hover); }

/* --- code / api --- */
code, pre {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--charcoal);
    color: #FFB39E;
    border: none;
    border-radius: 10px;
    font-size: 12.5px;
}
code { padding: 2px 8px; }
pre { padding: 16px 18px; overflow-x: auto; line-height: 1.7; }
pre code { background: transparent; padding: 0; }

/* --- service updates rail --- */
#updates-list { display: flex; flex-direction: column; gap: 7px; }
.update-wrapper {
    padding: 11px 13px !important;
    border: 1px solid var(--rowline) !important;
    border-radius: 11px !important;
    background: var(--bg-input) !important;
    margin: 0 !important;
}
.update-service-id, .update-service-id span {
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--ink-faint) !important;
}
.update-wrapper .status-badge { background: #efece6 !important; color: #838275 !important; }
.update-wrapper .status-rate-increased { background: var(--danger-bg) !important; color: var(--danger-fg) !important; }
.update-wrapper .status-rate-decreased { background: var(--success-bg) !important; color: var(--success-fg) !important; }
.update-wrapper .status-new-service { background: var(--warning-bg) !important; color: var(--warning-fg) !important; }
.update-wrapper .status-service-disabled { background: #efece6 !important; color: #838275 !important; }
.update-wrapper .status-service-enabled { background: var(--info-bg) !important; color: var(--info-fg) !important; }
body[data-theme="dark"] .update-wrapper .status-badge,
body[data-theme="dark"] .update-wrapper .status-service-disabled { background: #24211D !important; color: #938D84 !important; }

/* --- live dot --- */
.fc-live {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--success-fg);
    margin-left: 11px;
}
.fc-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #2F9E63; position: relative; flex-shrink: 0; }
.fc-live__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #2F9E63; animation: fc-pulse 1.8s ease-in-out infinite; }

/* --- notify toast (bottom-center, charcoal) --- */
#notify-wrapper.alert {
    display: block;
    position: fixed !important;
    left: 50% !important; bottom: 26px !important;
    top: auto !important; right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2147483000 !important;
    width: auto !important; max-width: 92vw !important; min-width: 0 !important;
    margin: 0 !important;
    background: #212228 !important;
    color: #fff !important;
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    padding: 14px 22px !important;
    border: none !important;
    border-left: 4px solid #2F9E63 !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 34px rgba(33,34,40,.28) !important;
    text-align: left !important;
    text-shadow: none !important;
}
#notify-wrapper.alert-danger, #notify-wrapper.alert-error { border-left-color: #C0392B !important; }
#notify-wrapper.alert * { font-family: inherit !important; color: inherit !important; }
#notify-wrapper.alert a { color: #FFB39E !important; text-decoration: underline; }
#notify-wrapper.hidden { display: none; }

/* --- tooltips / popover --- */
.tooltip-inner {
    background: var(--charcoal);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    padding: 7px 11px;
}
.tooltip.top .tooltip-arrow { border-top-color: var(--charcoal); }
.popover { background: var(--bg-panel); border: 1px solid var(--line2); border-radius: 12px; color: var(--ink); }

/* --- dropdown menus (currencies etc.) --- */
.dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--line2);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(33,34,40,.16);
    padding: 5px;
    min-width: 170px;
}
.dropdown-menu > li > a {
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 12px;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li.active > a {
    background: var(--accent-soft);
    color: var(--accent-deep);
}
.dropdown-max-height { max-height: 320px; overflow-y: auto; }

/* --- progress --- */
.progress { background: var(--bg-hover); border-radius: 999px; height: 9px; box-shadow: none; }
.progress-bar { background: var(--accent); box-shadow: none; }

/* --- scrollbar --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-ghost); }

::selection { background: var(--accent-tint); color: var(--accent-deep); }

/* readonly charge input hidden inside app (shown via chargebox) */
#fc-app #charge-visible { font-family: 'IBM Plex Mono', monospace; }

/* ============================================================
   MOBILE APP CHROME (bottom nav + drawer)
   ============================================================ */
.fc-bottomnav { display: none; }
@media (max-width: 1100px) {
    .fc-shell { padding: 16px; }
    .fc-content { padding: 20px; }
    .filter-list { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}
@media (max-width: 880px) {
    #fc-app { height: 100vh; }
    .fc-shell { padding: 0; }
    .fc-appc { flex-direction: column; border: none; border-radius: 0; box-shadow: none; }
    .fc-sidebar { display: none; }
    .fc-burger { display: inline-flex !important; }
    .fc-desktop-only { display: none !important; }
    .fc-bottomnav { display: flex !important; }
    #fc-app .row { display: block !important; }
    #fc-app .row > [class*=col-] { display: block !important; width: 100% !important; max-width: 100% !important; float: none !important; padding: 0 !important; margin: 0 0 16px 0 !important; grid-column: auto !important; }
    #fc-app .well { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
    #order-form { width: 100% !important; }
    .fc-chargebox { width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
    #fc-app .fc-chargebox { background: none !important; border: none !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; padding: 16px 0 4px !important; margin-top: 8px !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px !important; }
    #fc-app .fc-chargebox .cv { font-size: 30px !important; }
    #fc-app .fc-chargebox .btn-primary { height: 50px !important; padding: 0 22px !important; font-size: 15px !important; width: auto !important; max-width: 58% !important; flex: 0 0 auto !important; }
    .fc-content { padding: 18px 16px 84px; }
    .fc-page { max-width: 100%; }
}
@media (max-width: 600px) {
    .fc-content { padding: 14px 12px 84px; }
    .fc-header { padding: 0 14px; }
    .filter-list { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}
.fc-bottomnav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 70;
    background: var(--bg-panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(33,34,40,.09);
    align-items: stretch;
    padding: 10px 6px calc(10px + env(safe-area-inset-bottom));
}
.fc-bottomnav a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px;
    color: var(--ink-faint);
    text-decoration: none;
    font-size: 9.5px; font-weight: 700;
}
.fc-bottomnav a.on { color: var(--accent); }
.fc-bottomnav .fab {
    margin-top: -26px;
    width: 54px; height: 54px;
    border-radius: 18px;
    background: linear-gradient(148deg, var(--accent) 12%, var(--accent-deep) 92%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 28px rgba(232,64,45,.48);
    border: 4px solid var(--bg-panel);
}
.fc-drawer-back { position: fixed; inset: 0; z-index: 95; background: rgba(33,34,40,.42); display: none; }
.fc-drawer-back.open { display: block; }
.fc-drawer {
    position: fixed;
    top: 14px; left: 14px; bottom: 14px;
    width: 290px; max-width: 82vw;
    z-index: 96;
    background: linear-gradient(180deg, var(--bg-panel), var(--bg-content));
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(33,34,40,.32);
    display: none;
    flex-direction: column;
    transform: translateX(-108%);
    transition: transform .22s ease;
}
.fc-drawer.open { display: flex; transform: translateX(0); }
.fc-drawer .dh {
    height: 60px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
}
.fc-drawer nav { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px; }
.fc-drawer .fc-nav__item { font-size: 14px; }

/* ============================================================
   STUDIO PRINT OVERRIDES — hard borders + offset "print" shadows
   (PostHog-inspired neo-brutalist pass over the whole theme)
   ============================================================ */
:root, body[data-theme="light"] { --hard: #212228; --hard-shadow: rgba(33,34,40,0.92); }
body[data-theme="dark"] { --hard: rgba(255,255,255,0.22); --hard-shadow: rgba(0,0,0,0.85); }

.well, .panel, .filter-row, .fc-banner, .fc-chargebox,
#fcg-site .well, .modal-content {
    border: 2px solid var(--hard) !important;
    border-radius: 12px !important;
    box-shadow: 5px 5px 0 var(--hard-shadow) !important;
}
.table { border: 2px solid var(--hard); box-shadow: 5px 5px 0 var(--hard-shadow); border-radius: 12px; }
/* a table inside a well: the well is the card — strip the table's own chrome
   and let wide tables scroll within the card instead of poking out of it */
.well:has(> .table), .well:has(> form .table) { overflow-x: auto; }
.well .table { border: 1.5px solid var(--line); box-shadow: none; border-radius: 10px; margin-bottom: 0; }
.btn-primary, .fc-balance .bt, .fc-banner a.cta {
    border: 2px solid var(--hard) !important;
    box-shadow: 3px 3px 0 var(--hard-shadow) !important;
    transition: transform .08s, box-shadow .08s !important;
}
.btn-primary:hover, .fc-balance .bt:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--hard-shadow) !important; }
.btn-primary:active, .fc-balance .bt:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--hard-shadow) !important; }
.btn-default { border: 2px solid var(--hard) !important; box-shadow: 2px 2px 0 var(--hard-shadow) !important; }
.fc-appc { border: 2px solid var(--hard); box-shadow: 8px 8px 0 var(--hard-shadow); }
.fc-ibtn, .fc-hbal { border: 1.5px solid var(--hard); }
.brand-category { border: 1.5px solid var(--hard); }
.brand-category.active, .brand-category.is-active { box-shadow: 3px 3px 0 var(--hard-shadow); }

/* rubber stamp */
.fc-stamp {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    border: 2.5px solid var(--accent);
    border-radius: 8px;
    padding: 7px 13px;
    transform: rotate(-4deg);
    opacity: .85;
}

/* ============================================================
   STUDIO OS — desktop metaphor landing
   ============================================================ */
#fc-os { position: fixed; inset: 0; z-index: 90; display: none; overflow: hidden;
    font-family: 'Libre Franklin', system-ui, sans-serif; color: #212228;
    background-color: #E4E1D5;
    background-image:
        radial-gradient(ellipse at center, transparent 48%, rgba(62,63,58,.14) 100%),
        radial-gradient(rgba(54,55,50,.09) 1px, transparent 1px),
        radial-gradient(rgba(54,55,50,.07) 1px, transparent 1px);
    background-size: 100% 100%, 5px 5px, 3px 3px;
    background-position: 0 0, 0 0, 2px 2px;
}
#fc-os::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .09;
    mix-blend-mode: multiply;
}
body.fc-os-on #fc-os { display: block; }
body.fc-os-on #fcg-site { display: none; }
body.fc-os-on { overflow: hidden; }

/* taskbar */
.fcos-bar {
    position: absolute; top: 0; left: 0; right: 0; height: 46px; z-index: 500;
    display: flex; align-items: center; gap: 8px;
    background: #F0EDE2;
    border-bottom: 2px solid #212228;
    padding: 0 12px;
}
.fcos-bar .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; letter-spacing: -.02em; padding-right: 10px; border-right: 2px solid rgba(33,34,40,.15); }
.fcos-tasks { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; }
.fcos-task {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 12px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600;
    background: #FBFAF3; border: 1.5px solid #212228; border-radius: 7px;
    cursor: pointer; white-space: nowrap; color: #212228;
}
.fcos-task.on { background: #F9D9CC; box-shadow: 2px 2px 0 #212228; }
.fcos-clock { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; padding: 0 4px; }
.fcos-theme {
    width: 30px; height: 30px; flex-shrink: 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FBFAF3; border: 1.5px solid #212228; border-radius: 7px;
    font-size: 14px; line-height: 1; color: #212228; cursor: pointer;
}
.fcos-theme:hover { background: #F9D9CC; }
.fcos-theme:active { transform: translate(1px,1px); }
.fcos-switch {
    height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
    background: #E8402D; color: #fff; border: 1.5px solid #212228; border-radius: 7px; cursor: pointer;
    box-shadow: 2px 2px 0 #212228;
}

/* desktop icons */
.fcos-icons { position: absolute; top: 66px; left: 18px; display: flex; flex-direction: column; gap: 22px; z-index: 100;
    max-height: calc(100vh - 84px); flex-wrap: wrap; align-content: flex-start; }
.fcos-icons.right { left: auto; right: 18px; align-items: center; }
.fcos-ico {
    width: 92px; display: flex; flex-direction: column; align-items: center; gap: 7px;
    cursor: pointer; user-select: none; text-align: center; border-radius: 10px; padding: 8px 4px;
}
.fcos-ico:hover { background: rgba(232,64,45,.08); }
.fcos-ico .gl { font-size: 34px; line-height: 0; transition: transform .15s ease; }
.fcos-ico:hover .gl { transform: translateY(-3px) rotate(-3deg); }
.fcos-ico:active .gl { transform: translateY(0) scale(.94); }
.fcos-ico .lb {
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600;
    color: #212228; background: rgba(248,246,239,.9); border-radius: 5px; padding: 2px 6px;
}

/* windows */
.fcos-win {
    position: absolute; z-index: 200;
    min-width: 300px; max-width: min(620px, 92vw); max-height: calc(100vh - 120px);
    background: #FBFAF3;
    border: 2px solid #212228; border-radius: 12px;
    box-shadow: 7px 7px 0 rgba(33,34,40,.9);
    display: none; flex-direction: column; overflow: hidden;
}
.fcos-win.open { display: flex; animation: fcosPop .18s cubic-bezier(0.34, 1.4, 0.64, 1); }
.fcos-win.focus { z-index: 300; }
@keyframes fcosPop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* per-window accent stripe on titlebar */
.fcos-tb { position: relative; }
.fcos-tb::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #E8402D; }
#win-stats    .fcos-tb::before { background: #2F9E63; }
#win-services .fcos-tb::before { background: #2F9E63; }
#win-faq      .fcos-tb::before { background: #4B84C4; }
#win-signup   .fcos-tb::before { background: #E9A13B; }
#win-readme   .fcos-tb::before { background: #E9A13B; }
.fcos-tb .tt { padding-left: 6px; }
.fcos-tb {
    height: 40px; flex-shrink: 0; display: flex; align-items: center; gap: 10px;
    background: linear-gradient(105deg, #F7F5EC, #ECE8DB);
    border-bottom: 2px solid #212228;
    padding: 0 12px; cursor: grab; user-select: none;
}
.fcos-tb:active { cursor: grabbing; }
.fcos-tb .tt { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fcos-tb .bt { display: flex; gap: 6px; }
.fcos-tb .bt button {
    width: 22px; height: 22px; border: 1.5px solid #212228; border-radius: 6px;
    background: #FBFAF3; cursor: pointer; font-size: 11px; line-height: 1; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.fcos-tb .bt .cl { background: #E8635A; color: #fff; }
.fcos-body { padding: 20px; overflow-y: auto; font-size: 13.5px; line-height: 1.65; color: #3E3F46; }
.fcos-body h2 { font-size: 20px; margin: 0 0 8px; }
.fcos-body h3 { font-size: 15px; margin: 18px 0 6px; }
.fcos-body .mono { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.fcos-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fcos-body table th { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; text-align: left; color: #C93B2A; border-bottom: 2px solid #212228; padding: 7px 8px; }
.fcos-body table td { border-bottom: 1px solid rgba(0,0,0,.09); padding: 8px; }
.fcos-body .fc-in { width: 100%; height: 46px; border: 1.5px solid #212228; background: #F0EDE0; border-radius: 9px; padding: 0 14px; font-family: inherit; font-size: 14px; margin-bottom: 12px; box-sizing: border-box; }
.fcos-body .fc-in:focus { outline: none; border-color: #E8402D; background: #FBFAF3; box-shadow: 2px 2px 0 rgba(232,64,45,.5); }
.fcos-body label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8A8C94; display: block; margin-bottom: 6px; }
.fcos-cta {
    width: 100%; height: 50px; background: #E8402D; color: #fff; font-weight: 800; font-size: 14.5px;
    border: 2px solid #212228; border-radius: 10px; cursor: pointer;
    box-shadow: 3px 3px 0 #212228; font-family: inherit;
}
.fcos-cta:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #212228; }
.fcos-stat { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px dashed rgba(0,0,0,.15); padding: 10px 2px; }
.fcos-stat .v { font-family: 'IBM Plex Mono', monospace; font-size: 30px; font-weight: 700; color: #E8402D; }
.fcos-stat .l { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #8A8C94; }
.fcos-faq details { border: 1.5px solid #212228; border-radius: 9px; padding: 10px 14px; margin-bottom: 8px; background: #F0EDE0; }
.fcos-faq summary { font-weight: 700; cursor: pointer; font-size: 13px; }
.fcos-faq p { margin: 10px 0 2px; color: #5B5C63; }

/* mascot */
#fcos-mascot { position: absolute; right: 42px; bottom: 26px; z-index: 150; cursor: pointer; user-select: none; }
#fcos-mascot svg { display: block; overflow: visible; }
#fcos-mascot .arm-wave { transform-box: view-box; transform-origin: 82px 76px; animation: fcosWave 2.6s ease-in-out infinite; }
@keyframes fcosWave { 0%,70%,100% { transform: rotate(0deg); } 78% { transform: rotate(-38deg); } 86% { transform: rotate(8deg); } 93% { transform: rotate(-30deg); } }
#fcos-mascot .eye { animation: fcosBlink 4.5s infinite; transform-origin: center; transform-box: fill-box; }
@keyframes fcosBlink { 0%, 94%, 100% { transform: scaleY(1); } 96%, 98% { transform: scaleY(.08); } }
#fcos-mascot .bot { animation: fcosBobBody 3.2s ease-in-out infinite; }
@keyframes fcosBobBody { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
#fcos-mascot .msc-bubble {
    position: absolute; right: 112px; top: 0;
    white-space: nowrap;
    padding: 8px 12px;
    background: #FBFAF3; border: 2px solid #26272E;
    border-radius: 10px; border-bottom-right-radius: 2px;
    box-shadow: 3px 3px 0 rgba(33,34,40,.5);
    font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 700; color: #212228;
    opacity: 0; transform: translateY(6px) scale(.9); transform-origin: bottom right;
    transition: opacity .18s, transform .18s cubic-bezier(.34,1.4,.64,1);
    pointer-events: none;
}
#fcos-mascot .msc-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
#fcos-mascot .msc-bubble::after {
    content: ''; position: absolute; right: -12px; bottom: 9px;
    border: 6px solid transparent; border-left-color: #26272E;
}
.fcos-confetti { position: fixed; z-index: 999; font-size: 18px; pointer-events: none; animation: fcosFall linear forwards; }
@keyframes fcosFall { to { transform: translateY(110vh) rotate(720deg); opacity: .2; } }

/* start menu */
.fcos-bar .brand { cursor: pointer; border-radius: 8px; }
.fcos-bar .brand:hover { color: #C93B2A; }
.fcos-bar .st-chev { font-size: 9px; color: #8A8C94; margin-left: 2px; }
.fcos-start {
    position: absolute; top: 52px; left: 10px; z-index: 700;
    min-width: 228px; padding: 6px;
    background: #FBFAF3; border: 2px solid #26272E; border-radius: 12px;
    box-shadow: 5px 5px 0 rgba(33,34,40,.85);
    display: none; flex-direction: column; gap: 2px;
}
.fcos-start.open { display: flex; animation: fcosPop .16s cubic-bezier(0.34, 1.4, 0.64, 1); }
.fcos-start .st-head { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: #8A8C94; padding: 7px 10px 5px; }
.fcos-start button {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    text-align: left; border: none; background: transparent; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: #212228;
    padding: 8px 10px; border-radius: 7px;
}
.fcos-start button i { font-style: normal; font-size: 9.5px; color: #B4B6BC; }
.fcos-start button:hover { background: #F9D9CC; color: #C93B2A; }
.fcos-start .st-sep { height: 1.5px; background: rgba(33,34,40,.12); margin: 4px 6px; }
.fcos-start .st-cta { background: #E8402D; color: #fff; justify-content: center; font-weight: 800; border: 1.5px solid #26272E; box-shadow: 2px 2px 0 rgba(33,34,40,.85); }
.fcos-start .st-cta:hover { background: #C22F1F; color: #fff; }

/* toast */
.fcos-toast {
    position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 16px);
    z-index: 800; max-width: 82vw;
    padding: 10px 18px;
    background: #212228; color: #F7F3E2;
    border: 2px solid #26272E; border-radius: 9px;
    box-shadow: 4px 4px 0 rgba(33,34,40,.35);
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600;
    opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s;
}
.fcos-toast.show { opacity: 1; transform: translate(-50%, 0); }
.fcos-ico.snapback { transition: left .3s cubic-bezier(.3,1.3,.5,1), top .3s cubic-bezier(.3,1.3,.5,1); }

#win-demo .fcos-tb::before { background: #4B84C4; }

/* --- demo.mov stage --- */
.fcos-demo { position: relative; background: #F2EFE5; border: 1.5px solid #26272E; border-radius: 12px; padding: 16px; overflow: hidden; }
.dm-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dm-lb { font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .1em; color: #8A8C94; width: 64px; flex-shrink: 0; }
.dm-field {
    flex: 1; min-height: 30px; display: flex; align-items: center;
    background: #FBFAF3; border: 1.5px solid rgba(33,34,40,.35); border-radius: 8px;
    padding: 3px 10px; font-size: 12px; font-weight: 600; color: #212228;
}
.dm-field.typing { border-color: #E8402D; }
.dm-charge { font-family: 'IBM Plex Mono', monospace; font-weight: 700; color: #C93B2A; }
.dm-btn {
    width: 100%; height: 38px; margin: 4px 0 8px;
    background: #E8402D; color: #fff; font-weight: 800; font-size: 13px; font-family: inherit;
    border: 2px solid #26272E; border-radius: 9px;
    box-shadow: 2.5px 2.5px 0 #26272E;
    transition: transform .12s, box-shadow .12s;
    pointer-events: none;
}
.dm-btn.press { transform: translate(2px,2px); box-shadow: 0.5px 0.5px 0 #26272E; background: #C22F1F; }
.dm-status { font-size: 10.5px; color: #2F9E63; min-height: 15px; margin-bottom: 6px; }
.dm-chart { width: 100%; height: 74px; display: block; background: #FBFAF3; border: 1.5px solid rgba(33,34,40,.25); border-radius: 8px; }
#dmLine { stroke-dasharray: 400; stroke-dashoffset: 400; }
.fcos-demo.play #dmLine { animation: fcosDraw 2.1s ease-out forwards; }
@keyframes fcosDraw { to { stroke-dashoffset: 0; } }
.dm-count { text-align: right; font-size: 11px; font-weight: 700; color: #1F6B41; margin-top: 5px; min-height: 14px; }
.dm-cursor { position: absolute; z-index: 5; left: 20px; top: 20px; transition: left .55s cubic-bezier(.5,.1,.3,1), top .55s cubic-bezier(.5,.1,.3,1); pointer-events: none; filter: drop-shadow(1.5px 1.5px 0 rgba(33,34,40,.3)); }

/* --- sticky notes --- */
.fcos-note {
    position: absolute; z-index: 96;
    width: 190px; padding: 26px 16px 14px;
    font-size: 12px; line-height: 1.55; font-weight: 500; font-style: italic; color: #4A4230;
    border-radius: 3px;
    box-shadow: 3px 5px 12px rgba(33,34,40,.18), 1.5px 1.5px 0 rgba(33,34,40,.25);
}
.fcos-note b { display: block; margin-top: 8px; font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .04em; color: #6B6350; }
.fcos-note .tape {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2deg);
    width: 74px; height: 20px;
    background: rgba(255,255,255,.5);
    border-left: 1px dashed rgba(33,34,40,.15);
    border-right: 1px dashed rgba(33,34,40,.15);
}
.fcos-note.n1 { background: #FBEFAF; right: 300px; bottom: 210px; transform: rotate(2.5deg); }
.fcos-note.n2 { background: #F9D9CC; right: 120px; bottom: 320px; transform: rotate(-3deg); }

/* --- trash file manager --- */
#win-trash .fcos-body { padding: 0; }
.fcos-ftool {
    display: flex; align-items: center; gap: 8px;
    height: 36px; flex-shrink: 0;
    padding: 0 12px;
    background: #F5F3EA;
    border-bottom: 1.5px solid rgba(33,34,40,.25);
}
.fcos-ftool .nav {
    width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid rgba(33,34,40,.25); border-radius: 6px;
    color: #8A8C94; font-size: 14px; font-weight: 700; line-height: 1;
    user-select: none;
}
.fcos-ftool .crumb {
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: #212228;
    background: #FBFAF3; border: 1.5px solid rgba(33,34,40,.25); border-radius: 6px;
    padding: 3px 10px;
}
.fcos-ftool .spacer { flex: 1; }
.fcos-fwrap { display: flex; min-height: 0; max-height: calc(100vh - 200px); }
.fcos-fside {
    width: 148px; flex-shrink: 0;
    border-right: 1.5px solid rgba(33,34,40,.18);
    background: #F5F3EA;
    padding: 12px;
}
.fcos-fside b { display: block; font-size: 12px; margin-bottom: 6px; color: #212228; }
.fcos-fside p { margin: 0; font-size: 10.5px; line-height: 1.55; color: #8A8C94; }
.fcos-fmain { flex: 1; min-width: 0; overflow-y: auto; padding: 12px 14px 18px; }
.fsec {
    font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; color: #8A8C94;
    border-bottom: 1px solid rgba(33,34,40,.14);
    padding: 8px 2px 5px; margin-bottom: 10px;
}
.fsec:not(:first-child) { margin-top: 16px; }
.fgrid { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.fcos-file {
    width: 92px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 8px 4px 9px;
    border-radius: 8px;
    cursor: pointer; user-select: none; text-align: center;
}
.fcos-file:hover { background: rgba(232,64,45,.07); }
.fcos-file:active { transform: scale(.96); }
/* archive files cannot be recovered — they don't open, just like the sign says */
.fcos-file--locked { cursor: not-allowed; }
.fcos-file--locked:hover { background: transparent; }
.fcos-file--locked:active { transform: none; }
.fcos-file .fi { line-height: 0; }
.fcos-file .fn {
    font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 600;
    color: #212228; line-height: 1.35;
    overflow-wrap: break-word;
}

/* --- crazy.mov video player --- */
#win-video { max-width: min(760px, 92vw); }
.fcos-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.fcos-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* --- document viewer (notepad.exe) --- */
.fcos-edbar {
    display: flex; align-items: center; gap: 5px;
    height: 40px; flex-shrink: 0;
    padding: 0 10px;
    background: #F5F3EA;
    border-bottom: 1.5px solid rgba(33,34,40,.25);
}
.fcos-edbar .eb {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 26px; padding: 0 6px;
    border: 1.5px solid rgba(33,34,40,.22); border-radius: 6px;
    background: #FBFAF3;
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8A8C94;
    user-select: none;
}
.fcos-edbar .eb b, .fcos-edbar .eb i, .fcos-edbar .eb u { color: #5B5C63; font-size: 11px; }
.fcos-edbar .eb.w { font-size: 10px; padding: 0 8px; }
.fcos-edbar .sep { width: 1.5px; height: 18px; background: rgba(33,34,40,.15); margin: 0 3px; }
.fcos-edbar .spacer { flex: 1; }
.fcos-edbar .eb-share {
    height: 27px; padding: 0 14px;
    background: #E8402D; color: #fff;
    border: 1.5px solid #26272E; border-radius: 7px;
    font-family: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer;
    box-shadow: 2px 2px 0 rgba(33,34,40,.85);
}
.fcos-edbar .eb-share:active { transform: translate(1.5px,1.5px); box-shadow: 0.5px 0.5px 0 rgba(33,34,40,.85); }
.fv-doc h1 {
    font-size: 26px; font-weight: 800; letter-spacing: -.02em;
    margin: 4px 0 14px; color: #212228;
}
.fv-doc h1 .fv-ext { color: #B4B6BC; font-weight: 700; }
.fv-doc p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.7; color: #3E3F46; }
.fv-doc .fv-links a {
    color: #C93B2A; font-weight: 700;
    text-decoration: underline; text-underline-offset: 3px;
}
.fv-doc .fv-links a:hover { color: #E8402D; }

/* --- right-click context menu --- */
.fcos-ctx {
    position: fixed; z-index: 900; display: none;
    min-width: 190px; padding: 5px;
    background: #FBFAF3; border: 2px solid #26272E; border-radius: 10px;
    box-shadow: 4px 4px 0 rgba(33,34,40,.85);
}
.fcos-ctx.open { display: flex; flex-direction: column; gap: 2px; }
.fcos-ctx button {
    text-align: left; border: none; background: transparent; cursor: pointer;
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600; color: #212228;
    padding: 8px 10px; border-radius: 6px;
}
.fcos-ctx button:hover { background: #F9D9CC; color: #C93B2A; }

/* --- Studio OS dark theme (taskbar ☾ button, shares fc_theme with dashboard) --- */
body[data-theme="dark"] #fc-os {
    color: #E7E7EA;
    background-color: #1E1F24;
    background-image:
        radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.42) 100%),
        radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
}
body[data-theme="dark"] #fc-os::before { opacity: .06; mix-blend-mode: screen; }
body[data-theme="dark"] #fc-os[data-wall] { background-color: #1E1F24; }
body[data-theme="dark"] .fcos-bar { background: #26272C; border-bottom-color: #000; }
body[data-theme="dark"] .fcos-bar .brand { border-right-color: rgba(255,255,255,.14); }
body[data-theme="dark"] .fcos-task { background: #2E2F35; border-color: rgba(255,255,255,.28); color: #E7E7EA; }
body[data-theme="dark"] .fcos-task.on { background: #55261E; box-shadow: 2px 2px 0 #000; }
body[data-theme="dark"] .fcos-theme { background: #2E2F35; border-color: rgba(255,255,255,.3); color: #FFD98A; }
body[data-theme="dark"] .fcos-theme:hover { background: #55261E; }
body[data-theme="dark"] .fcos-ico:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .fcos-ico .lb { background: rgba(20,21,25,.85); color: #ECEDEF; }
body[data-theme="dark"] .fcos-win { background: #26272C; border-color: rgba(255,255,255,.3); box-shadow: 7px 7px 0 rgba(0,0,0,.75); }
body[data-theme="dark"] .fcos-tb { background: linear-gradient(105deg, #2E2F35, #232428); border-bottom-color: rgba(255,255,255,.25); }
body[data-theme="dark"] .fcos-tb .tt { color: #ECEDEF; }
body[data-theme="dark"] .fcos-tb .bt button { background: #2E2F35; border-color: rgba(255,255,255,.35); color: #E7E7EA; }
body[data-theme="dark"] .fcos-tb .bt .cl { background: #E8635A; color: #fff; }
body[data-theme="dark"] .fcos-body { color: #C6C7CE; }
body[data-theme="dark"] .fcos-body h2, body[data-theme="dark"] .fcos-body h3 { color: #F2F2F4; }
body[data-theme="dark"] .fcos-body table th { color: #FF8A73; border-bottom-color: rgba(255,255,255,.3); }
body[data-theme="dark"] .fcos-body table td { border-bottom-color: rgba(255,255,255,.09); }
body[data-theme="dark"] .fcos-body .fc-in { background: #1C1D21; border-color: rgba(255,255,255,.3); color: #ECEDEF; }
body[data-theme="dark"] .fcos-body .fc-in:focus { background: #17181C; border-color: #FF6A55; box-shadow: 2px 2px 0 rgba(255,106,85,.4); }
body[data-theme="dark"] .fcos-cta { box-shadow: 3px 3px 0 #000; }
body[data-theme="dark"] .fcos-stat { border-bottom-color: rgba(255,255,255,.14); }
body[data-theme="dark"] .fcos-stat .v { color: #FF6A55; }
body[data-theme="dark"] .fcos-faq details { background: #1F2024; border-color: rgba(255,255,255,.25); }
body[data-theme="dark"] .fcos-faq p { color: #A6A8B0; }
body[data-theme="dark"] .fcos-ftool,
body[data-theme="dark"] .fcos-fside { background: #232428; }
body[data-theme="dark"] .fcos-ftool { border-bottom-color: rgba(255,255,255,.16); }
body[data-theme="dark"] .fcos-fside { border-right-color: rgba(255,255,255,.14); }
body[data-theme="dark"] .fcos-ftool .nav { border-color: rgba(255,255,255,.22); }
body[data-theme="dark"] .fcos-ftool .crumb { background: #2E2F35; border-color: rgba(255,255,255,.22); color: #ECEDEF; }
body[data-theme="dark"] .fcos-fside b { color: #ECEDEF; }
body[data-theme="dark"] .fsec { border-bottom-color: rgba(255,255,255,.12); }
body[data-theme="dark"] .fcos-file:hover { background: rgba(255,255,255,.06); }
body[data-theme="dark"] .fcos-file--locked:hover { background: transparent; }
body[data-theme="dark"] .fcos-file .fn { color: #D7D8DD; }
body[data-theme="dark"] .fcos-edbar { background: #232428; border-bottom-color: rgba(255,255,255,.16); }
body[data-theme="dark"] .fcos-edbar .eb { background: #2E2F35; border-color: rgba(255,255,255,.2); }
body[data-theme="dark"] .fcos-edbar .eb b, body[data-theme="dark"] .fcos-edbar .eb i, body[data-theme="dark"] .fcos-edbar .eb u { color: #B9BAC1; }
body[data-theme="dark"] .fcos-edbar .sep { background: rgba(255,255,255,.14); }
body[data-theme="dark"] .fv-doc h1 { color: #F2F2F4; }
body[data-theme="dark"] .fv-doc h1 .fv-ext { color: #6E7077; }
body[data-theme="dark"] .fv-doc p { color: #C6C7CE; }
body[data-theme="dark"] .fv-doc .fv-links a { color: #FF8A73; }
body[data-theme="dark"] .fv-doc .fv-links a:hover { color: #FFA894; }
body[data-theme="dark"] .fcos-ctx { background: #26272C; border-color: rgba(255,255,255,.3); box-shadow: 4px 4px 0 rgba(0,0,0,.8); }
body[data-theme="dark"] .fcos-ctx button { color: #E7E7EA; }
body[data-theme="dark"] .fcos-ctx button:hover { background: #55261E; color: #FF8A73; }
body[data-theme="dark"] .fcos-demo { background: #1F2024; border-color: rgba(255,255,255,.22); }
body[data-theme="dark"] .dm-field { background: #2A2B31; border-color: rgba(255,255,255,.2); color: #ECEDEF; }
body[data-theme="dark"] .dm-chart { background: #17181C; border-color: rgba(255,255,255,.15); }
body[data-theme="dark"] .fcos-note { box-shadow: 3px 5px 16px rgba(0,0,0,.5), 1.5px 1.5px 0 rgba(0,0,0,.4); }
body[data-theme="dark"] .fcos-bar .brand:hover { color: #FF8A73; }
body[data-theme="dark"] .fcos-start { background: #26272C; border-color: rgba(255,255,255,.3); box-shadow: 5px 5px 0 rgba(0,0,0,.8); }
body[data-theme="dark"] .fcos-start button { color: #E7E7EA; }
body[data-theme="dark"] .fcos-start button:hover { background: #55261E; color: #FF8A73; }
body[data-theme="dark"] .fcos-start button i { color: #6E7077; }
body[data-theme="dark"] .fcos-start .st-sep { background: rgba(255,255,255,.12); }
body[data-theme="dark"] .fcos-start .st-cta { background: #E8402D; color: #fff; }
body[data-theme="dark"] .fcos-start .st-cta:hover { background: #C22F1F; }
body[data-theme="dark"] .fcos-toast { background: #17181C; border-color: rgba(255,255,255,.28); box-shadow: 4px 4px 0 rgba(0,0,0,.7); }
body[data-theme="dark"] #fcos-mascot .msc-bubble { background: #26272C; border-color: rgba(255,255,255,.3); color: #E7E7EA; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
body[data-theme="dark"] #fcos-mascot .msc-bubble::after { border-left-color: rgba(255,255,255,.3); }
body[data-theme="dark"] #fcos-mascot .ant-tip { fill: #FF6A55; filter: drop-shadow(0 0 5px rgba(255,106,85,.9)); }
body[data-theme="dark"] #fcos-mascot text { filter: drop-shadow(0 0 4px rgba(255,179,158,.55)); }

/* --- wallpapers --- */
#fc-os[data-wall="sage"]  { background-color: #DDE3D4; }
#fc-os[data-wall="sky"]   { background-color: #D9E1E7; }
#fc-os[data-wall="sand"]  { background-color: #E7DFC9; }
#fc-os[data-wall="night"] { background-color: #26272C; }
#fc-os[data-wall="night"] .fcos-ico .lb { background: rgba(33,34,40,.85); color: #ECEDEF; }
#fc-os[data-wall="night"] .fcos-ico:hover { background: rgba(255,255,255,.06); }
#fc-os[data-wall="night"] .fcos-note { box-shadow: 3px 5px 16px rgba(0,0,0,.45); }

/* dragging icons */
.fcos-ico.dragging { opacity: .75; z-index: 400; position: absolute; }

@media (max-width: 1024px) {
    .fcos-note, .fcos-ctx { display: none !important; }
    .fcos-fside { display: none; }          /* trash sidebar eats width on phones */
    .fcos-fwrap { max-height: none; }
}

/* boot screen */
#fcos-boot {
    position: fixed; inset: 0; z-index: 998; background: #212228; color: #FFB39E;
    font-family: 'IBM Plex Mono', monospace; font-size: 13px;
    display: none; padding: 60px; white-space: pre-line;
}
body.fc-booting #fcos-boot { display: block; }

/* ============================================================
   PHONE OS — homescreen metaphor on small screens
   ============================================================ */
@media (max-width: 1024px) {
    /* status bar */
    .fcos-bar { height: 42px; padding: 0 12px; }
    .fcos-bar .brand { border-right: none; font-size: 13px; }
    .fcos-tasks { display: none; }
    .fcos-clock { margin-left: auto; }

    /* homescreen app grid */
    .fcos-icons {
        position: absolute; top: 62px; left: 14px; right: 14px;
        display: grid; grid-template-columns: repeat(4, 1fr);
        gap: 10px 4px;
    }
    .fcos-icons.right { top: auto; bottom: 120px; left: 14px; right: 14px; display: grid; }
    .fcos-ico { width: auto; padding: 10px 2px; }
    .fcos-ico .gl { font-size: 38px; }
    .fcos-ico .lb { font-size: 9.5px; background: transparent; }

    /* windows become full-screen apps */
    .fcos-win {
        left: 0 !important; right: 0 !important; top: 42px !important;
        width: 100% !important; min-width: 0; max-width: none;
        height: calc(100vh - 42px); max-height: none;
        border-radius: 0; border-left: none; border-right: none; border-bottom: none;
        box-shadow: none;
        box-sizing: border-box;
    }
    .fcos-tb { cursor: default; }
    .fcos-tb .mn { display: none; }
    .fcos-body { padding: 22px 18px 40px; font-size: 14px; }

    /* mascot & stamp scale down */
    #fcos-mascot { right: 16px; bottom: 14px; }
    #fcos-mascot svg { width: 84px; height: 104px; }
    #fcos-mascot .msc-bubble { display: none; }
    .fcos-stamp-wrap { display: none !important; }

    /* start menu hugs the brand */
    .fcos-start { top: 46px; left: 8px; min-width: 0; width: min(240px, calc(100vw - 16px)); }
}