/* FAZGAME Hub V5.5.3 | Generated via scripts/build-css-layers.mjs | edit source files, not this bundle */

/* saas-v540.css — cascade source */
/* FAZGAME V5.4.0 — purpose-built minimalist SaaS chrome. Safe: CSS only, no business/data changes. */
html[data-theme="light"] { --bg:#f7f8f6;--panel:#fff;--panel2:#f5f5f1;--line:#e9eae5;--text:#1b1d1a;--sub:#737972;--accent:#a8871f;--shadow:0 5px 24px #2a2b2109; }
html[data-theme="light"] body{background:#f7f8f6!important}
html[data-theme="light"] body::before{display:none!important}
.fg-saas-layout{--fg-saas-bg:#f7f8f6;--fg-saas-surface:#fff;--fg-saas-ink:#20211f;--fg-saas-muted:#7b817a;--fg-saas-line:#e8eae4;--fg-saas-hover:#f3f4ef;--fg-saas-contrast:#1a1c19;--fg-saas-accent:#edc63a;min-height:100vh;display:block!important;background:var(--fg-saas-bg);color:var(--fg-saas-ink);font-family:Inter,'Plus Jakarta Sans',sans-serif;}
html[data-theme="dark"] .fg-saas-layout{--fg-saas-bg:#121513;--fg-saas-surface:#1a1f1b;--fg-saas-ink:#f1f3ef;--fg-saas-muted:#9ea69c;--fg-saas-line:#323a34;--fg-saas-hover:#242c26;--fg-saas-contrast:#080b09;--fg-saas-accent:#edc63a;}
.fg-saas-layout .fg-simple-main{min-width:0;max-width:none!important;width:calc(100% - 94px)!important;margin-left:94px!important;flex:1!important;}
.fg-saas-layout .fg-simple-content{width:100%;max-width:1600px!important;margin:0 auto;padding:37px clamp(22px,3.1vw,54px) 85px!important;min-height:calc(100vh - 80px)}
.fg-saas-layout .fg-simple-topbar{display:flex!important;justify-content:space-between;gap:23px;position:sticky;top:0;z-index:26;height:80px!important;padding:0 clamp(20px,3vw,47px)!important;background:var(--fg-saas-surface)!important;border-bottom:1px solid var(--fg-saas-line)!important;backdrop-filter:blur(20px);box-shadow:none!important;color:var(--fg-saas-ink)}
.fg-saas-top-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:162px}.fg-saas-brand-icon{height:34px;width:34px;border-radius:10px;overflow:hidden;background:#14171a;border:1px solid #dcb53b;display:grid;place-items:center;flex-shrink:0}.fg-saas-brand-icon .fg-brand-logo{height:100%;width:100%;object-fit:contain}.fg-saas-brand-name{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1;font-weight:900;letter-spacing:-.035em;color:var(--fg-saas-ink)}.fg-saas-brand-name small{font-size:9px;letter-spacing:.02em;font-weight:500;color:var(--fg-saas-muted)}
.fg-saas-topnav{display:flex;align-items:center;justify-content:center;gap:2px;padding:4px;border-radius:30px;background:var(--fg-saas-bg);min-width:0;max-width:735px;flex:0 1 auto;overflow-x:auto;scrollbar-width:none}.fg-saas-topnav::-webkit-scrollbar{display:none}.fg-saas-tab{border:0;flex:none;white-space:nowrap;font-family:inherit;font-size:11.5px;font-weight:650;color:var(--fg-saas-muted);background:transparent;padding:12px 16px;border-radius:24px;transition:background .2s,color .2s,transform .2s;cursor:pointer}.fg-saas-tab:hover{background:var(--fg-saas-hover);color:var(--fg-saas-ink)}.fg-saas-tab.active{background:var(--fg-saas-contrast);color:#fff;box-shadow:0 4px 15px #0001}
.fg-saas-top-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}.fg-saas-top-actions .fg-primary-new{border:0!important;background:#edc63a!important;color:#242011!important;box-shadow:none!important;font-size:11px!important;font-weight:800;border-radius:25px!important;min-height:37px!important;padding:0 16px!important}.fg-saas-top-actions .owner-avatar{border-radius:100%;height:35px;width:35px;background:var(--fg-saas-hover);border:1px solid var(--fg-saas-line);color:var(--fg-saas-ink)}.fg-saas-mobile-menu{display:none;border:0;background:transparent;color:var(--fg-saas-ink);cursor:pointer;padding:8px}
/* Compact icon navigation on desktop. Classic full-module drawer remains available. */
.fg-saas-rail{position:fixed;top:122px;left:16px;z-index:35;width:61px;display:flex;flex-direction:column;align-items:center;gap:11px;padding:12px 7px;border-radius:22px;background:#191c1b;box-shadow:0 15px 45px #1319152b;border:1px solid #2b302d;color:#bfc6bf;}
.fg-saas-rail-stack{display:flex;flex-direction:column;gap:7px;padding:11px 0;border-block:1px solid #ffffff22}.fg-saas-rail-link,.fg-saas-rail-toggle,.fg-saas-rail-theme{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:transparent;border:0;color:#aab4ab;cursor:pointer;transition:background .2s,transform .23s,color .2s}.fg-saas-rail-link svg,.fg-saas-rail-toggle svg,.fg-saas-rail-theme svg{width:19px;height:19px}.fg-saas-rail-link:hover,.fg-saas-rail-theme:hover,.fg-saas-rail-toggle:hover{background:#303734;color:#fff;transform:translateY(-2px)}.fg-saas-rail-link.active{background:#f0d363;color:#252114;box-shadow:0 4px 18px #ead45a33}.fg-saas-rail-link:focus-visible,.fg-saas-rail-toggle:focus-visible,.fg-saas-rail-theme:focus-visible{outline:2px solid #f1cf44;outline-offset:3px}
.fg-saas-layout .fg-simple-sidebar{display:flex!important;position:fixed!important;left:0!important;top:0!important;bottom:0!important;z-index:105!important;width:min(320px,90vw)!important;max-width:90vw!important;flex-basis:auto!important;height:100dvh!important;overflow-y:auto!important;transform:translateX(-110%)!important;transition:transform .28s cubic-bezier(.2,.8,.2,1)!important;box-shadow:18px 0 80px #0002!important;background:var(--fg-saas-surface)!important;border-right:1px solid var(--fg-saas-line)!important;color:var(--fg-saas-ink)}
.fg-saas-layout .fg-simple-sidebar.open{transform:translateX(0)!important}.fg-saas-layout .fg-close-drawer{display:grid!important;place-items:center;margin-left:auto}
.fg-saas-layout .fg-simple-sidebar .brand{color:var(--fg-saas-ink)}.fg-saas-layout .fg-simple-sidebar .nav-btn{color:var(--fg-saas-muted)}.fg-saas-layout .fg-simple-sidebar .nav-btn.active{background:#f5e9b9;color:#55420b}.fg-saas-layout .fg-simple-sidebar .nav-btn:hover:not(.active){background:var(--fg-saas-hover);color:var(--fg-saas-ink)}
.fg-saas-layout .fg-simple-sidebar .fg-nav-group summary{color:var(--fg-saas-muted)}
.fg-saas-layout .mobile-overlay.fg-saas-overlay{display:block!important;position:fixed!important;inset:0!important;z-index:100!important;background:#090b0a89!important;backdrop-filter:blur(3px)}
.fg-saas-page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:25px}.fg-saas-page-title h1{font-size:clamp(28px,3vw,43px);line-height:1.15;letter-spacing:-.055em;font-weight:840;margin:12px 0 7px;color:var(--fg-saas-ink)}.fg-saas-page-title p{font-size:12px;line-height:1.65;color:var(--fg-saas-muted)}.fg-saas-eyebrow,.fg-saas-overline{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--fg-saas-muted)}.fg-saas-title-dot{color:#dcb522}.fg-saas-green-dot{width:7px;height:7px;border-radius:50%;background:#60af87;display:inline-block;margin-right:5px;box-shadow:0 0 0 4px #5fc28a13}.fg-saas-page-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.fg-saas-live{display:inline-flex;align-items:center;gap:6px;background:var(--fg-saas-surface);border:1px solid var(--fg-saas-line);border-radius:30px;padding:10px 14px;font-size:10px;color:var(--fg-saas-muted);white-space:nowrap}.fg-saas-live svg{width:14px;height:14px;color:#6faa7d}.fg-saas-page-actions .btn-primary{border:0!important;border-radius:25px!important;background:#202321!important;color:#fff!important;box-shadow:none!important}
.fg-saas-dashboard-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:14px}.fg-saas-metric{position:relative;min-height:171px;padding:20px 19px 21px;border-radius:18px;border:1px solid var(--fg-saas-line);background:var(--fg-saas-surface);overflow:hidden;transition:transform .24s,box-shadow .24s,border-color .24s;animation:fgSaaSEnter .48s both}.fg-saas-metric:nth-child(2){animation-delay:.06s}.fg-saas-metric:nth-child(3){animation-delay:.12s}.fg-saas-metric:nth-child(4){animation-delay:.18s}.fg-saas-metric:hover{transform:translateY(-4px);box-shadow:0 15px 32px #111b100e;border-color:#c8c8b7}.fg-saas-metric.featured{background:#1b1e1c;color:#fff;border-color:#1b1e1c}.fg-saas-metric-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--fg-saas-muted);font-weight:680}.fg-saas-metric.featured .fg-saas-metric-head{color:#d3d8d0}.fg-saas-metric-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--fg-saas-hover);color:var(--fg-saas-ink)}.fg-saas-metric-icon svg{width:17px;height:17px}.fg-saas-metric.featured .fg-saas-metric-icon{background:#ffffff19;color:#edc63a}.fg-saas-metric-value{display:block;color:var(--fg-saas-ink);font-size:clamp(21px,2.4vw,34px);font-variant-numeric:tabular-nums;letter-spacing:-.06em;font-weight:850;margin:22px 0 10px;white-space:nowrap;line-height:1.1;overflow:hidden;text-overflow:ellipsis}.fg-saas-metric.featured .fg-saas-metric-value{color:#fff}.fg-saas-metric-sub{max-width:95%;color:var(--fg-saas-muted);font-size:10px;line-height:1.5}.fg-saas-metric.featured .fg-saas-metric-sub{color:#acb5aa}.fg-saas-metric-arrow{position:absolute;right:20px;bottom:17px;color:var(--fg-saas-muted);opacity:.75}.fg-saas-metric-arrow svg{width:14px;height:14px}
.fg-saas-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr);gap:14px;margin-bottom:14px}.fg-saas-panel{min-width:0;border:1px solid var(--fg-saas-line);border-radius:19px;background:var(--fg-saas-surface);padding:26px;animation:fgSaaSEnter .55s .16s both}.fg-saas-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:22px}.fg-saas-panel-heading h2,.fg-saas-analytics-head h2{font-size:clamp(18px,1.8vw,23px);letter-spacing:-.055em;margin:7px 0 7px;color:var(--fg-saas-ink)}.fg-saas-panel-heading p,.fg-saas-analytics-head p{font-size:11px;color:var(--fg-saas-muted);line-height:1.6}.fg-saas-text-link{border:0;background:transparent;color:var(--fg-saas-ink);font-size:11px;font-weight:800;display:flex;align-items:center;gap:6px;cursor:pointer;padding:7px 0;white-space:nowrap}.fg-saas-text-link svg{width:13px;height:13px}.fg-saas-text-link:hover{text-decoration:underline}
.fg-saas-performance-layout{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:center;gap:28px;padding:7px 0}.fg-saas-dial{width:183px;height:183px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(from 220deg,#edd06c var(--score),var(--fg-saas-hover) var(--score));position:relative;isolation:isolate;box-shadow:0 7px 35px #00000009}.fg-saas-dial:before{content:'';position:absolute;inset:18px;border-radius:50%;background:var(--fg-saas-surface);z-index:-1}.fg-saas-dial-center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.fg-saas-dial-center strong{font-size:44px;line-height:1;font-weight:850;letter-spacing:-.08em;color:var(--fg-saas-ink);font-variant-numeric:tabular-nums}.fg-saas-dial-center span{font-size:9px;letter-spacing:.06em;font-weight:800;color:var(--fg-saas-muted)}.fg-saas-performance-stats{min-width:0;display:grid;gap:19px}.fg-saas-performance-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--fg-saas-muted)}.fg-saas-performance-label span{display:flex;align-items:center;gap:7px}.fg-saas-performance-label strong{color:var(--fg-saas-ink);font-size:12px;font-variant-numeric:tabular-nums}.fg-saas-stage-marker{display:inline-block;width:7px;height:7px;background:#262a27;border-radius:50%}.fg-saas-stage-1{background:#d1b45b}.fg-saas-stage-2{background:#81a4a6}.fg-saas-stage-3{background:#73b48b}.fg-saas-stage-track{height:7px;border-radius:9px;background:var(--fg-saas-hover);margin-top:8px;overflow:hidden}.fg-saas-stage-track span{display:block;height:100%;width:var(--fg-stage-width);border-radius:9px;background:linear-gradient(90deg,#c2a64d,#edca55);transform-origin:left;animation:fgSaaSBar .85s cubic-bezier(.2,.7,.2,1) both}.fg-saas-panel-note{font-size:10px;color:var(--fg-saas-muted);padding-top:16px;margin-top:20px;border-top:1px solid var(--fg-saas-line)}
.fg-saas-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fg-saas-shortcut{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid var(--fg-saas-line);border-radius:12px;background:var(--fg-saas-bg);padding:12px 11px;color:var(--fg-saas-ink);text-align:left;cursor:pointer;transition:background .18s,transform .18s}.fg-saas-shortcut:hover{background:var(--fg-saas-hover);transform:translateY(-2px)}.fg-saas-shortcut-icon{display:grid;place-items:center;width:33px;height:33px;flex:none;border-radius:10px;background:var(--fg-saas-surface)}.fg-saas-shortcut-icon svg{width:16px;height:16px}.fg-saas-shortcut>span:nth-child(2){min-width:0;flex:1}.fg-saas-shortcut strong,.fg-saas-shortcut small{display:block;white-space:normal}.fg-saas-shortcut strong{font-size:11px;font-weight:800}.fg-saas-shortcut small{font-size:9px;color:var(--fg-saas-muted);margin-top:3px}.fg-saas-shortcut>svg{width:12px;height:12px;color:var(--fg-saas-muted);flex:none}
.fg-saas-recent{margin-bottom:14px}.fg-saas-recent-list{display:grid;gap:0}.fg-saas-recent-row{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:13px 0;background:transparent;border:0;border-top:1px solid var(--fg-saas-line);cursor:pointer;color:var(--fg-saas-ink);transition:padding .2s,background .2s}.fg-saas-recent-row:hover{padding-left:9px;background:var(--fg-saas-hover)}.fg-saas-recent-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--fg-saas-bg);flex:none}.fg-saas-recent-info{min-width:0;flex:1;overflow:hidden}.fg-saas-recent-info strong,.fg-saas-recent-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fg-saas-recent-info strong{font-size:12px}.fg-saas-recent-info small{font-size:10px;color:var(--fg-saas-muted);margin-top:4px}.fg-saas-recent-row>svg{width:14px;height:14px;flex:none;color:var(--fg-saas-muted)}.fg-saas-empty{padding:30px 10px;font-size:12px;color:var(--fg-saas-muted);display:flex;align-items:center;gap:12px;flex-wrap:wrap}.fg-saas-footer-note{font-size:10px;color:var(--fg-saas-muted);padding:8px 2px 30px;line-height:1.6}
/* Make existing modules look consistent without changing their functions. */
.fg-saas-layout .fg-simple-content .card,.fg-saas-layout .fg-simple-content .fg-directory-group{border-radius:17px;background:var(--fg-saas-surface);border-color:var(--fg-saas-line);box-shadow:none}.fg-saas-layout .fg-simple-content .toolbar h1{font-size:clamp(26px,3vw,38px);letter-spacing:-.055em;color:var(--fg-saas-ink)}.fg-saas-layout .fg-simple-content .toolbar .subtitle{color:var(--fg-saas-muted)}.fg-saas-layout .fg-page-crumbs{margin-bottom:24px;color:var(--fg-saas-muted)}.fg-saas-layout .fg-page-crumbs strong{color:var(--fg-saas-ink)}
.fg-saas-layout .fg-simple-content .filter,.fg-saas-layout .fg-simple-content .panel-pad,.fg-saas-layout .fg-simple-content .fg-directory-hero{border-radius:17px}.fg-saas-layout .fg-simple-content .btn{transition:transform .17s,background .17s,border-color .17s}.fg-saas-layout .fg-simple-content .btn:hover{transform:translateY(-1px)}.fg-saas-layout .fg-simple-content .data-table tbody tr{transition:background .2s}
/* Real SQL-only analytics chart; no made-up data. */
.fg-saas-analytics-hero{border:1px solid var(--fg-saas-line);border-radius:19px;background:var(--fg-saas-surface);padding:26px;margin-bottom:18px;animation:fgSaaSEnter .5s both}.fg-saas-analytics-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.fg-saas-analytics-head>strong{font-size:clamp(22px,3vw,34px);letter-spacing:-.065em;color:var(--fg-saas-ink);font-variant-numeric:tabular-nums;white-space:nowrap}.fg-saas-chart{width:100%;margin:22px 0 4px}.fg-saas-chart svg{display:block;width:100%;height:225px;overflow:visible}.fg-saas-grid-line{stroke:var(--fg-saas-line);stroke-width:1;stroke-dasharray:4 7}.fg-saas-chart-stroke{stroke:#be9c39;stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;animation:fgSaaSDraw 1.6s .15s ease forwards}.fg-saas-chart-point{fill:#d4ae3e;stroke:var(--fg-saas-surface);stroke-width:3;vector-effect:non-scaling-stroke}.fg-saas-chart-labels{display:flex;justify-content:space-between;padding:10px 0 0;color:var(--fg-saas-muted);font-size:10px}
/* Shallow motion; compatible with midrange Android and keyboard interaction. */
@keyframes fgSaaSEnter{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes fgSaaSBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes fgSaaSDraw{to{stroke-dashoffset:0}}
.fg-saas-layout button:focus-visible{outline:2px solid #bda13b;outline-offset:3px}
@media(max-width:1430px){.fg-saas-tab{padding:11px 12px}.fg-saas-topbar{gap:13px!important}.fg-saas-performance-layout{gap:18px;grid-template-columns:160px minmax(0,1fr)}.fg-saas-dial{width:150px;height:150px}.fg-saas-dial-center strong{font-size:35px}}
@media(max-width:1200px){.fg-saas-main-grid{grid-template-columns:minmax(0,1fr)}.fg-saas-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr))}.fg-saas-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-saas-topnav{gap:0}.fg-saas-tab{font-size:10px;padding:10px 9px}.fg-saas-top-brand{min-width:130px}}
@media(max-width:850px){.fg-saas-rail{display:none}.fg-saas-layout .fg-simple-main{margin-left:0!important;width:100%!important}.fg-saas-layout .fg-simple-topbar{height:69px!important;padding:0 16px!important;gap:10px!important}.fg-saas-mobile-menu{display:grid;place-items:center}.fg-saas-topnav{display:none}.fg-saas-top-brand{min-width:0}.fg-saas-brand-name{font-size:12px}.fg-saas-layout .fg-simple-content{padding:23px 16px 113px!important}.fg-saas-layout .fg-simple-dock{display:flex!important}.fg-saas-performance-layout{grid-template-columns:180px minmax(0,1fr)}.fg-saas-dial{width:165px;height:165px}}
@media(max-width:580px){.fg-saas-layout .fg-simple-topbar{height:64px!important}.fg-saas-top-actions{gap:7px}.fg-saas-top-actions .fg-primary-new{min-height:34px!important;padding:0 12px!important;font-size:10px!important}.fg-saas-top-actions .owner-avatar{width:31px;height:31px}.fg-saas-brand-name small{font-size:8px}.fg-saas-brand-icon{width:31px;height:31px}.fg-saas-layout .fg-simple-content{padding:21px 13px 115px!important}.fg-saas-page-title{align-items:start;margin-bottom:19px;flex-direction:column;gap:12px}.fg-saas-page-title h1{margin:7px 0 6px;font-size:35px}.fg-saas-page-actions{width:100%;justify-content:space-between;gap:7px}.fg-saas-live{font-size:9px}.fg-saas-dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fg-saas-metric{min-height:148px;padding:15px 12px;border-radius:15px}.fg-saas-metric-head{font-size:10px}.fg-saas-metric-icon{width:28px;height:28px}.fg-saas-metric-value{font-size:clamp(18px,5vw,25px);margin:18px 0 11px}.fg-saas-metric-sub{font-size:9px}.fg-saas-metric-arrow{display:none}.fg-saas-panel{padding:18px 15px;border-radius:16px}.fg-saas-panel-heading{margin-bottom:17px}.fg-saas-panel-heading h2{font-size:19px}.fg-saas-panel-heading p{font-size:10px}.fg-saas-performance-layout{grid-template-columns:1fr;justify-items:center;gap:21px}.fg-saas-performance-stats{width:100%}.fg-saas-dial{width:160px;height:160px}.fg-saas-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.fg-saas-shortcut{padding:10px 8px;gap:7px}.fg-saas-shortcut-icon{width:29px;height:29px}.fg-saas-shortcut strong{font-size:10px}.fg-saas-shortcut small{font-size:9px}.fg-saas-analytics-hero{padding:18px 14px}.fg-saas-analytics-head{align-items:flex-start;flex-direction:column;gap:8px}.fg-saas-chart svg{height:170px}.fg-saas-recent-row{gap:8px}.fg-saas-recent-row .badge{font-size:9px;padding:4px 6px}}
@media(max-width:365px){.fg-saas-brand-name small{display:none}.fg-saas-metric-value{font-size:17px}.fg-saas-shortcut>svg{display:none}}
@media(prefers-reduced-motion:reduce){.fg-saas-layout *, .fg-saas-layout *::before, .fg-saas-layout *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fg-saas-chart-stroke{stroke-dashoffset:0!important}.fg-saas-stage-track span{transform:none!important}}
@media print{.fg-saas-rail,.fg-saas-layout .fg-saas-topbar,.fg-saas-layout .fg-simple-sidebar,.fg-saas-layout .fg-saas-overlay{display:none!important}.fg-saas-layout .fg-simple-main{margin:0!important;width:100%!important}}

/* V5.4.1 — unified floating navigation: compact ↔ expanded, no legacy drawer on hamburger. */
.fg-saas-layout .fg-saas-rail{--rail-compact:62px;--rail-wide:276px;top:103px;left:16px;z-index:105;width:var(--rail-compact);height:auto;max-height:calc(100dvh - 122px);padding:10px 9px;gap:0;align-items:stretch;overflow:hidden;transition:width .34s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-radius .32s,transform .32s,opacity .26s;will-change:width}
.fg-saas-layout .fg-saas-rail.is-expanded{width:var(--rail-wide);border-radius:23px;box-shadow:0 25px 75px #111b16a0}
.fg-saas-rail-header{display:flex;align-items:center;gap:12px;min-height:44px;margin-bottom:4px;white-space:nowrap}
.fg-saas-rail-heading{font-size:10px;font-weight:850;letter-spacing:.14em;color:#f7f6ea;opacity:0;transform:translateX(-7px);transition:opacity .2s,transform .3s;pointer-events:none;white-space:nowrap}
.fg-saas-rail-heading small{display:block;color:#8e9a91;font-weight:650;font-size:9px;margin-top:5px;letter-spacing:.09em}
.fg-saas-rail.is-expanded .fg-saas-rail-heading{opacity:1;transform:none;transition-delay:.10s}
.fg-saas-rail-toggle,.fg-saas-rail-link,.fg-saas-rail-theme{flex:0 0 auto}
.fg-saas-layout .fg-saas-rail-toggle{margin:0;transition:background .22s,transform .28s,color .22s}
.fg-saas-rail-toggle svg{transition:transform .34s cubic-bezier(.2,.9,.3,1)}
.fg-saas-rail.is-expanded .fg-saas-rail-toggle{background:#373e35;color:#f3ce53}
.fg-saas-rail.is-expanded .fg-saas-rail-toggle svg{transform:rotate(90deg)}
.fg-saas-rail-scroll{min-height:0;max-height:calc(100dvh - 250px);overflow:hidden;scrollbar-width:thin;scrollbar-color:#586459 transparent;overscroll-behavior:contain}
.fg-saas-rail.is-expanded .fg-saas-rail-scroll{overflow-y:auto;overflow-x:hidden}
.fg-saas-layout .fg-saas-rail-stack{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:9px 0;margin:0;min-width:0}
.fg-saas-layout .fg-saas-rail-link,.fg-saas-layout .fg-saas-rail-theme{display:flex;justify-content:flex-start;align-items:center;gap:13px;width:100%;height:42px;min-height:42px;padding:0 10px;white-space:nowrap;text-align:left;transform:none}
.fg-saas-layout .fg-saas-rail-link:hover,.fg-saas-layout .fg-saas-rail-theme:hover{transform:none;background:#323a32}
.fg-saas-layout .fg-saas-rail-link.active:hover{background:#f0d363}
.fg-saas-rail-link svg,.fg-saas-rail-theme svg{flex-shrink:0}
.fg-saas-rail-label{display:inline-block;min-width:0;opacity:0;transform:translateX(-10px);transition:transform .24s ease,opacity .19s;pointer-events:none;font-size:12px;font-weight:730;letter-spacing:0}
.fg-saas-rail.is-expanded .fg-saas-rail-label{opacity:1;transform:translateX(0);transition-delay:.12s;pointer-events:auto}
.fg-saas-rail-extra{opacity:0;visibility:hidden;max-height:0;pointer-events:none;transform:translateY(-8px);transition:opacity .22s,transform .28s,visibility .28s,max-height .32s}
.fg-saas-rail.is-expanded .fg-saas-rail-extra{opacity:1;visibility:visible;max-height:1900px;transform:translateY(0);pointer-events:auto;transition-delay:.08s}
.fg-saas-rail-section-label{color:#88948a;padding:13px 10px 8px;font-size:9px;font-weight:840;letter-spacing:.15em}
.fg-floating-group{border-radius:10px;margin:2px 0}
.fg-floating-group>summary{display:flex;align-items:center;justify-content:space-between;min-height:38px;list-style:none;padding:10px 10px;cursor:pointer;font-size:11px;font-weight:720;color:#cad3ca;border-radius:10px;transition:background .2s,color .2s}
.fg-floating-group>summary::-webkit-details-marker{display:none}
.fg-floating-group>summary:hover,.fg-floating-group[open]>summary{background:#343c34;color:#fff}
.fg-floating-group>summary span svg{width:13px;height:13px;transition:transform .26s}
.fg-floating-group[open]>summary span svg{transform:rotate(90deg)}
.fg-floating-subnav{display:flex;flex-direction:column;gap:2px;padding:3px 0 6px 6px}
.fg-floating-sub-link{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:10px;background:transparent;color:#a9b6ac;cursor:pointer;text-align:left;padding:10px;font-size:11px;font-family:inherit;transition:background .2s,transform .2s,color .2s}
.fg-floating-sub-link svg{flex:none;width:16px;height:16px}
.fg-floating-sub-link:hover{background:#353d36;color:#fff;transform:translateX(2px)}
.fg-floating-sub-link.active{color:#f0d363;background:#f0d36315}
.fg-saas-rail-foot{display:flex;flex-direction:column;gap:3px;border-top:1px solid #ffffff22;padding:9px 0 0;margin:2px 0 0}
.fg-saas-layout .fg-saas-rail-signout{opacity:0;visibility:hidden;max-height:0;height:0;min-height:0;padding-block:0;pointer-events:none;transition:opacity .2s}
.fg-saas-layout .fg-saas-rail.is-expanded .fg-saas-rail-signout{opacity:1;visibility:visible;height:42px;max-height:42px;min-height:42px;pointer-events:auto}
.fg-floating-backdrop{display:none}
.fg-saas-layout .fg-simple-main{transition:margin-left .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1)}
@media(min-width:851px){.fg-saas-layout:has(.fg-saas-rail.is-expanded) .fg-simple-main{margin-left:304px!important;width:calc(100% - 304px)!important}}
@media(max-width:850px){
 .fg-saas-layout .fg-saas-rail{display:flex!important;top:74px;left:12px;width:min(310px,calc(100vw - 24px))!important;max-width:calc(100vw - 24px);max-height:calc(100dvh - 146px);transform:translateY(-15px) scale(.96);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .32s cubic-bezier(.22,1,.36,1),visibility .32s;will-change:transform}
 .fg-saas-layout .fg-saas-rail.is-expanded{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
 .fg-saas-layout .fg-saas-rail-scroll{max-height:calc(100dvh - 275px);overflow-y:auto}
 .fg-floating-backdrop{position:fixed;inset:0;background:#08120bb8;backdrop-filter:blur(4px);display:block;z-index:100;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s,visibility .26s}
 .fg-floating-backdrop.is-visible{opacity:1;visibility:visible;pointer-events:auto}
 .fg-saas-layout .fg-simple-main{margin-left:0!important;width:100%!important}
}
@media(max-width:580px){.fg-saas-layout .fg-saas-rail{top:68px;max-height:calc(100dvh - 145px)}}
@media(prefers-reduced-motion:reduce){.fg-saas-layout .fg-saas-rail,.fg-saas-layout .fg-saas-rail *,.fg-floating-backdrop{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{.fg-saas-rail,.fg-floating-backdrop{display:none!important}}
/* Ensure the classic accordion chevron does not duplicate the floating panel's own arrow. */
.fg-saas-layout .fg-floating-group>summary::before{content:none!important;display:none!important}
.fg-saas-layout .fg-floating-group[open]{border-color:#ffffff1b;background:#ffffff08}
.fg-saas-layout .fg-floating-group>summary{justify-content:space-between;text-align:left}
.fg-saas-layout .fg-saas-rail-link:active,.fg-saas-layout .fg-saas-rail-toggle:active,.fg-floating-sub-link:active{transform:scale(.95)}
.fg-saas-layout .fg-saas-rail-link.active{animation:fgFloatingActive .27s ease-out}
@keyframes fgFloatingActive{from{filter:brightness(1.25);transform:scale(.96)}to{filter:brightness(1);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.fg-saas-layout .fg-saas-rail-link.active{animation:none!important}}


/* tavola-motion.css — cascade source */
/* FAZGAME 5.4.2 — motion language inspired by Tavola, independently implemented. */
:root{--fg-motion-ease:cubic-bezier(.22,1,.36,1);--fg-motion-quick:180ms;--fg-motion-route:370ms}
/* Native same-document route snapshots: slide and crossfade. Graceful fallback below. */
.fg-saas-layout #content{view-transition-name:fg-hub-page;contain:layout}
::view-transition-old(fg-hub-page){animation:fg-page-out 220ms cubic-bezier(.4,0,1,1) both}
::view-transition-new(fg-hub-page){animation:fg-page-in 410ms var(--fg-motion-ease) both}
@keyframes fg-page-out{to{opacity:0;transform:translate3d(-16px,0,0) scale(.986);filter:blur(3px)}}
@keyframes fg-page-in{from{opacity:0;transform:translate3d(23px,0,0) scale(.985);filter:blur(3px)}to{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes fg-card-enter{from{opacity:0;transform:translate3d(0,17px,0) scale(.984)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
/* Cards and tables follow the new page in small waves, not every data refresh. */
.fg-motion-route-enter .fg-saas-dashboard-metrics>.fg-saas-metric,
.fg-motion-route-enter .fg-saas-main-grid>.fg-saas-panel,
.fg-motion-route-enter .fg-saas-recent,
.fg-motion-route-enter .fg-saas-analytics-hero,
.fg-motion-route-enter .grid4>.kpi,
.fg-motion-route-enter .fg-directory-group,
.fg-motion-route-enter .builder-tool,
.fg-motion-route-enter .card.panel-pad,
.fg-motion-route-enter .data-table,
.fg-motion-route-enter .toolbar{
 animation:fg-card-enter 470ms var(--fg-motion-ease) both;
}
.fg-motion-route-enter .fg-saas-dashboard-metrics>:nth-child(2),
.fg-motion-route-enter .fg-saas-main-grid>:nth-child(2),
.fg-motion-route-enter .fg-directory-group:nth-child(2),
.fg-motion-route-enter .grid4>:nth-child(2){animation-delay:60ms}
.fg-motion-route-enter .fg-saas-dashboard-metrics>:nth-child(3),
.fg-motion-route-enter .fg-directory-group:nth-child(3),
.fg-motion-route-enter .grid4>:nth-child(3){animation-delay:110ms}
.fg-motion-route-enter .fg-saas-dashboard-metrics>:nth-child(4),
.fg-motion-route-enter .grid4>:nth-child(4),
.fg-motion-route-enter .fg-directory-group:nth-child(4){animation-delay:150ms}
.fg-motion-route-enter .fg-saas-recent{animation-delay:180ms}
/* Responsive, premium microinteractions with safe visual feedback only. */
.fg-saas-layout .fg-saas-tab,.fg-saas-layout .fg-saas-rail-link,
.fg-saas-layout .fg-saas-rail-toggle,.fg-saas-layout .fg-floating-sub-link,
.fg-saas-layout button.btn,.fg-saas-layout .fg-saas-shortcut,
.fg-saas-layout .fg-saas-recent-row,.fg-saas-layout .fg-module-link,
.fg-saas-layout .fg-saas-text-link{
 position:relative;isolation:isolate;
 transition:transform var(--fg-motion-quick) var(--fg-motion-ease),background-color var(--fg-motion-quick),box-shadow 240ms,color var(--fg-motion-quick),border-color var(--fg-motion-quick);
}
.fg-saas-layout .fg-saas-tab:active,.fg-saas-layout .fg-saas-rail-link:active,
.fg-saas-layout .fg-saas-shortcut:active,.fg-saas-layout .fg-saas-recent-row:active,
.fg-saas-layout button.btn:active{transform:scale(.965)}
.fg-saas-layout .fg-saas-metric,.fg-saas-layout .fg-saas-panel,
.fg-saas-layout .fg-saas-analytics-hero,.fg-saas-layout .card.kpi{
 transition:transform 300ms var(--fg-motion-ease),box-shadow 300ms,border-color 240ms;
}
@media(hover:hover) and (pointer:fine){
 .fg-saas-layout .fg-saas-metric:hover,.fg-saas-layout .fg-saas-panel:hover,
 .fg-saas-layout .fg-saas-analytics-hero:hover{transform:translate3d(0,-3px,0);box-shadow:0 15px 35px #19252113}
 .fg-saas-layout .fg-saas-shortcut:hover,.fg-saas-layout .fg-saas-recent-row:hover{transform:translate3d(2px,-2px,0)}
}
/* Lightweight soft pulse follows tap. Does not block pointer events. */
.fg-motion-ripple{position:absolute!important;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;animation:fg-tap-sheen 550ms ease-out both;background:radial-gradient(circle 55px at var(--fg-ripple-x,50%) var(--fg-ripple-y,50%),#e8c45c66 0%,#e8c45c22 45%,transparent 100%)}
@keyframes fg-tap-sheen{0%{opacity:.05;transform:scale(.88)}35%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
/* Slide-out expanded rail actions individually instead of snapping into place. */
@keyframes fg-rail-item{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:translateX(0)}}
.fg-saas-rail.is-expanded .fg-floating-group{animation:fg-rail-item 280ms var(--fg-motion-ease) both}
.fg-saas-rail.is-expanded .fg-floating-group:nth-child(2){animation-delay:40ms}
.fg-saas-rail.is-expanded .fg-floating-group:nth-child(3){animation-delay:80ms}
.fg-saas-rail.is-expanded .fg-floating-group:nth-child(4){animation-delay:120ms}
/* Table / list transitions only when navigation switches, not on every API refresh. */
.fg-motion-route-enter .data-table tbody tr{animation:fg-card-enter 330ms var(--fg-motion-ease) both}
.fg-motion-route-enter .data-table tbody tr:nth-child(2){animation-delay:40ms}
.fg-motion-route-enter .data-table tbody tr:nth-child(3){animation-delay:70ms}
.fg-motion-route-enter .data-table tbody tr:nth-child(4){animation-delay:100ms}
.fg-motion-route-enter .data-table tbody tr:nth-child(n+5){animation-delay:120ms}
/* Modal content is visible immediately; subtle opening, avoid reflow/scroll trap. */
.fg-saas-layout .modal-bg>.modal,.fg-saas-layout .record-scrim>.record-dialog{animation:fg-card-enter 275ms var(--fg-motion-ease) both}
@media(max-width:850px){
 ::view-transition-old(fg-hub-page){animation-duration:160ms}
 ::view-transition-new(fg-hub-page){animation-duration:290ms}
 .fg-motion-route-enter .data-table tbody tr:nth-child(n+5){animation-delay:60ms}
}
@media(prefers-reduced-motion:reduce){
 .fg-saas-layout #content{view-transition-name:none}
 ::view-transition-old(fg-hub-page),::view-transition-new(fg-hub-page){animation:none!important}
 .fg-saas-layout .fg-motion-route-enter *,
 .fg-saas-layout .fg-motion-route-enter *::before,.fg-saas-layout .fg-motion-route-enter *::after,
 .fg-saas-layout .fg-floating-group,.fg-saas-layout .fg-motion-ripple{animation:none!important;transition:none!important}
}
@media print{.fg-saas-layout #content{view-transition-name:none!important}.fg-motion-ripple{display:none!important}}

/* Synchronous navigation wrapper: slide page content as a single motion layer. */
.fg-saas-layout .fg-motion-route-enter{animation:fg-page-in 390ms var(--fg-motion-ease) both}
@media(max-width:850px){.fg-saas-layout .fg-motion-route-enter{animation-duration:300ms}}
@media(prefers-reduced-motion:reduce){.fg-saas-layout .fg-motion-route-enter{animation:none!important}}


/* mobile-pill-v543.css — cascade source */
/* FAZGAME V5.4.3 — Stable mobile floating pill, replacing the full-width fixed dock.
   Critical: rendered mobile dock is a SIBLING of .fg-saas-layout, not a child.
   No backdrop-filter or entrance animation on this fixed bar: avoids Chromium/PWA
   compositor flicker during frequent full-page DOM re-renders and scroll.
*/
@media (max-width:850px){
  .mobile-dock.fg-simple-dock.fg-mobile-pill{
    position:fixed!important;
    display:flex!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 9px))!important;
    width:min(540px,calc(100% - 26px))!important;
    max-width:calc(100% - 26px)!important;
    height:auto!important;
    min-height:69px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:7px 7px!important;
    gap:3px!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    border:1px solid #343a34!important;
    border-radius:24px!important;
    background:#1d2220!important;
    box-shadow:0 12px 35px rgba(9,16,12,.27),0 3px 9px rgba(9,16,12,.16)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    transform:translate3d(-50%,0,0)!important;
    opacity:1!important;
    visibility:visible!important;
    isolation:isolate;
    z-index:48!important;
    animation:none!important;
    transition:none!important;
    contain:layout style;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-dock.fg-mobile-pill button{
    position:relative;
    flex:1 1 0!important;
    min-width:0!important;
    min-height:54px!important;
    max-width:none!important;
    padding:7px 0 5px!important;
    margin:0!important;
    border:1px solid transparent!important;
    border-radius:17px!important;
    color:#bbc3ba!important;
    background:transparent!important;
    box-shadow:none!important;
    font-family:inherit;
    font-size:10px!important;
    font-weight:750!important;
    line-height:1.1!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    transition:background-color 160ms ease,color 160ms ease,transform 140ms ease!important;
  }
  .mobile-dock.fg-mobile-pill button svg{
    width:20px!important;
    height:20px!important;
    flex:0 0 20px;
    stroke-width:1.85;
    transition:transform 175ms cubic-bezier(.22,1,.36,1)!important;
  }
  .mobile-dock.fg-mobile-pill button span{
    display:block!important;
    font-size:9px!important;
    font-weight:700!important;
    max-width:100%;
    color:inherit!important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-dock.fg-mobile-pill button.active{
    color:#251f11!important;
    background:#f0d164!important;
    border-color:#e6c252!important;
    box-shadow:0 2px 8px #00000016!important;
  }
  .mobile-dock.fg-mobile-pill button.active svg{transform:scale(1.09)}
  /* Keep the existing light SaaS theme; switch to dark only in dark mode. */
  html[data-theme="light"] .mobile-dock.fg-mobile-pill{
    background:#fff!important;
    border-color:#e2e4df!important;
    box-shadow:0 13px 33px rgba(30,38,26,.12),0 3px 7px rgba(30,38,26,.06)!important;
  }
  html[data-theme="light"] .mobile-dock.fg-mobile-pill button:not(.active){color:#677068!important}
  html[data-theme="light"] .mobile-dock.fg-mobile-pill button.active{color:#4f3d16!important}
  .mobile-dock.fg-mobile-pill button:active{transform:scale(.93)!important}
  .mobile-dock.fg-mobile-pill button:focus-visible{outline:2px solid #f5d86e!important;outline-offset:2px}
  /* The page must scroll above the pill and Android/iOS home gesture area. */
  .fg-saas-layout .fg-simple-content{
    padding-bottom:calc(145px + env(safe-area-inset-bottom,0px))!important;
  }
}
@media (max-width:370px){
  .mobile-dock.fg-mobile-pill{width:calc(100% - 18px)!important;max-width:calc(100% - 18px)!important;padding:6px 4px!important;gap:1px!important;border-radius:21px!important}
  .mobile-dock.fg-mobile-pill button{min-height:51px!important;padding:6px 0 4px!important;gap:4px!important}
  .mobile-dock.fg-mobile-pill button svg{width:18px!important;height:18px!important;flex-basis:18px}
  .mobile-dock.fg-mobile-pill button span{font-size:8px!important}
}
@media (prefers-reduced-motion:reduce){
  .mobile-dock.fg-mobile-pill,.mobile-dock.fg-mobile-pill *,
  .mobile-dock.fg-mobile-pill *::before,.mobile-dock.fg-mobile-pill *::after{
    animation:none!important;transition:none!important;
  }
}
@media print{.mobile-dock.fg-mobile-pill{display:none!important}}


/* inventory-v544.css — cascade source */
/* FAZGAME Hub V5.4.4 – compact variant-first inventory explorer */
.fg-inv-top-metrics{margin-bottom:22px}.fg-inv-explorer,.fg-inv-history-card{padding:clamp(16px,2.6vw,28px);margin-bottom:22px;overflow:hidden}.fg-inv-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px;flex-wrap:wrap}.fg-inv-section-head h2{margin:3px 0 8px;font-size:clamp(21px,2.3vw,29px);letter-spacing:-.045em}.fg-inv-section-head .subtitle{margin:0;max-width:580px}.fg-inv-filter-grid{display:grid;grid-template-columns:minmax(210px,2fr) repeat(3,minmax(135px,1fr));gap:11px;margin:0 0 19px}.fg-inv-filter-grid label{display:flex;flex-direction:column;gap:7px;min-width:0;color:var(--sub);font-weight:650;font-size:11px}.fg-inv-filter-grid input,.fg-inv-filter-grid select{width:100%;min-width:0;height:46px;border:1px solid var(--line);border-radius:12px;background:var(--panel,#fff);color:var(--text);padding:0 14px;font:inherit;font-size:12px;outline:none}.fg-inv-filter-grid input:focus,.fg-inv-filter-grid select:focus{border-color:#c1a04b;box-shadow:0 0 0 3px #c1a04b22}.fg-inv-list-status{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:11px;font-size:11px;color:var(--sub);flex-wrap:wrap}.fg-inv-clear{border:none;background:transparent;color:var(--accent);font-weight:750;cursor:pointer;padding:8px}.fg-inv-list{border:1px solid var(--line);border-radius:16px;overflow:hidden}.fg-inv-item{display:flex;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);min-width:0;animation:fg-inv-rise .22s both}.fg-inv-item:last-child{border-bottom:0}.fg-inv-item-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;background:#eac75014;border:1px solid #c9a94b35;border-radius:12px;color:#b39335}.fg-inv-item-main{min-width:0;flex:1}.fg-inv-item-main>strong{font-size:12px;font-weight:780;line-height:1.5;display:block;overflow-wrap:anywhere}.fg-inv-item-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:10px;color:var(--sub)}.fg-inv-item-meta>span:first-child,.fg-inv-variant{border:1px solid var(--line);padding:3px 7px;border-radius:7px;white-space:nowrap}.fg-inv-variant{font-weight:800;color:#88670e;background:#dcb73f13}.fg-inv-variant.used{color:#6f7d99;background:#8190ad15}.fg-inv-item-stats{display:flex;flex-direction:column;align-items:center;min-width:66px;gap:3px}.fg-inv-item-stats strong{font-size:21px;font-weight:850;font-variant-numeric:tabular-nums}.fg-inv-item-stats small{color:var(--sub);font-size:10px;white-space:nowrap}.fg-inv-positive{color:var(--text)}.fg-inv-zero{color:var(--sub)}.fg-inv-item-action button{white-space:nowrap}.fg-inv-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding-top:17px}.fg-inv-bottom [hidden]{display:none!important}.fg-inv-no-results{padding:34px 20px;text-align:center;color:var(--sub);font-size:13px}.fg-inv-form-card{margin:0 0 22px;scroll-margin-top:85px}.fg-inv-footnote{font-size:11px;color:var(--sub);margin:20px 0 0;line-height:1.7}.fg-inv-history-count{border:1px solid var(--line);border-radius:99px;padding:7px 11px;color:var(--sub);font-size:11px}.fg-inv-history-list{border:1px solid var(--line);border-radius:15px;overflow:hidden}.fg-inv-history-item{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line);font-size:12px}.fg-inv-history-item:last-child{border-bottom:0}.fg-inv-history-mark{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:11px;font-size:17px;font-weight:850}.fg-inv-history-mark.in{background:#219c6817;color:#219c68}.fg-inv-history-mark.out{background:#de61591b;color:#e16a67}.fg-inv-history-detail{min-width:0;flex:1}.fg-inv-history-detail strong{display:block;overflow-wrap:anywhere}.fg-inv-history-detail small{display:block;margin-top:4px;font-size:10px;color:var(--sub);overflow-wrap:anywhere}.fg-inv-history-balance{color:var(--sub);font-size:10px;white-space:nowrap}.fg-inv-item:hover{background:var(--hover,#bbbbbb0c)}@keyframes fg-inv-rise{from{opacity:.7;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:960px){.fg-inv-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fg-inv-search-field{grid-column:1/-1}}
@media(max-width:580px){.fg-inv-top-metrics{gap:10px}.fg-inv-explorer,.fg-inv-history-card{padding:18px 14px;border-radius:18px}.fg-inv-section-head{gap:12px}.fg-inv-section-head .btn{width:100%}.fg-inv-filter-grid{gap:9px}.fg-inv-filter-grid label{font-size:10px}.fg-inv-filter-grid input,.fg-inv-filter-grid select{font-size:12px;padding:0 10px}.fg-inv-item{gap:9px;padding:12px 10px;flex-wrap:wrap}.fg-inv-item-icon{flex-basis:34px;height:34px;border-radius:10px}.fg-inv-item-main{flex:1 1 calc(100% - 64px)}.fg-inv-item-main>strong{font-size:11px}.fg-inv-item-stats{flex:1;align-items:flex-start;padding-left:43px}.fg-inv-item-stats strong{font-size:18px}.fg-inv-item-action{margin-left:auto}.fg-inv-item-action .btn{padding:7px 12px}.fg-inv-history-item{gap:9px}.fg-inv-history-balance{display:none}.fg-inv-list-status{font-size:10px}}
@media(prefers-reduced-motion:reduce){.fg-inv-item{animation:none!important}.fg-inv-item,.fg-inv-filter-grid *{transition:none!important}}


/* atelier-v550.css — cascade source */
/* FAZGAME Hub V5.5.0 — Signature Atelier UI/UX & Fluid Motion System
 * Pure presentation & animation layer. Preserves 100% of SQL, API, and DOM hooks.
 */
:root {
  --fg-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --fg-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --fg-gold-bright: #f4d24e;
  --fg-gold-core: #e5be32;
  --fg-gold-deep: #b89214;
  --fg-gold-glow: rgba(237, 198, 58, 0.24);
  --fg-emerald-live: #34b37c;
}

/* 1. Ambient Architectural Canvas & Surface Tokens */
html[data-theme="light"] .fg-saas-layout {
  --fg-saas-bg: #f5f6f2;
  --fg-saas-surface: #ffffff;
  --fg-saas-ink: #161917;
  --fg-saas-muted: #666e67;
  --fg-saas-line: rgba(24, 30, 26, 0.085);
  --fg-saas-hover: #eff1ec;
  --fg-saas-contrast: #161917;
  --fg-saas-accent: #e8c236;
  --fg-card-shadow: 0 1px 2px rgba(16, 22, 18, 0.03), 0 10px 28px -6px rgba(16, 22, 18, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --fg-card-shadow-hover: 0 18px 42px -10px rgba(18, 25, 20, 0.11), 0 4px 12px rgba(18, 25, 20, 0.04), inset 0 1px 0 #ffffff;
  --fg-spotlight-color: rgba(232, 194, 54, 0.14);
  background-color: var(--fg-saas-bg);
  background-image:
    radial-gradient(960px 440px at 10% -6%, rgba(236, 198, 60, 0.12), transparent 65%),
    radial-gradient(840px 380px at 92% -4%, rgba(76, 166, 122, 0.08), transparent 60%);
  background-attachment: fixed;
}

html[data-theme="dark"] .fg-saas-layout {
  --fg-saas-bg: #0c0f0d;
  --fg-saas-surface: #151a17;
  --fg-saas-ink: #f3f6f2;
  --fg-saas-muted: #9aa49b;
  --fg-saas-line: rgba(255, 255, 255, 0.085);
  --fg-saas-hover: #1e2520;
  --fg-saas-contrast: #f0d160;
  --fg-saas-accent: #edc63a;
  --fg-card-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.065);
  --fg-card-shadow-hover: 0 22px 48px -10px rgba(0, 0, 0, 0.68), 0 0 24px rgba(237, 198, 58, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --fg-spotlight-color: rgba(237, 198, 58, 0.12);
  background-color: var(--fg-saas-bg);
  background-image:
    radial-gradient(960px 460px at 14% -8%, rgba(237, 198, 58, 0.11), transparent 66%),
    radial-gradient(820px 420px at 88% -4%, rgba(52, 148, 102, 0.075), transparent 62%);
  background-attachment: fixed;
}

/* 2. Glassmorphic Topbar & Navigation Pill Refinement */
.fg-saas-layout .fg-simple-topbar {
  background: color-mix(in srgb, var(--fg-saas-surface) 85%, transparent) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  border-bottom: 1px solid var(--fg-saas-line) !important;
  box-shadow: 0 4px 24px -6px rgba(0, 0, 0, 0.04) !important;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fg-saas-brand-icon {
  box-shadow: 0 4px 14px rgba(220, 181, 59, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.32s var(--fg-spring), box-shadow 0.32s var(--fg-spring);
}
.fg-saas-top-brand:hover .fg-saas-brand-icon {
  transform: scale(1.06) rotate(-2deg);
  box-shadow: 0 6px 20px rgba(220, 181, 59, 0.4);
}

.fg-saas-topnav {
  padding: 5px;
  border: 1px solid var(--fg-saas-line);
  background: color-mix(in srgb, var(--fg-saas-bg) 90%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.fg-saas-tab {
  position: relative;
  font-weight: 680;
  letter-spacing: -0.01em;
  transition: color 0.22s var(--fg-spring), background-color 0.22s var(--fg-spring), transform 0.2s var(--fg-spring), box-shadow 0.22s var(--fg-spring);
}

.fg-saas-tab.active {
  background: #181b19;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(20, 24, 21, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .fg-saas-tab.active {
  background: linear-gradient(135deg, #f3d252 0%, #dfb527 100%);
  color: #19160a;
  font-weight: 780;
  box-shadow: 0 4px 16px rgba(237, 198, 58, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Primary Action Buttons & Liquid Gold Sheen */
.fg-saas-top-actions .fg-primary-new,
.fg-saas-layout .btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f3d14e 0%, #dfb422 100%) !important;
  color: #1c180b !important;
  font-weight: 800 !important;
  border: 1px solid rgba(184, 146, 20, 0.35) !important;
  box-shadow: 0 4px 15px rgba(223, 180, 34, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
  transition: transform 0.24s var(--fg-spring), box-shadow 0.24s var(--fg-spring), filter 0.24s ease !important;
}
.fg-saas-page-actions .btn-primary {
  background: linear-gradient(135deg, #222724 0%, #141816 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 6px 18px rgba(18, 23, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
html[data-theme="dark"] .fg-saas-page-actions .btn-primary {
  background: linear-gradient(135deg, #f3d14e 0%, #dfb422 100%) !important;
  color: #1c180b !important;
  border-color: rgba(255, 230, 128, 0.4) !important;
  box-shadow: 0 6px 20px rgba(237, 198, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.fg-saas-top-actions .fg-primary-new:hover,
.fg-saas-layout .btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 8px 24px rgba(223, 180, 34, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* 3. Floating Icon Rail Polish */
.fg-saas-layout .fg-saas-rail {
  background: linear-gradient(180deg, #1b201d 0%, #121614 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 20px 50px rgba(10, 15, 12, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.fg-saas-rail-link.active {
  background: linear-gradient(135deg, #f4d459 0%, #e0b728 100%);
  color: #1f1b0d;
  box-shadow: 0 6px 20px rgba(240, 211, 99, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* 4. Live Sync Status Pulse */
@keyframes fg-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 179, 124, 0.45), 0 0 0 4px rgba(52, 179, 124, 0.14); }
  50% { box-shadow: 0 0 0 6px rgba(52, 179, 124, 0), 0 0 0 8px rgba(52, 179, 124, 0.04); }
}
.fg-saas-green-dot {
  background: var(--fg-emerald-live);
  animation: fg-live-pulse 2.6s ease-in-out infinite;
}
.fg-saas-live {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  font-weight: 650;
}

/* 5. Interactive Spotlight Cards & KPI Elevation */
.fg-saas-metric,
.fg-saas-panel,
.fg-saas-analytics-hero,
.fg-saas-layout .fg-simple-content .card,
.fg-saas-layout .fg-simple-content .fg-directory-group {
  position: relative;
  box-shadow: var(--fg-card-shadow);
  border-color: var(--fg-saas-line);
  transition: transform 0.34s var(--fg-spring), box-shadow 0.34s var(--fg-spring), border-color 0.28s ease;
}

.fg-saas-metric:not(.featured) {
  background-image: radial-gradient(180px circle at 100% 0%, rgba(237, 198, 58, 0.065), transparent 70%);
}

/* Pointer-tracked radial spotlight overlay */
.fg-saas-metric::after,
.fg-saas-panel::after,
.fg-saas-analytics-hero::after,
.fg-directory-group::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--fg-spot-x, 50%) var(--fg-spot-y, -200px), var(--fg-spotlight-color), transparent 68%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
}
@media (hover: hover) and (pointer: fine) {
  .fg-saas-metric:hover::after,
  .fg-saas-panel:hover::after,
  .fg-saas-analytics-hero:hover::after,
  .fg-directory-group:hover::after {
    opacity: 1;
  }
  .fg-saas-metric:hover,
  .fg-saas-panel:hover,
  .fg-saas-analytics-hero:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: var(--fg-card-shadow-hover);
    border-color: rgba(218, 179, 48, 0.42);
  }
}

.fg-saas-metric-head,
.fg-saas-metric-value,
.fg-saas-metric-sub,
.fg-saas-panel > *,
.fg-saas-analytics-hero > * {
  position: relative;
  z-index: 1;
}

/* Featured Metric Card ("Job Sales") Luxury Weave */
.fg-saas-metric.featured {
  background:
    radial-gradient(280px circle at 92% 12%, rgba(237, 198, 58, 0.22), transparent 68%),
    linear-gradient(140deg, #1d2320 0%, #131715 62%, #241f11 100%);
  border-color: rgba(237, 198, 58, 0.34);
  box-shadow: 0 16px 38px -8px rgba(15, 20, 17, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fg-saas-metric.featured:hover {
  border-color: rgba(244, 210, 78, 0.65);
  box-shadow: 0 22px 46px -8px rgba(15, 20, 17, 0.44), 0 0 25px rgba(237, 198, 58, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.fg-saas-metric-icon {
  transition: transform 0.32s var(--fg-spring), background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
}
.fg-saas-metric:hover .fg-saas-metric-icon {
  transform: scale(1.08) rotate(-3deg);
  background: rgba(237, 198, 58, 0.18);
  color: #b89014;
}
html[data-theme="dark"] .fg-saas-metric:hover .fg-saas-metric-icon,
.fg-saas-metric.featured:hover .fg-saas-metric-icon {
  background: rgba(237, 198, 58, 0.26);
  color: #f5d761;
  box-shadow: 0 0 16px rgba(237, 198, 58, 0.24);
}

.fg-saas-metric-arrow {
  position: absolute !important;
  right: 18px !important;
  bottom: 16px !important;
  z-index: 2;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg-saas-hover) 70%, transparent);
  transition: transform 0.3s var(--fg-spring), background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.fg-saas-metric.featured .fg-saas-metric-arrow {
  background: rgba(255, 255, 255, 0.08);
  color: #d8dfd6;
}
.fg-saas-metric:hover .fg-saas-metric-arrow {
  transform: translate3d(3px, -3px, 0);
  opacity: 1;
  background: rgba(237, 198, 58, 0.2);
  color: #b89014;
}
html[data-theme="dark"] .fg-saas-metric:hover .fg-saas-metric-arrow,
.fg-saas-metric.featured:hover .fg-saas-metric-arrow {
  background: rgba(237, 198, 58, 0.25);
  color: #f4d24e;
}

/* 6. Workshop Pulse Conic Dial & Shimmering Stage Bars */
.fg-saas-dial {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08), inset 0 1px 3px rgba(255, 255, 255, 0.4);
  transition: transform 0.4s var(--fg-spring);
}
.fg-saas-performance:hover .fg-saas-dial {
  transform: scale(1.025);
}
.fg-saas-dial::before {
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.05);
}

.fg-saas-stage-track {
  height: 8px;
  border-radius: 999px;
  background: var(--fg-saas-hover);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
}
.fg-saas-stage-track span {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(90deg, #c7a43c 0%, #f0cd52 55%, #e2b830 100%);
  box-shadow: 0 0 12px rgba(232, 194, 54, 0.32);
}
.fg-saas-performance-item:nth-child(2) .fg-saas-stage-track span {
  background: linear-gradient(90deg, #c98a2c 0%, #f2b44b 100%);
}
.fg-saas-performance-item:nth-child(3) .fg-saas-stage-track span {
  background: linear-gradient(90deg, #4b8f96 0%, #74c2c9 100%);
  box-shadow: 0 0 12px rgba(116, 194, 201, 0.28);
}
.fg-saas-performance-item:nth-child(4) .fg-saas-stage-track span {
  background: linear-gradient(90deg, #369668 0%, #5cd69a 100%);
  box-shadow: 0 0 12px rgba(92, 214, 154, 0.28);
}
@keyframes fg-stage-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(220%); }
}
.fg-saas-stage-track span::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: fg-stage-shimmer 2.8s var(--fg-out-expo) infinite;
}

/* 7. Quick Shortcuts & Recent Jobs Hover Choreography */
.fg-saas-shortcut {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  transition: transform 0.26s var(--fg-spring), background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.26s var(--fg-spring);
}
.fg-saas-shortcut-icon {
  transition: transform 0.28s var(--fg-spring), background-color 0.22s ease, color 0.22s ease;
}
.fg-saas-shortcut > svg {
  transition: transform 0.26s var(--fg-spring), color 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fg-saas-shortcut:hover {
    transform: translate3d(0, -3px, 0);
    border-color: rgba(218, 179, 48, 0.45);
    box-shadow: 0 8px 20px -4px rgba(18, 24, 20, 0.08);
  }
  .fg-saas-shortcut:hover .fg-saas-shortcut-icon {
    background: linear-gradient(135deg, #f4d355, #e0b624);
    color: #1c180b;
    transform: scale(1.07);
  }
  .fg-saas-shortcut:hover > svg {
    transform: translateX(3px);
    color: var(--fg-saas-ink);
  }
}

.fg-saas-recent-row {
  position: relative;
  border-radius: 12px;
  padding: 13px 10px;
  transition: transform 0.24s var(--fg-spring), background-color 0.22s ease, padding-left 0.24s var(--fg-spring);
}
.fg-saas-recent-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, #f3d14e, #d4a91e);
  transform: scaleY(0);
  transition: transform 0.24s var(--fg-spring);
}
.fg-saas-recent-row:hover {
  padding-left: 14px;
  background: var(--fg-saas-hover);
}
.fg-saas-recent-row:hover::before {
  transform: scaleY(1);
}

/* 8. Inventory Variant Explorer & Movement History Polish */
.fg-inv-item {
  position: relative;
  transition: background-color 0.22s ease, transform 0.24s var(--fg-spring), box-shadow 0.24s ease;
  animation: fg-inv-rise 0.34s var(--fg-spring) both;
  animation-delay: calc(var(--fg-idx, 0) * 28ms);
}
.fg-inv-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 3.5px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #f3d14e, #cfa319);
  transform: scaleY(0);
  transition: transform 0.24s var(--fg-spring);
}
@media (hover: hover) and (pointer: fine) {
  .fg-inv-item:hover {
    background: var(--fg-saas-hover);
    transform: translateX(3px);
  }
  .fg-inv-item:hover::before {
    transform: scaleY(1);
  }
}
.fg-inv-item-icon {
  transition: transform 0.28s var(--fg-spring), background-color 0.24s ease, border-color 0.24s ease;
}
.fg-inv-item:hover .fg-inv-item-icon {
  transform: scale(1.07);
  background: rgba(234, 199, 80, 0.22);
  border-color: rgba(201, 169, 75, 0.55);
}
.fg-inv-item-stats {
  background: color-mix(in srgb, var(--fg-saas-hover) 75%, transparent);
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--fg-saas-line);
}
.fg-inv-item-action .btn {
  border-radius: 10px;
  font-weight: 760;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--fg-spring);
}
.fg-inv-item:hover .fg-inv-item-action .btn {
  border-color: rgba(212, 171, 34, 0.55);
  background: rgba(237, 198, 58, 0.16);
}

@keyframes fg-form-focus-pulse {
  0% { box-shadow: 0 0 0 0 rgba(237, 198, 58, 0.55), var(--fg-card-shadow); border-color: #e5be32; }
  50% { box-shadow: 0 0 0 8px rgba(237, 198, 58, 0.14), 0 18px 42px -8px rgba(237, 198, 58, 0.22); border-color: #f3d14e; }
  100% { box-shadow: 0 0 0 0 rgba(237, 198, 58, 0), var(--fg-card-shadow); }
}
.fg-inv-form-card.fg-form-highlight-pulse {
  animation: fg-form-focus-pulse 1.1s var(--fg-spring);
}

.fg-inv-history-item {
  transition: background-color 0.2s ease, transform 0.22s var(--fg-spring);
  animation: fg-inv-rise 0.32s var(--fg-spring) both;
  animation-delay: calc(var(--fg-idx, 0) * 26ms);
}
.fg-inv-history-item:hover {
  background: var(--fg-saas-hover);
}

/* 9. Data Tables, Semantic Badges, Analytics Hero & Inputs */
.fg-saas-analytics-head h2,
.fg-saas-analytics-head > strong {
  color: var(--fg-saas-ink) !important;
}
.fg-saas-chart-stroke {
  stroke: #e2b93b;
  stroke-width: 3.4;
  filter: drop-shadow(0 4px 10px rgba(226, 185, 59, 0.28));
  animation: fgSaaSDraw 0.95s 0.05s var(--fg-out-expo) forwards;
}
.fg-saas-chart-point {
  fill: #f3d14e;
  transition: r 0.22s var(--fg-spring), stroke-width 0.22s ease;
  cursor: pointer;
}
.fg-saas-chart-point:hover {
  r: 6.5px;
  stroke-width: 4px;
}

.fg-saas-layout .data-table th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--fg-saas-muted);
  background: color-mix(in srgb, var(--fg-saas-hover) 65%, transparent);
}
.fg-saas-layout .data-table tbody tr {
  transition: background-color 0.2s ease, transform 0.2s var(--fg-spring);
}
.fg-saas-layout .data-table tbody tr:hover {
  background-color: var(--fg-saas-hover);
}

.fg-saas-layout .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 760;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.fg-saas-layout input:not([type="checkbox"]):not([type="radio"]),
.fg-saas-layout select,
.fg-saas-layout textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.fg-saas-layout input:not([type="checkbox"]):not([type="radio"]):focus,
.fg-saas-layout select:focus,
.fg-saas-layout textarea:focus {
  border-color: #d4ae38 !important;
  box-shadow: 0 0 0 3.5px rgba(212, 174, 56, 0.2) !important;
  outline: none;
}

/* Auth Screen Polish */
.auth-wrap {
  background:
    radial-gradient(820px 420px at 18% 12%, rgba(237, 198, 58, 0.14), transparent 65%),
    radial-gradient(760px 380px at 84% 88%, rgba(56, 148, 102, 0.1), transparent 62%),
    var(--bg);
}
.auth-card {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: fgSaaSEnter 0.52s var(--fg-spring) both;
}

/* Accessibility & Print Guarantees */
@media (prefers-reduced-motion: reduce) {
  .fg-saas-green-dot,
  .fg-saas-stage-track span::after,
  .fg-inv-item,
  .fg-inv-history-item,
  .fg-inv-form-card.fg-form-highlight-pulse,
  .auth-card {
    animation: none !important;
  }
  .fg-saas-metric::after,
  .fg-saas-panel::after,
  .fg-saas-analytics-hero::after,
  .fg-directory-group::after {
    display: none !important;
  }
  .fg-saas-metric,
  .fg-saas-panel,
  .fg-saas-shortcut,
  .fg-saas-recent-row,
  .fg-inv-item,
  .fg-inv-history-item {
    transition: none !important;
    transform: none !important;
  }
}

@media print {
  .fg-saas-layout {
    background: #fff !important;
    background-image: none !important;
  }
  .fg-saas-metric::after,
  .fg-saas-panel::after,
  .fg-saas-analytics-hero::after {
    display: none !important;
  }
}


/* v551-enhancements.css — cascade source */
/* FAZGAME 5.5.1 command palette, interactive KPIs and accessible chart. */
.fg-saas-metric[data-nav]{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}
.fg-saas-metric[data-nav]:focus-visible{outline:3px solid #dfb830;outline-offset:3px}
.fg-command-launch{display:flex;align-items:center;gap:8px;border:1px solid var(--fg-saas-line,#dfe3da);background:var(--fg-saas-bg,#f7f8f6);color:var(--fg-saas-ink,#20211f);font:inherit;font-size:12px;font-weight:700;border-radius:22px;padding:8px 12px;min-height:37px;cursor:pointer;white-space:nowrap}
.fg-command-launch svg{height:15px;width:15px}
.fg-command-launch kbd,.fg-command-search kbd{font:600 10px/1.2 system-ui;border:1px solid var(--fg-saas-line,#dce0dc);border-radius:5px;padding:4px 5px;background:var(--fg-saas-surface,#fff);color:var(--fg-saas-muted,#6b736d)}
.fg-command-launch:hover{border-color:#c9ab42}
.fg-command-scrim{position:fixed;inset:0;z-index:9999;background:rgba(10,14,11,.66);backdrop-filter:blur(9px);display:flex;align-items:flex-start;justify-content:center;padding:clamp(40px,9vh,110px) 12px 20px;animation:fgCommandBackdrop .18s ease-out}
.fg-command{--cmd-bg:var(--fg-saas-surface,#fff);--cmd-ink:var(--fg-saas-ink,#21231e);--cmd-sub:var(--fg-saas-muted,#737b73);width:min(640px,100%);max-height:min(690px,84dvh);display:flex;flex-direction:column;overflow:hidden;background:var(--cmd-bg);border:1px solid var(--fg-saas-line,#e5e7e3);border-radius:24px;color:var(--cmd-ink);box-shadow:0 25px 120px #0005;animation:fgCommandPop .23s cubic-bezier(.2,.9,.22,1)}
.fg-command-head,.fg-command-search,.fg-command-footer{display:flex;align-items:center;gap:12px;padding:17px 21px}
.fg-command-head{justify-content:space-between;border-bottom:1px solid var(--fg-saas-line,#eee);font-weight:850;font-size:15px}
.fg-command-head small{margin-left:7px;font-size:9px;font-weight:700;color:var(--cmd-sub);letter-spacing:.1em}
.fg-command-head button{background:transparent;border:0;color:var(--cmd-sub);font-size:19px;cursor:pointer}
.fg-command-search{border-bottom:1px solid var(--fg-saas-line,#eee);padding:10px 19px}
.fg-command-search svg{height:20px;width:20px;flex:none;color:#b28b23}
.fg-command-search input{flex:1;min-width:0;background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important;color:var(--cmd-ink)!important;font-size:15px!important;min-height:45px}
.fg-command-search input::placeholder{color:var(--cmd-sub)}
.fg-command-results{overflow-y:auto;overscroll-behavior:contain;min-height:80px;padding:9px 10px}
.fg-command-row{display:flex;gap:12px;align-items:center;width:100%;border:1px solid transparent;border-radius:13px;text-align:left;padding:11px 13px;background:transparent;color:inherit;cursor:pointer;font:inherit}
.fg-command-row:hover,.fg-command-row.selected,.fg-command-row:focus-visible{background:var(--fg-saas-hover,#f6f5ee);border-color:var(--fg-saas-line,#ece9de);outline:none}
.fg-command-row-icon{height:34px;width:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:#9c7513;background:rgba(222,186,60,.1)}
.fg-command-row-icon svg{height:18px;width:18px}.fg-command-row-label{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}.fg-command-row-label strong{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fg-command-row-label small{color:var(--cmd-sub);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fg-command-row-arrow{color:var(--cmd-sub)}
.fg-command-empty{padding:20px;color:var(--cmd-sub);font-size:12px}
.fg-command-footer{padding:13px 20px;gap:18px;border-top:1px solid var(--fg-saas-line,#eee);color:var(--cmd-sub);font-size:10px;flex-wrap:wrap}
.fg-saas-chart{position:relative}
.fg-saas-chart .fg-saas-chart-target{fill:transparent;stroke:none;cursor:crosshair;pointer-events:all}
.fg-saas-chart .fg-saas-chart-hit:focus{outline:none}
.fg-saas-chart .fg-saas-chart-hit:focus .fg-saas-chart-point,.fg-saas-chart .fg-saas-chart-hit.is-active .fg-saas-chart-point{r:6;stroke-width:4;fill:#edc63a}
.fg-saas-chart .fg-saas-chart-crosshair{stroke:#c29c2e;stroke-width:1.25;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;pointer-events:none}
.fg-saas-chart-crosshair[hidden],.fg-saas-chart-tooltip[hidden]{display:none!important}
.fg-saas-chart-tooltip{position:absolute;z-index:5;transform:translate(-50%,calc(-100% - 12px));pointer-events:none;min-width:155px;background:#1c231d;color:#fff;border:1px solid #8b773e;border-radius:11px;padding:11px 13px;display:flex;flex-direction:column;gap:5px;box-shadow:0 9px 32px #0004;font-variant-numeric:tabular-nums}
.fg-saas-chart-tooltip .fg-chart-month{font-weight:700;font-size:11px;color:#e3c66b}.fg-saas-chart-tooltip strong{font-size:16px;white-space:nowrap}.fg-saas-chart-tooltip small{color:#d7dfd5;font-size:11px}
.fg-saas-chart-guide{font-size:10px;color:var(--fg-saas-muted,#687269);margin:9px 0 0}
.fg-share-dialog{max-width:490px}.fg-share-actions{display:grid;gap:9px;margin:18px 0}.fg-share-actions .btn{min-height:43px;text-align:center;justify-content:center}
@keyframes fgCommandBackdrop{from{opacity:0}to{opacity:1}}@keyframes fgCommandPop{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:800px){.fg-command-launch{padding:8px 9px}.fg-command-launch kbd{display:none}.fg-command-launch span{display:none}.fg-command-scrim{padding-top:max(env(safe-area-inset-top),28px)}.fg-command{max-height:82dvh;border-radius:19px}.fg-command-head,.fg-command-search{padding-left:14px;padding-right:14px}.fg-saas-chart-tooltip{min-width:130px;padding:8px}.fg-saas-chart-tooltip strong{font-size:13px}}
@media(prefers-reduced-motion:reduce){.fg-command-scrim,.fg-command{animation:none}}
@media print{.fg-command-scrim,.fg-command-launch{display:none!important}}

body.fg-command-open{overflow:hidden}


/* v553-animations.css — cascade source */
/* FAZGAME V5.5.3 | motion-only enhancement; server data, business logic, and inventory unchanged. */
.fg-saas-top-brand.fg-saas-top-brand-text-only{gap:12px}
.fg-saas-top-brand-text-only .fg-saas-brand-name{margin-left:0}
@media(max-width:580px){.fg-saas-top-brand.fg-saas-top-brand-text-only{gap:10px}}

/* Animated finance cards — same two-column layout and real MySQL sums. */
.fg-v553-report-grid{align-items:stretch}
.fg-v553-report-grid>.fg-v553-motion-card{min-width:0;position:relative;isolation:isolate;overflow:hidden;border-radius:22px;padding:clamp(19px,2.5vw,28px)}
.fg-v553-card-heading{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:24px}
.fg-v553-card-heading h2{margin:9px 0 9px;font-size:clamp(20px,2vw,25px);font-weight:830;line-height:1.2;letter-spacing:-.045em}
.fg-v553-card-heading .subtitle{margin:0;font-size:12px}
.fg-v553-kicker{display:block;color:#a78626;font-weight:850;font-size:9px;letter-spacing:.14em}
.fg-v553-mini-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:rgba(222,181,65,.12);color:#ac8b2d}
.fg-v553-mini-icon svg{width:18px;height:18px}
.fg-v553-trend-list{display:grid;gap:6px}
.fg-v553-trend-row{display:flex;align-items:center;gap:12px;min-height:43px;padding:9px 9px 9px 1px;margin:0;border:1px solid transparent;border-radius:11px;cursor:pointer;transition:background .24s ease,border-color .24s ease,transform .24s ease;color:inherit}
.fg-v553-trend-row:hover,.fg-v553-trend-row.is-selected,.fg-v553-trend-row:focus-visible{background:rgba(218,178,58,.09);border-color:rgba(204,158,37,.25);outline:none}
.fg-v553-trend-row:focus-visible{box-shadow:0 0 0 2px rgba(208,167,47,.4)}
.fg-v553-trend-row>.bar-label{width:76px;flex:none;color:var(--fg-saas-muted,var(--sub));font-size:11px;font-variant-numeric:tabular-nums}
.fg-v553-trend-row>.bar-bg{flex:1;min-width:0;height:11px;overflow:hidden;border-radius:20px;background:var(--fg-saas-hover,#e7e8ea)}
.fg-v553-trend-row .bar-fill{position:relative;transform-origin:left center;height:100%;border-radius:20px;background:linear-gradient(90deg,#c39b36,#e5bc4f,#f6d96e);box-shadow:0 1px 6px #bd9b3655}
.fg-v553-trend-row .bar-fill::after{content:'';display:block;position:absolute;inset:0;background:linear-gradient(95deg,transparent 15%,#ffffff48 50%,transparent 85%);transform:translateX(-120%);pointer-events:none}
.fg-v553-trend-row>.bar-number{width:100px;flex:none;text-align:right;white-space:nowrap;font-size:11px;font-weight:770;color:var(--fg-saas-ink,var(--text));font-variant-numeric:tabular-nums}
.fg-v553-motion-card.fg-v553-ready .fg-v553-trend-row .bar-fill{transform:scaleX(0)}
.fg-v553-motion-card.fg-v553-revealed .fg-v553-trend-row .bar-fill{transform:scaleX(1);transition:transform .85s cubic-bezier(.2,.85,.22,1) calc(var(--fg-v553-i,0)*95ms)}
.fg-v553-motion-card.fg-v553-revealed .fg-v553-trend-row.is-selected .bar-fill::after{animation:fgV553FillLight .9s .15s ease-out 1 both}
.fg-v553-month-detail{min-height:42px;display:flex;align-items:center;gap:9px;margin-top:19px;padding:11px 12px;border:1px solid var(--fg-saas-line,var(--line));border-radius:12px;background:var(--fg-saas-hover,#f7f6ee);color:var(--fg-saas-muted,var(--sub));font-size:10px;line-height:1.4}
.fg-v553-detail-dot{width:8px;height:8px;flex:none;border-radius:50%;background:#d5af3d;box-shadow:0 0 0 4px #d6ae3022}
.fg-v553-zero-note{margin:12px 2px 0;color:var(--fg-saas-muted,var(--sub));font-size:11px;line-height:1.5}
.fg-v553-finance-rows{display:grid;gap:4px}
.fg-v553-finance-row{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:42px;font-size:12px;color:var(--fg-saas-muted,var(--sub))}
.fg-v553-finance-row strong{font-size:12px;color:var(--fg-saas-ink,var(--text));font-weight:780;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.fg-v553-finance-row:nth-child(3){margin-top:3px;padding-top:5px;border-top:1px dashed var(--fg-saas-line,var(--line))}
.fg-v553-finance-row:nth-child(3) strong{color:#aa842a}
.fg-v553-finance-result{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:19px;padding-top:21px;border-top:1px solid var(--fg-saas-line,var(--line));position:relative}
.fg-v553-finance-result:before{content:'';position:absolute;top:-1px;left:0;right:0;height:2px;border-radius:4px;background:linear-gradient(90deg,#d3a32f,#efcb5c,transparent);transform-origin:left;transform:scaleX(0)}
.fg-v553-finance-card.fg-v553-revealed .fg-v553-finance-result:before{animation:fgV553Divider .9s .5s cubic-bezier(.17,.85,.17,1) both}
.fg-v553-finance-result>span{font-weight:850;font-size:clamp(13px,1.2vw,16px);line-height:1.35}
.fg-v553-finance-result strong{font-size:clamp(22px,2.35vw,33px);font-weight:900;letter-spacing:-.045em;white-space:nowrap;color:var(--fg-saas-ink,var(--text));font-variant-numeric:tabular-nums}
.fg-v553-finance-result strong.fg-v553-negative,.fg-v553-finance-row .fg-v553-negative{color:#c35e58}
.fg-v553-finance-disclaimer{margin:20px 0 0;color:var(--fg-saas-muted,var(--sub));font-size:10px;line-height:1.55}
.fg-v553-finance-card.fg-v553-revealed .fg-v553-finance-row{animation:fgV553Reveal .57s cubic-bezier(.15,.8,.24,1) both;animation-delay:calc(var(--fg-v553-i,0)*100ms)}
.fg-v553-finance-card.fg-v553-revealed .fg-v553-finance-result{animation:fgV553Reveal .6s .43s ease-out both}
@keyframes fgV553Divider{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fgV553Reveal{from{opacity:.15;transform:translate3d(0,9px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fgV553FillLight{from{transform:translateX(-120%)}to{transform:translateX(200%)}}

/* Active jobs: pulse only for truly active status; animation never changes records. */
.fg-v553-active-kpi .fg-saas-metric-icon{position:relative}
.fg-v553-active-kpi .fg-saas-metric-icon::after{content:'';position:absolute;right:-2px;top:-2px;width:7px;height:7px;border-radius:50%;background:#58b58b;box-shadow:0 0 0 2px var(--fg-saas-surface,#fff)}
.fg-saas-performance .fg-v553-has-builds.fg-saas-dial::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(226,182,53,.36);pointer-events:none;animation:fgV553DialPulse 2.2s ease-out 2 both}
.fg-saas-performance .fg-saas-dial-center strong{min-width:1.6ch;font-variant-numeric:tabular-nums}
.fg-saas-performance.fg-v553-animated .fg-saas-performance-item{animation:fgV553Reveal .45s ease-out both;animation-delay:calc(var(--fg-v553-i,0)*110ms)}
.fg-saas-performance .fg-saas-stage-track span::after{animation-iteration-count:2}
.fg-v553-job-running{position:relative}
.fg-v553-job-running .fg-saas-recent-icon{box-shadow:inset 0 0 0 1px rgba(212,164,49,.32)}
.fg-v553-job-running .fg-saas-recent-icon::after{content:'';display:block;position:absolute;width:5px;height:5px;border-radius:50%;background:#5bb789;box-shadow:0 0 0 3px rgba(74,172,121,.15)}
.fg-v553-job-progress>div{transform-origin:left}
.fg-v553-jobs-ready .fg-v553-job-progress>div{transform:scaleX(0)}
.fg-v553-jobs-animated .fg-v553-job-progress>div{transform:scaleX(1);transition:transform .75s cubic-bezier(.18,.84,.22,1)}
@keyframes fgV553DialPulse{0%{opacity:.65;transform:scale(.96)}75%,100%{opacity:0;transform:scale(1.11)}}

@media(max-width:580px){
 .fg-v553-report-grid>.fg-v553-motion-card{padding:20px 16px}
 .fg-v553-card-heading{margin-bottom:17px}
 .fg-v553-card-heading h2{font-size:21px}
 .fg-v553-trend-row{gap:8px;min-height:43px;padding-right:6px}
 .fg-v553-trend-row>.bar-label{width:68px;font-size:10px}
 .fg-v553-trend-row>.bar-number{width:93px;font-size:10px}
 .fg-v553-finance-row{font-size:12px}
 .fg-v553-finance-result strong{font-size:clamp(21px,5.5vw,29px)}
 .fg-v553-finance-result>span{font-size:13px}
}
@media(max-width:350px){.fg-v553-report-grid>.fg-v553-motion-card{padding:16px 12px}.fg-v553-trend-row>.bar-label{width:61px}.fg-v553-trend-row>.bar-number{width:87px;font-size:9px}}
@media(prefers-reduced-motion:reduce){
 .fg-v553-report-grid .fg-v553-motion-card *, .fg-v553-jobs-animated .fg-v553-job-progress>div,
 .fg-saas-performance .fg-v553-has-builds.fg-saas-dial::after{animation:none!important;transition:none!important}
 .fg-v553-motion-card.fg-v553-ready .fg-v553-trend-row .bar-fill{transform:none!important}
 .fg-v553-jobs-ready .fg-v553-job-progress>div{transform:none!important}
}
@media print{.fg-v553-report-grid .fg-v553-motion-card *, .fg-saas-performance .fg-v553-has-builds.fg-saas-dial::after{animation:none!important;transition:none!important}.fg-v553-motion-card .fg-v553-trend-row .bar-fill,.fg-v553-jobs-ready .fg-v553-job-progress>div{transform:none!important}}


/* v560-upgrade.css — cascade source */
/* FAZGAME Hub V5.5.4 + V5.5.5 + Ultimate Design, Animation, Icons, Cards & Function Upgrade */

/* V5.5.4 Workshop Pulse featured theme to match Job Sales */
.fg-v554-pulse-featured{background:radial-gradient(220px circle at 100% 0%, rgba(237,198,58,.16), transparent 70%),linear-gradient(135deg,#1b1e1c 0%,#21261e 48%,#1b1e1c 100%);border-color:#1b1e1c;color:#fff;box-shadow:0 18px 40px rgba(17,27,16,.16)}
.fg-v554-pulse-featured .fg-saas-panel-heading h2,.fg-v554-pulse-featured .fg-saas-dial-center strong,.fg-v554-pulse-featured .fg-saas-performance-label strong{color:#fff}
.fg-v554-pulse-featured .fg-saas-panel-heading p,.fg-v554-pulse-featured .fg-saas-overline,.fg-v554-pulse-featured .fg-saas-performance-label,.fg-v554-pulse-featured .fg-saas-dial-center span,.fg-v554-pulse-featured .fg-saas-panel-note{color:#acb5aa}
.fg-v554-pulse-featured .fg-saas-text-link{color:#f2d466}
.fg-v554-pulse-featured .fg-saas-text-link:hover{text-decoration:none;color:#ffe48c}
.fg-v554-pulse-featured .fg-saas-text-link svg{color:#f2d466}
.fg-v554-pulse-featured .fg-saas-panel-note{border-top-color:rgba(255,255,255,.10)}
.fg-v554-pulse-featured .fg-saas-dial{background:conic-gradient(from 220deg,#edd06c var(--score),rgba(255,255,255,.09) var(--score));box-shadow:0 12px 30px rgba(0,0,0,.18)}
.fg-v554-pulse-featured .fg-saas-dial:before{background:#21251f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.fg-v554-pulse-featured .fg-saas-stage-marker{background:#574f34}
.fg-v554-pulse-featured .fg-saas-stage-1{background:#d9bb62}.fg-v554-pulse-featured .fg-saas-stage-2{background:#c7a74f}.fg-v554-pulse-featured .fg-saas-stage-3{background:#b78f37}
.fg-v554-pulse-featured .fg-saas-stage-track{background:rgba(255,255,255,.08)}
.fg-v554-pulse-featured .fg-saas-stage-track span{background:linear-gradient(90deg,#c2a64d,#edca55)}

/* V5.5.5 — true edge-to-edge top header, independent of the desktop floating rail.
   The dashboard content still respects the 94px rail gutter; only the header spans the viewport. */
@media screen and (min-width:851px){
 .fg-saas-layout .fg-simple-main > .fg-saas-topbar{
   width:calc(100% + 94px)!important;max-width:none!important;
   margin-left:-94px!important;box-sizing:border-box;
 }
}
@media screen and (max-width:850px){
 .fg-saas-layout .fg-simple-main > .fg-saas-topbar{
   width:100%!important;max-width:none!important;margin-left:0!important;
   box-sizing:border-box;
 }
}
/* Keep all essential actions available while making the phone header compact. */
@media screen and (max-width:480px){
 .fg-saas-layout .fg-simple-main > .fg-saas-topbar{gap:6px!important;padding-inline:10px!important}
 .fg-saas-layout .fg-saas-top-brand{gap:4px;flex:0 1 auto;min-width:0}
 .fg-saas-layout .fg-saas-brand-name{white-space:nowrap;font-size:11px}
 .fg-saas-layout .fg-saas-top-actions{gap:5px;min-width:0}
 .fg-saas-layout .fg-saas-top-actions .fg-primary-new{padding-inline:9px!important}
}
@media print{.fg-saas-layout .fg-simple-main > .fg-saas-topbar{display:none!important}}
@media screen and (max-width:365px){
 .fg-saas-layout .fg-saas-mobile-menu{padding:5px}
 .fg-saas-layout .fg-saas-top-actions .pwa-install-action:not([hidden]){padding-inline:6px!important;font-size:10px!important}
 .fg-saas-layout .fg-saas-top-actions .fg-primary-new{padding-inline:6px!important}
}

/* V5.5.5 — Bottom-right pill jumps directly to All Modules, distinct from header menu. */
@media screen and (max-width:850px){
  .mobile-dock.fg-mobile-pill button.fg-all-modules-dock span{
    white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
    line-height:1.05!important;text-align:center;max-width:100%;
  }
}

/* ==========================================================================
   ULTIMATE UPGRADE LAYER: DESIGN, ANIMATIONS, ICONS, CARDS & FUNCTIONS
   ========================================================================== */

/* 1. Top Navigation Tabs with Crisp SVG Icons & Gold Active Indicator */
.fg-saas-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fg-saas-tab svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.72;
  transition: transform 0.24s var(--fg-spring, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.2s ease, color 0.2s ease;
}
.fg-saas-tab:hover svg {
  opacity: 1;
  transform: translateY(-1px) scale(1.06);
}
.fg-saas-tab.active svg {
  opacity: 1;
  color: #f3d14e;
}
html[data-theme="dark"] .fg-saas-tab.active svg {
  color: #19160a;
}
@media (max-width: 1280px) {
  .fg-saas-tab svg {
    width: 13px;
    height: 13px;
  }
}

/* Header Quick Theme Button (Desktop/Tablet) */
.fg-header-theme-btn {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid var(--fg-saas-line, #dfe3da);
  background: var(--fg-saas-bg, #f7f8f6);
  color: var(--fg-saas-ink, #20211f);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.24s var(--fg-spring), border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.fg-header-theme-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.35s var(--fg-spring);
}
.fg-header-theme-btn:hover {
  border-color: #d4ae38;
  color: #b89014;
  transform: translateY(-1px);
}
html[data-theme="dark"] .fg-header-theme-btn:hover {
  color: #f4d24e;
}
.fg-header-theme-btn:hover svg {
  transform: rotate(18deg) scale(1.08);
}
@media (max-width: 580px) {
  .fg-header-theme-btn {
    display: none !important;
  }
}

/* 2. Upgraded Dashboard KPI Cards (.fg-saas-metric) */
.fg-saas-metric-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.fg-kpi-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(226, 185, 59, 0.14);
  color: #9e7b16;
  border: 1px solid rgba(226, 185, 59, 0.28);
  white-space: nowrap;
}
html[data-theme="dark"] .fg-kpi-pill,
.fg-saas-metric.featured .fg-kpi-pill {
  background: rgba(243, 209, 78, 0.16);
  color: #f4d459;
  border-color: rgba(243, 209, 78, 0.32);
}
.fg-kpi-bar {
  display: block;
  position: relative;
  z-index: 1;
  width: calc(100% - 34px);
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg-saas-line, #e5e7e3) 85%, transparent);
  overflow: hidden;
}
.fg-saas-metric.featured .fg-kpi-bar {
  background: rgba(255, 255, 255, 0.12);
}
.fg-kpi-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #cfa427, #f4d355);
  transform-origin: left center;
  animation: fgKpiBarSweep 0.9s var(--fg-out-expo, cubic-bezier(0.19, 1, 0.22, 1)) both;
}
.fg-v553-active-kpi .fg-kpi-bar i {
  background: linear-gradient(90deg, #2fa872, #63dfa5);
}
@keyframes fgKpiBarSweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* 3. Upgraded Module Summary KPI Cards (.card.kpi) */
.fg-saas-layout .card.kpi {
  position: relative;
  overflow: hidden;
  padding: 18px 20px 19px;
  border-radius: 18px;
  border: 1px solid var(--fg-saas-line);
  background:
    radial-gradient(150px circle at 100% 0%, rgba(237, 198, 58, 0.07), transparent 72%),
    var(--fg-saas-surface);
  box-shadow: var(--fg-card-shadow);
  transition: transform 0.3s var(--fg-spring), box-shadow 0.3s var(--fg-spring), border-color 0.25s ease;
  animation: fg-card-enter 0.42s var(--fg-spring) both;
  animation-delay: calc(var(--fg-idx, 0) * 45ms);
}
@media (hover: hover) and (pointer: fine) {
  .fg-saas-layout .card.kpi:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--fg-card-shadow-hover);
    border-color: rgba(218, 179, 48, 0.42);
  }
  .fg-saas-layout .card.kpi:hover .kpi-icon {
    transform: scale(1.08) rotate(-3deg);
    background: rgba(237, 198, 58, 0.2);
    color: #b89014;
  }
  html[data-theme="dark"] .fg-saas-layout .card.kpi:hover .kpi-icon {
    color: #f4d24e;
    background: rgba(237, 198, 58, 0.24);
  }
}
.fg-saas-layout .card.kpi .kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-saas-muted);
}
.fg-saas-layout .card.kpi .kpi-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--fg-saas-hover) 90%, transparent);
  color: #b28c22;
  border: 1px solid rgba(218, 179, 48, 0.2);
  transition: transform 0.28s var(--fg-spring), background-color 0.24s ease, color 0.24s ease;
}
html[data-theme="dark"] .fg-saas-layout .card.kpi .kpi-icon {
  color: #edc63a;
}
.fg-saas-layout .card.kpi .kpi-value {
  font-size: clamp(20px, 2.1vw, 29px);
  font-weight: 850;
  letter-spacing: -0.045em;
  color: var(--fg-saas-ink);
  margin: 14px 0 6px;
  font-variant-numeric: tabular-nums;
}
.fg-saas-layout .card.kpi .kpi-hint {
  font-size: 10.5px;
  color: var(--fg-saas-muted);
}
.fg-saas-layout .card.kpi .kpi-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #d4ab2a, #f5d761, transparent);
  opacity: 0.55;
  transform-origin: left;
  transition: opacity 0.25s ease, transform 0.35s var(--fg-spring);
}
.fg-saas-layout .card.kpi:hover .kpi-bar {
  opacity: 1;
}

/* 4. Workshop Pulse Actions & Dial Rate Pill */
.fg-pulse-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.fg-pulse-rate-pill {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(242, 212, 102, 0.16);
  color: #f2d466;
  border: 1px solid rgba(242, 212, 102, 0.28);
}
@keyframes fgRefreshSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.fg-is-spinning svg {
  animation: fgRefreshSpin 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 5. Dashboard Recent Jobs Filter Chips & Price Pill */
.fg-recent-head-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fg-recent-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--fg-saas-bg);
  border: 1px solid var(--fg-saas-line);
}
.fg-recent-chip {
  border: 0;
  background: transparent;
  color: var(--fg-saas-muted);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.18s var(--fg-spring);
}
.fg-recent-chip:hover {
  color: var(--fg-saas-ink);
}
.fg-recent-chip.active {
  background: linear-gradient(135deg, #f3d14e 0%, #dfb422 100%);
  color: #1c180b;
  box-shadow: 0 2px 8px rgba(223, 180, 34, 0.25);
}
.fg-recent-price {
  font-size: 11px;
  font-weight: 800;
  color: var(--fg-saas-ink);
  font-variant-numeric: tabular-nums;
  padding: 4px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg-saas-hover) 85%, transparent);
  border: 1px solid var(--fg-saas-line);
  white-space: nowrap;
}

/* 6. 1-Click Quick Status Pill Bar on Module Lists */
.fg-quick-status-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 14px;
  margin-bottom: 4px;
}
.fg-quick-status-bar::-webkit-scrollbar {
  display: none;
}
.fg-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--fg-saas-line);
  background: var(--fg-saas-surface);
  color: var(--fg-saas-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 740;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s var(--fg-spring), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.fg-status-pill:hover {
  border-color: rgba(218, 179, 48, 0.5);
  color: var(--fg-saas-ink);
  transform: translateY(-1px);
}
.fg-status-pill.active {
  background: linear-gradient(135deg, #f3d14e 0%, #dfb422 100%);
  color: #1c180b;
  border-color: rgba(184, 146, 20, 0.45);
  box-shadow: 0 4px 14px rgba(223, 180, 34, 0.26);
}
.fg-pill-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 850;
  background: color-mix(in srgb, var(--fg-saas-hover) 95%, transparent);
  color: var(--fg-saas-ink);
  font-variant-numeric: tabular-nums;
}
.fg-status-pill.active .fg-pill-count {
  background: rgba(28, 24, 11, 0.16);
  color: #1c180b;
}

/* 7. All Modules Directory Category Filter Pills & Enhanced Module Cards */
.fg-dir-pills {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 14px;
}
.fg-dir-pills::-webkit-scrollbar {
  display: none;
}
.fg-dir-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--fg-saas-line);
  background: var(--fg-saas-surface);
  color: var(--fg-saas-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--fg-spring), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.fg-dir-pill:hover {
  border-color: rgba(218, 179, 48, 0.5);
  color: var(--fg-saas-ink);
  transform: translateY(-1px);
}
.fg-dir-pill.active {
  background: linear-gradient(135deg, #f3d14e 0%, #dfb422 100%);
  color: #1c180b;
  border-color: rgba(184, 146, 20, 0.45);
  box-shadow: 0 4px 12px rgba(223, 180, 34, 0.24);
}
.fg-module-link {
  transition: transform 0.25s var(--fg-spring), border-color 0.22s ease, box-shadow 0.25s var(--fg-spring), background-color 0.22s ease !important;
}
.fg-module-link .fg-module-icon {
  transition: transform 0.26s var(--fg-spring), background-color 0.22s ease, color 0.22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .fg-module-link:hover {
    transform: translate3d(0, -3px, 0) !important;
    border-color: rgba(218, 179, 48, 0.5) !important;
    box-shadow: 0 10px 24px -6px rgba(18, 24, 20, 0.1) !important;
  }
  .fg-module-link:hover .fg-module-icon {
    background: linear-gradient(135deg, #f4d355, #e0b624) !important;
    color: #1c180b !important;
    transform: scale(1.08) rotate(-3deg);
  }
}

/* 8. Upgraded Semantic Status Badges with Glowing Dot Indicator */
.fg-saas-layout .badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.fg-saas-layout .badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0.85;
}

/* 9. Upgraded Kanban Cards with Stage Progress Bar */
.fg-saas-layout .kanban-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid var(--fg-saas-line);
  background: var(--fg-saas-surface);
  box-shadow: var(--fg-card-shadow);
  transition: transform 0.26s var(--fg-spring), box-shadow 0.26s var(--fg-spring), border-color 0.22s ease;
  animation: fg-card-enter 0.36s var(--fg-spring) both;
  animation-delay: calc(var(--fg-idx, 0) * 35ms);
}
@media (hover: hover) and (pointer: fine) {
  .fg-saas-layout .kanban-card:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: var(--fg-card-shadow-hover);
    border-color: rgba(218, 179, 48, 0.45);
  }
}
.kanban-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--fg-saas-hover);
  margin: 10px 0 8px;
  overflow: hidden;
}
.kanban-progress > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #cfa427, #f3d14e);
  transition: width 0.5s var(--fg-out-expo);
}

/* 10. Animated Toast Notification (#flash) */
@keyframes fgToastSlide {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes fgToastDecay {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}
#flash.notice {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  animation: fgToastSlide 0.32s var(--fg-spring) both;
}
#flash.notice::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #d4ab2a, #f4d355);
  transform-origin: left center;
  animation: fgToastDecay 5.1s linear forwards;
}
#flash.notice.error::after {
  background: linear-gradient(90deg, #d9534f, #f0807c);
}

/* 11. Filter Toolbar Utility Actions (Export CSV & Copy Summary) */
.fg-filter-utilities {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
@media (max-width: 680px) {
  .fg-filter-utilities {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .fg-recent-head-controls {
    width: 100%;
    justify-content: space-between;
  }
}

/* 12. Reduced Motion & Print Safeguards */
@media (prefers-reduced-motion: reduce) {
  .fg-kpi-bar i,
  .fg-saas-layout .card.kpi,
  .fg-saas-layout .kanban-card,
  .fg-is-spinning svg,
  #flash.notice,
  #flash.notice::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
@media print {
  .fg-quick-status-bar,
  .fg-filter-utilities,
  .fg-dir-pills,
  .fg-recent-filters,
  .fg-header-theme-btn {
    display: none !important;
  }
}

/* 13. Quick Action Live Badges, Command Palette Type Tags, Directory Hero & Empty State Polish */
.fg-shortcut-badge {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(226, 185, 59, 0.14);
  color: #9c7816;
  border: 1px solid rgba(226, 185, 59, 0.28);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.22s var(--fg-spring);
}
html[data-theme="dark"] .fg-shortcut-badge {
  background: rgba(243, 209, 78, 0.15);
  color: #f3d14e;
  border-color: rgba(243, 209, 78, 0.3);
}
@media (hover: hover) and (pointer: fine) {
  .fg-saas-shortcut:hover .fg-shortcut-badge {
    background: #1c180b;
    color: #f4d355;
    border-color: #1c180b;
  }
  html[data-theme="dark"] .fg-saas-shortcut:hover .fg-shortcut-badge {
    background: rgba(243, 209, 78, 0.28);
    color: #fff;
  }
}
@media (max-width: 480px) {
  .fg-shortcut-badge {
    display: none;
  }
}

.fg-command-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--fg-saas-hover, #f4f4ee) 90%, transparent);
  color: var(--fg-saas-muted, #6e756f);
  border: 1px solid var(--fg-saas-line, #e2e5de);
  flex-shrink: 0;
}
.fg-command-row.selected .fg-command-tag,
.fg-command-row:hover .fg-command-tag {
  background: rgba(226, 185, 59, 0.18);
  color: #9c7816;
  border-color: rgba(226, 185, 59, 0.35);
}
html[data-theme="dark"] .fg-command-row.selected .fg-command-tag,
html[data-theme="dark"] .fg-command-row:hover .fg-command-tag {
  color: #f3d14e;
}

.fg-directory-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.fg-dir-head-ico {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: rgba(226, 185, 59, 0.14);
  color: #a6821c;
  border: 1px solid rgba(226, 185, 59, 0.28);
}
html[data-theme="dark"] .fg-dir-head-ico {
  color: #f3d14e;
}
.fg-dir-head-ico svg {
  width: 15px;
  height: 15px;
}

.fg-saas-layout .fg-directory-hero {
  background:
    radial-gradient(280px circle at 95% 10%, rgba(237, 198, 58, 0.2), transparent 70%),
    linear-gradient(135deg, #1d2320 0%, #141816 60%, #241f11 100%) !important;
  border-color: rgba(237, 198, 58, 0.32) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 38px -8px rgba(15, 20, 17, 0.28) !important;
}
.fg-saas-layout .fg-directory-hero h1,
.fg-saas-layout .fg-directory-hero .fg-directory-total strong {
  color: #ffffff !important;
}
.fg-saas-layout .fg-directory-hero p,
.fg-saas-layout .fg-directory-hero .eyebrow,
.fg-saas-layout .fg-directory-hero .fg-directory-total small {
  color: #b8c2b9 !important;
}
.fg-saas-layout .fg-directory-hero .eyebrow {
  color: #f2d466 !important;
}

.fg-saas-layout .empty {
  border-radius: 16px;
  padding: 36px 22px;
  background: radial-gradient(220px circle at 50% 0%, rgba(237, 198, 58, 0.08), transparent 72%);
}
.fg-saas-layout .empty .empty-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(237, 198, 58, 0.14);
  color: #b28c22;
  border: 1px solid rgba(237, 198, 58, 0.3);
  box-shadow: 0 8px 20px rgba(223, 180, 34, 0.15);
}
html[data-theme="dark"] .fg-saas-layout .empty .empty-icon {
  color: #f3d14e;
}