/* Crown Network — theme layer on top of Bootstrap 5 Light (Cyan) by default, dark console via */ :root{ --toast-fg: #0a2a30; --toast-success-bg: #e5f6ec; --toast-danger-bg: #fbe0e0; --toast-warning-bg: #fbe9d3; --toast-info-bg: #d3eef0; --toast-danger-accent: #c93f3f; --topbar-h:65px; --tabbar-h:64px; --bg:#eaf6f8; --surface:#ffffff; --surface-2:#f4fafb; --raised:#ffffff00; --text:#0a2a30; --muted:#4a5f64; --faint:#8a9598; --accent:#0e7c8c; --accent-600:#0a6270; --accent-700:#084a54; --accent-100:#d3eef0; --accent-200:#a9d8dc; --sage:#1f9c6b; --sage-100:#e5f6ec; --sage-700:#177a51; --border:rgba(10,42,48,.14); --border-soft:rgba(10,42,48,.08); --shadow-sm:0 1px 2px rgba(10,42,48,.10); --shadow-md:0 3px 10px rgba(10,42,48,.12); --shadow-lg:0 12px 32px rgba(10,42,48,.18); --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:28px; } body.theme-dark{ --toast-fg: #e4eef0; --toast-success-bg: #16301f; --toast-danger-bg: #33191a; --toast-warning-bg: #332711; --toast-info-bg: #12262b; --toast-danger-accent: #e26a6a; --bg:#0f1e22; --surface:#152a2f; --surface-2:#0f2226; --text:#e4eef0; --muted:#8ea3a7; --faint:#5f7378; --accent:#2bb4c4; --accent-600:#4fc3d1; --accent-700:#5ec8d6; --accent-100:rgba(43,180,196,.18); --accent-200:rgba(43,180,196,.3); --sage:#3fbf8a; --sage-100:rgba(63,191,138,.16); --sage-700:#3fbf8a; --border:rgba(228,238,240,.12); --border-soft:rgba(228,238,240,.08); --shadow-sm:none; --shadow-md:none; --shadow-lg:0 12px 32px rgba(0,0,0,.45); } *{ -webkit-tap-highlight-color:transparent; } body{ margin:0; background:var(--bg); color:var(--text); font-family:"Poppins",system-ui,sans-serif; font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5{ font-weight:700; letter-spacing:-.015em; line-height:1.15; margin:0; } a{ color:var(--accent); text-decoration:none; } a:hover{ color:var(--accent-600); } .text-muted2{ color:var(--muted)!important; } .text-faint{ color:var(--faint)!important; } .mono{ font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; } .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } ::selection{ background:rgba(14,124,140,.3); } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-thumb{ background:var(--border); border-radius:999px; } /* ---------- buttons ---------- */ .btn{ border-radius:999px; font-weight:600; font-size:14px; padding:.7rem 1.15rem; border:1px solid transparent; } .btn-crown{ background:var(--accent); color:#fff; } body.theme-dark .btn-crown{ color:#06171a; } .btn-crown:hover{ background:var(--accent-600); color:#fff; } body.theme-dark .btn-crown:hover{ color:#06171a; } .btn-ghost{ border-color:var(--border); color:var(--text); background:transparent; } .btn-ghost:hover{ background:rgba(10,42,48,.08); color:var(--text); } body.theme-dark .btn-ghost:hover{ background:rgba(228,238,240,.08); } .btn-sm{ padding:.5rem .85rem; font-size:12.5px; } .btn-icon{ width:40px; height:40px; padding:0; display:inline-flex; align-items:center; justify-content:center; } /* ---------- surfaces ---------- */ .card-soft{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } .card-sand{ background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-lg); } .card-accent{ background:var(--accent); color:#fff; border-radius:var(--r-xl); box-shadow:var(--shadow-md); } body.theme-dark .card-accent{ color:#06171a; } .list-flush > *{ border-bottom:1px solid var(--border-soft); } .list-flush > *:last-child{ border-bottom:0; } /* ---------- stat cards ---------- */ .stat-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-md); box-shadow:var(--shadow-sm); padding:1rem; } .stat-card .stat-label{ font-size:12px; color:var(--muted); margin:0 0 4px; } .stat-card .stat-value{ font-size:20px; font-weight:700; margin:0; color:var(--text); } .stat-card .stat-value.accent{ color:var(--accent-700); } body.theme-dark .stat-card .stat-value.accent{ color:var(--accent); } .stat-card .stat-value.sage{ color:var(--sage-700); } body.theme-dark .stat-card .stat-value.sage{ color:var(--sage); } .stat-card .stat-sub{ font-size:11px; color:var(--muted); margin:2px 0 0; } /* ---------- pills / tags ---------- */ .pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; white-space:nowrap; } .pill-ok{ background:var(--sage-100); color:var(--sage-700); } .pill-warn{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .pill-warn{ color:var(--accent); } .pill-mute{ background:rgba(10,42,48,.12); color:var(--muted); } body.theme-dark .pill-mute{ background:rgba(228,238,240,.12); } .pill-outline{ border:1px solid var(--border); color:var(--muted); } .filter-pill{ border:1px solid var(--border); color:var(--muted); background:transparent; border-radius:999px; padding:.5rem .95rem; font-size:13px; font-weight:600; } .filter-pill.active{ background:var(--accent); border-color:var(--accent); color:#fff; } body.theme-dark .filter-pill.active{ color:#06171a; } /* ---------- forms ---------- */ .form-label{ font-size:13px; font-weight:600; color:var(--muted); margin-bottom:.4rem; } .form-control,.form-select{ background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:9px; padding:.75rem 1rem; font-size:14.5px; } .form-control:focus,.form-select:focus{ background:var(--surface); color:var(--text); border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), 0 0 0 5px var(--accent-100); outline:none; } .form-control::placeholder{ color:var(--faint); } .input-round-group .form-control{ border-radius:999px; } .form-check-input{ border-color:var(--border); background-color:var(--surface); } .form-check-input:checked{ background-color:var(--accent); border-color:var(--accent); } .form-check-input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-100); } .form-switch .form-check-input:checked{ background-color:var(--sage); border-color:var(--sage); } .seg{ display:flex; flex-wrap:nowrap; gap:.35rem; background:var(--surface-2); border-radius:999px; padding:.28rem; overflow-x:auto; scrollbar-width:none; } .seg::-webkit-scrollbar{ display:none; } .seg .seg-opt{ flex:1 0 auto; min-width:0; white-space:nowrap; text-align:center; padding:.6rem .85rem; border-radius:999px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; border:0; background:transparent; } .seg .seg-opt.active{ background:var(--accent); color:#fff; } body.theme-dark .seg .seg-opt.active{ color:#06171a; } /* ---------- app shell ---------- */ .app{ display:flex; min-height:100vh; } .sidebar{ width:250px; flex:none; background:#0a2a30; border-right:1px solid var(--border-soft); padding:1.25rem .9rem; display:flex; flex-direction:column; gap:1.1rem; position:sticky; top:0; height:100vh; overflow:auto; } body.theme-dark .sidebar{ background:#081619; } .sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:.15rem .4rem; font-weight:700; font-size:16px; color:#fff; } .nav-group-label{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.4); padding:.35rem .8rem; } .nav-item-c{ display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem; border-radius:12px; font-size:13.5px; font-weight:500; color:rgba(255,255,255,.75); } .nav-item-c:hover{ background:rgba(255,255,255,.08); color:#fff; } .nav-item-c.active{ background:var(--accent); color:#fff; font-weight:600; } .nav-item-c .count{ margin-left:auto; font-size:11px; font-weight:600; background:rgba(255,255,255,.15); color:rgba(255,255,255,.85); padding:.15rem .45rem; border-radius:999px; } .nav-item-c .count.urgent{ background:var(--toast-danger-accent); color:#fff; } .nav-item-c.active .count{ background:rgba(255,255,255,.25); color:inherit; } .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .topbar{ display:flex; align-items:center; gap:.75rem; padding:.9rem 1.25rem; border-bottom:1px solid var(--border-soft); background:var(--surface); position:sticky; top:0; z-index:20; } /* topbar dropdowns */ .crown-menu{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:0; margin-top:.5rem; min-width:270px; overflow:hidden; z-index:1040; max-height:calc(100vh - 5rem); overflow-y:auto; } .crown-menu{ max-width:min(320px, calc(100vw - 2rem)); } .dropup > .crown-menu{ margin-top:0; margin-bottom:.5rem; } .crown-menu-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 1rem; border-bottom:1px solid var(--border-soft); font-size:12.5px; font-weight:700; } .btn-link-crown{ border:0; background:transparent; color:var(--accent); font-size:12px; font-weight:600; padding:0; } .btn-link-crown:hover{ color:var(--accent-600); } .crown-menu-foot{ display:block; text-align:center; padding:.75rem; font-size:12.5px; font-weight:600; border-top:1px solid var(--border-soft); background:var(--surface-2); color:var(--accent); } .crown-menu-foot:hover{ background:var(--surface-2); color:var(--accent-600); } .crown-menu-item{ display:flex; align-items:center; gap:.65rem; padding:.7rem 1rem; font-size:13.5px; font-weight:500; color:var(--text); } .crown-menu-item:hover{ background:rgba(10,42,48,.07); color:var(--text); } body.theme-dark .crown-menu-item:hover{ background:rgba(228,238,240,.07); } .crown-menu-item.danger{ color:var(--toast-danger-accent); } .crown-menu-sep{ height:1px; background:var(--border-soft); margin:.25rem 0; } /* notifications */ .notif-dot{ position:absolute; top:7px; right:8px; width:9px; height:9px; border-radius:999px; background:var(--toast-danger-accent); border:2px solid var(--surface); } .notif-menu{ width:340px; max-width:calc(100vw - 1.5rem); } .notif-list{ max-height:340px; overflow:auto; } .notif-item{ display:flex; align-items:flex-start; gap:.7rem; padding:.8rem 1rem; border-bottom:1px solid var(--border-soft); color:var(--text); } .notif-item:last-child{ border-bottom:0; } .notif-item:hover{ background:rgba(10,42,48,.06); color:var(--text); } body.theme-dark .notif-item:hover{ background:rgba(228,238,240,.06); } .notif-item.read{ opacity:.55; } .notif-icon{ width:32px; height:32px; flex:none; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--sage-100); color:var(--sage-700); } .notif-icon.warn{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .notif-icon.warn{ color:var(--accent); } .notif-icon.danger{ background:var(--toast-danger-bg); color:var(--toast-danger-accent); } .notif-text{ display:flex; flex-direction:column; min-width:0; flex:1; } .notif-title{ font-size:13px; font-weight:600; line-height:1.35; } .notif-sub{ font-size:12px; color:var(--muted); line-height:1.35; } .notif-time{ font-size:11px; color:var(--faint); flex:none; } /* account menu */ .account-btn{ border:0; padding:0; } .account-head{ display:flex; gap:.7rem; padding:1rem; border-bottom:1px solid var(--border-soft); } .account-head > span:last-child{ display:flex; flex-direction:column; min-width:0; } .account-name{ font-size:13.5px; font-weight:700; } .account-mail{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; } .account-head .pill{ align-self:flex-start; } .page{ padding:1.4rem 1.25rem 6rem; } /* bottom tab bar (mobile) — 4 items: Home, Subscribers, Collections, More */ .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:1030; display:none; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--surface); border-top:1px solid var(--border-soft); padding:.6rem .5rem calc(.9rem + env(safe-area-inset-bottom)); } .tabbar a{ display:flex; flex-direction:column; align-items:center; gap:.25rem; font-size:10.5px; font-weight:600; color:var(--muted); } .tabbar a.active{ color:var(--accent); } .tabbar-more-sheet{ background:var(--surface); border-radius:20px 20px 0 0; padding:1rem 1.1rem 1.5rem; } .tabbar-more-sheet .handle{ width:36px; height:4px; background:var(--border); border-radius:2px; margin:0 auto .9rem; } @media (max-width: 991.98px){ .sidebar{ display:none; } .tabbar{ display:grid; } .page{ padding:1rem .9rem 6.5rem; } .topbar{ padding:.75rem .9rem; } } /* ---------- KPI strip ---------- */ .kpi-strip{ display:grid; grid-template-columns:repeat(4,1fr); } .kpi{ padding:0 1.35rem; border-right:1px solid var(--border-soft); } .kpi:last-child{ border-right:0; } .kpi .kpi-value{ font-size:2rem; font-weight:700; line-height:1.1; margin-top:.5rem; white-space:nowrap; } .kpi .kpi-value .cur{ font-size:.85rem; font-weight:600; color:var(--muted); margin-right:.15rem; } @media (max-width: 1399.98px){ .kpi .kpi-value{ font-size:1.7rem; } } .kpi .kpi-rule{ height:3px; border-radius:999px; background:var(--accent); margin-top:.5rem; } .kpi .kpi-rule.ok{ background:var(--sage); } @media (max-width: 767.98px){ .kpi-strip{ grid-template-columns:1fr 1fr; gap:1rem 0; } .kpi{ border-right:0; padding:0 1rem; } } /* ---------- work queue ---------- */ .queue-item{ display:flex; align-items:center; gap:.9rem; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:.9rem 1rem; } .queue-item.is-top{ border-color:var(--accent); } .queue-rank{ width:34px; height:34px; flex:none; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; background:rgba(10,42,48,.1); color:var(--muted); } body.theme-dark .queue-rank{ background:rgba(228,238,240,.1); } .queue-item.is-top .queue-rank{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .queue-item.is-top .queue-rank{ color:var(--accent); } /* ---------- avatars ---------- */ .avatar{ width:42px; height:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex:none; background:var(--accent-100); color:var(--accent-700); } body.theme-dark .avatar{ color:var(--accent); } .avatar.warm{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .avatar.warm{ color:var(--sage); } .avatar.mute{ background:rgba(10,42,48,.12); color:var(--muted); } body.theme-dark .avatar.mute{ background:rgba(228,238,240,.12); } .avatar.sage{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .avatar.sage{ color:var(--sage); } .avatar.sm{ width:32px; height:32px; font-size:12px; } .avatar.lg{ width:60px; height:60px; font-size:20px; } /* ---------- tables ---------- */ .table-crown{ width:100%; border-collapse:separate; border-spacing:0; } .table-crown thead th{ background:var(--surface-2); color:var(--accent-700); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.8rem 1.1rem; border:0; white-space:nowrap; } body.theme-dark .table-crown thead th{ color:var(--accent); } .table-crown tbody td{ padding:.9rem 1.1rem; border-bottom:1px solid var(--border-soft); font-size:13.5px; vertical-align:middle; } .table-crown tbody tr:last-child td{ border-bottom:0; } .table-crown tbody tr{ cursor:pointer; } .table-crown tbody tr:hover td{ background:rgba(10,42,48,.05); } body.theme-dark .table-crown tbody tr:hover td{ background:rgba(228,238,240,.05); } .table-wrap{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); overflow:visible; /* row dropdowns must escape */ } .table-wrap > table{ border-radius:inherit; } .table-wrap > table thead th:first-child{ border-top-left-radius:inherit; } .table-wrap > table thead th:last-child{ border-top-right-radius:inherit; } .table-wrap > table tbody tr:last-child td:first-child{ border-bottom-left-radius:inherit; } .table-wrap > table tbody tr:last-child td:last-child{ border-bottom-right-radius:inherit; } /* bulk selection mode */ .table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; } .table-toolbar.is-selecting{ background:#0a2a30; color:#fff; } body.theme-dark .table-toolbar.is-selecting{ background:#081619; } .table-toolbar.is-selecting .clear-sel{ color:var(--accent-200); font-size:12.5px; cursor:pointer; } .table-toolbar .sel-actions{ display:flex; gap:.5rem; } .table-toolbar .sel-actions .btn{ background:rgba(255,255,255,.1); color:#fff; border:0; } .table-toolbar .sel-actions .btn.danger{ background:var(--toast-danger-accent); } .table-search{ display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px; padding:.4rem .7rem; } .table-search input{ border:0; background:transparent; outline:none; font-size:12.5px; color:var(--text); flex:1; } /* ---------- charts ---------- */ .bar-track{ height:9px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .bar-fill{ height:100%; border-radius:999px; background:var(--accent); } .bar-fill.ok{ background:var(--sage); } .col-chart{ display:flex; align-items:flex-end; gap:.7rem; height:170px; } .col-chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:.45rem; height:100%; justify-content:flex-end; } .col-chart .col .bar{ width:100%; background:var(--accent-100); border-radius:10px 10px 4px 4px; } .col-chart .col.is-accent .bar{ background:var(--accent); } .col-chart .col small{ color:var(--muted); font-size:11px; font-weight:600; } .heat-cell{ height:18px; border-radius:4px; background:var(--surface-2); } .donut-legend span.dot{ width:10px; height:10px; border-radius:999px; display:inline-block; } /* ---------- landing ---------- */ .feature-icon{ width:46px; height:46px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-100); color:var(--accent-700); } body.theme-dark .feature-icon{ color:var(--accent); } .feature-icon.sage{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .feature-icon.sage{ color:var(--sage); } /* ---------- misc ---------- */ .fab{ position:fixed; right:1rem; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + .75rem); z-index:1040; box-shadow:var(--shadow-lg); } @media (min-width:992px){ .fab{ display:none!important; } } .offcanvas{ background:var(--surface); color:var(--text); } .modal-content{ background:var(--surface); color:var(--text); border-radius:var(--r-xl); border:1px solid var(--border-soft); } .divider{ height:1px; background:var(--border-soft); } .icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; flex:none; } .icon-sm{ width:16px; height:16px; } /* ---------- chart tooltips & interactive charts (v2) ---------- */ .crown-tip{ position:fixed; z-index:2000; pointer-events:none; opacity:0; transform:translate(-50%,-120%); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px; padding:.7rem .85rem; font-size:12px; font-weight:600; line-height:1.35; white-space:nowrap; min-width:150px; box-shadow:var(--shadow-lg); transition:opacity .12s ease; } .crown-tip.show{ opacity:1; } .crown-tip .tip-sub{ display:block; font-weight:500; opacity:.75; font-size:11px; } .crown-tip .tip-title{ display:block; font-size:12px; font-weight:700; margin-bottom:.4rem; } .crown-tip .tip-row{ display:flex; align-items:center; gap:.5rem; font-size:12px; margin-top:.2rem; } .crown-tip .tip-dot{ width:9px; height:9px; border-radius:999px; flex:none; } .crown-tip .tip-name{ color:var(--muted); font-weight:500; } .crown-tip .tip-val{ margin-left:auto; font-weight:700; padding-left:1rem; } [data-tip]{ cursor:pointer; } .chart svg{ display:block; width:100%; overflow:visible; } .chart .hit{ fill:transparent; cursor:crosshair; } .chart .dot{ opacity:0; transition:opacity .12s ease; } .chart .dot.on{ opacity:1; } .chart .guide{ opacity:0; } .chart .guide.on{ opacity:1; } .col-chart .col{ cursor:pointer; } .col-chart .col .bar{ transition:filter .12s ease; } .col-chart .col:hover .bar{ filter:brightness(1.08); } .bar-track[data-tip]:hover .bar-fill{ filter:brightness(1.08); } .heat-cell[data-tip]:hover{ outline:2px solid var(--accent); outline-offset:1px; } .donut circle[data-tip]{ transition:stroke-width .12s ease; } .donut circle[data-tip]:hover{ stroke-width:22; } .tip-total{ border-top:1px solid var(--border-soft); margin-top:.25rem; padding-top:.3rem; } /* ---------- landing extras ---------- */ .landing-nav{ position:sticky; top:0; z-index:1030; background:var(--bg); border-bottom:1px solid var(--border-soft); } .hero-stat{ font-size:1.6rem; font-weight:700; line-height:1.1; } .logo-chip{ border:1px solid var(--border); border-radius:12px; padding:.7rem 1.1rem; color:var(--muted); font-weight:600; font-size:13px; letter-spacing:.04em; } .step-num{ width:34px; height:34px; border-radius:999px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; } .price-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-xl); padding:1.75rem; height:100%; display:flex; flex-direction:column; } .price-card.featured{ border-color:var(--accent); box-shadow:var(--shadow-md); } .check-li{ display:flex; gap:.6rem; align-items:flex-start; font-size:14.5px; margin-bottom:.5rem; } .check-li .tick{ color:var(--sage-700); font-weight:700; } body.theme-dark .check-li .tick{ color:var(--sage); } .quote-card{ background:var(--surface-2); border-radius:var(--r-xl); padding:1.75rem; height:100%; } .accordion-crown .accordion-item{ background:transparent; border:0; border-bottom:1px solid var(--border-soft); } .accordion-crown .accordion-button{ background:transparent; color:var(--text); font-weight:600; padding:1.1rem 0; box-shadow:none; } .accordion-crown .accordion-button:not(.collapsed){ color:var(--accent-700); } body.theme-dark .accordion-crown .accordion-button:not(.collapsed){ color:var(--accent); } .accordion-crown .accordion-body{ color:var(--muted); padding:0 0 1.1rem; font-size:14.5px; } .cta-band{ background:var(--accent); color:#fff; border-radius:var(--r-xl); padding:2.5rem; } .cta-band .btn{ background:#fff; color:var(--accent-700); } .footer-col h6{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; } .footer-col a{ display:block; color:var(--text); font-size:14px; margin-bottom:.45rem; } .footer-col a:hover{ color:var(--accent); } /* ---------- auth ---------- */ .auth-wrap{ min-height:100vh; display:flex; } .auth-aside{ flex:1; background:#0a2a30; color:#fff; padding:3rem; display:none; flex-direction:column; } body.theme-dark .auth-aside{ background:#081619; } @media (min-width:992px){ .auth-aside{ display:flex; } } .auth-aside .brand, .auth-aside h1, .auth-aside p{ color:#fff; } .auth-aside .form-label{ color:rgba(255,255,255,.75); } .auth-aside .form-control{ background:rgba(255,255,255,.08); border-color:transparent; color:#fff; } .auth-aside .form-control::placeholder{ color:rgba(255,255,255,.4); } .auth-main{ flex:1; display:flex; align-items:center; justify-content:center; padding:1.5rem; } .auth-card{ width:100%; max-width:430px; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:2rem; } .auth-tabs{ display:flex; gap:.35rem; background:var(--surface-2); border-radius:999px; padding:.28rem; margin-bottom:1.25rem; } .auth-tabs button{ flex:1; border:0; background:transparent; border-radius:999px; padding:.6rem; font-size:13px; font-weight:600; color:var(--muted); } .auth-tabs button.active{ background:var(--accent); color:#fff; } .input-icon{ position:relative; } .input-icon .icon{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:var(--muted); } .input-icon .form-control{ padding-left:2.75rem; } .input-icon .form-control[type=password],.input-icon .form-control#pw{ padding-right:3.25rem; } .input-icon .toggle-pw{ position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:36px; height:36px; border:0; border-radius:999px; background:transparent; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; padding:0; } .input-icon .toggle-pw:hover{ background:rgba(10,42,48,.1); color:var(--text); } body.theme-dark .input-icon .toggle-pw:hover{ background:rgba(228,238,240,.1); } .input-icon .toggle-pw:active{ background:rgba(10,42,48,.18); } .divider-text{ display:flex; align-items:center; gap:.75rem; color:var(--faint); font-size:12px; margin:1.1rem 0; } .divider-text:before,.divider-text:after{ content:""; flex:1; height:1px; background:var(--border-soft); } /* ---------- uptime strip ---------- */ .uptime-strip{ display:flex; gap:2px; align-items:stretch; height:54px; } .uptime-bar{ flex:1; border-radius:3px; min-width:2px; transition:transform .1s ease; } .uptime-bar:hover{ transform:scaleY(1.06); } .uptime-axis{ display:flex; margin-top:.5rem; } .uptime-axis span{ flex:1; text-align:center; font-size:11px; color:var(--faint); font-weight:500; } .uptime-legend{ display:flex; gap:1.1rem; margin-top:.9rem; font-size:12px; color:var(--muted); } .uptime-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:.4rem; } /* ---------- range switcher / metric rows ---------- */ .range-switch{ display:inline-flex; gap:.2rem; background:var(--surface-2); border-radius:999px; padding:.25rem; } .range-switch button{ border:0; background:transparent; border-radius:999px; padding:.4rem .9rem; font-size:12.5px; font-weight:600; color:var(--muted); } .range-switch button.active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); } .metric-row{ padding:.85rem 0; border-bottom:1px solid var(--border-soft); } .metric-row:last-child{ border-bottom:0; } .metric-row .metric-head{ display:flex; align-items:center; gap:.6rem; font-size:14px; font-weight:600; } .metric-row .metric-head .val{ margin-left:auto; } .metric-row .bar-track{ height:6px; margin-top:.5rem; } .incident{ display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--border-soft); } .incident:last-child{ border-bottom:0; } /* ---------- pricing ---------- */ .price-panel{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); overflow:hidden; } .price-head{ display:flex; } .price-cell{ flex:1; padding:2rem; text-align:center; } .price-cell + .price-cell{ border-left:1px solid var(--border-soft); } .price-figure{ font-size:2.6rem; font-weight:700; line-height:1; letter-spacing:-.025em; } .price-caption{ color:var(--muted); font-size:14px; margin-top:.5rem; } .price-body{ padding:1.5rem 2rem; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); } .price-body .check-li{ margin-bottom:.65rem; } .price-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 2rem; background:var(--surface-2); } .price-estimate{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-top:1.25rem; font-size:14px; } .price-estimate input{ width:7.5rem; background:transparent; color:var(--text); border:0; border-bottom:2px solid var(--accent); border-radius:0; padding:.15rem .25rem; font:600 14px/1.4 Poppins; text-align:center; } .price-estimate input:focus{ outline:none; background:var(--accent-100); } .price-estimate strong{ font-size:16px; } @media (max-width: 575.98px){ .price-head{ display:block; } .price-cell + .price-cell{ border-left:0; border-top:1px solid var(--border-soft); } .price-cell,.price-body,.price-foot{ padding:1.5rem; } } /* ---------- hero product art ---------- */ .hero-art{ position:relative; padding:1.5rem 0 6.5rem 0; } .hero-art:before{ content:""; position:absolute; inset:-6% -12% 12% 6%; z-index:0; background:radial-gradient(60% 60% at 60% 40%, var(--accent-100) 0%, transparent 70%); border-radius:50%; } .hero-win{ position:relative; z-index:1; background:var(--surface); border:1px solid var(--border-soft); border-radius:18px; box-shadow:0 24px 50px rgba(10,42,48,.18); overflow:hidden; } body.theme-dark .hero-win{ box-shadow:0 24px 50px rgba(0,0,0,.5); } .hero-win-bar{ display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; background:var(--surface-2); border-bottom:1px solid var(--border-soft); } .hero-win-bar .dot{ width:9px; height:9px; border-radius:999px; background:var(--border); } .hero-win-bar .dot:first-child{ background:var(--accent-200); } .hero-url{ margin-left:.6rem; font-size:10.5px; color:var(--muted); background:var(--bg); border-radius:999px; padding:.2rem .7rem; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; } .hero-win-body{ padding:1.1rem 1.2rem 1.3rem; } .hero-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem; } .hero-kpi-label{ font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .hero-kpi-value{ font-size:19px; font-weight:700; line-height:1.2; margin-top:.15rem; } .hero-kpi-rule{ height:3px; width:34px; border-radius:999px; background:var(--accent); margin-top:.35rem; } .hero-kpi-rule.ok{ background:var(--sage); } .hero-chart-wrap{ background:var(--bg); border-radius:12px; padding:.7rem .8rem; } .hero-phone{ position:absolute; z-index:2; left:-2.5rem; bottom:0; width:180px; background:var(--surface); border:1px solid var(--border-soft); border-radius:22px; box-shadow:0 18px 40px rgba(10,42,48,.2); } body.theme-dark .hero-phone{ box-shadow:0 18px 40px rgba(0,0,0,.55); } .hero-phone:before{ content:""; display:block; width:44px; height:4px; border-radius:999px; background:var(--border); margin:.55rem auto 0; } .hero-phone-body{ padding:.75rem .8rem 1rem; } .hero-task{ display:flex; gap:.5rem; align-items:flex-start; margin-bottom:.6rem; } .hero-task-rank{ width:20px; height:20px; flex:none; border-radius:7px; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-100); color:var(--accent-700); } body.theme-dark .hero-task-rank{ color:var(--accent); } .hero-task-rank.mute{ background:rgba(10,42,48,.1); color:var(--muted); } body.theme-dark .hero-task-rank.mute{ background:rgba(228,238,240,.1); } .hero-task-title{ font-size:11.5px; font-weight:600; line-height:1.3; } .hero-task-sub{ font-size:10px; color:var(--muted); line-height:1.35; } .hero-toast{ position:absolute; z-index:3; right:-.5rem; bottom:3.4rem; display:flex; align-items:center; gap:.55rem; background:var(--surface); border:1px solid var(--border-soft); border-radius:14px; padding:.6rem .8rem; box-shadow:0 12px 28px rgba(10,42,48,.16); font-size:11px; } body.theme-dark .hero-toast{ box-shadow:0 12px 28px rgba(0,0,0,.5); } .hero-toast strong{ font-size:11.5px; } .hero-toast-dot{ width:9px; height:9px; border-radius:999px; background:var(--sage); flex:none; box-shadow:0 0 0 0 rgba(31,156,107,.55); animation:heroPulse 2.4s infinite; } @keyframes heroPulse{ 0%{ box-shadow:0 0 0 0 rgba(31,156,107,.5); } 70%{ box-shadow:0 0 0 8px rgba(31,156,107,0); } 100%{ box-shadow:0 0 0 0 rgba(31,156,107,0); } } @media (max-width: 991.98px){ .hero-art{ padding-bottom:3.5rem; margin-top:2rem; } .hero-phone{ width:158px; left:-.5rem; } .hero-toast{ right:0; bottom:1.2rem; } } @media (max-width: 575.98px){ .hero-phone,.hero-toast{ display:none; } .hero-art{ padding-bottom:0; } } /* ---------- sign-up ---------- */ .form-hint{ font-size:12.5px; color:var(--muted); margin-top:.4rem; } .step-track{ display:flex; align-items:center; gap:.75rem; } .step-dot{ display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:12.5px; font-weight:600; } .step-dot span{ width:26px; height:26px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--muted); font-size:12px; font-weight:700; } .step-dot.active span{ background:var(--accent); color:#fff; } .step-dot.done span{ background:var(--sage); color:#fff; } .step-line{ flex:1; height:2px; background:var(--border-soft); border-radius:999px; } .pw-meter{ height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; } .pw-meter span{ display:block; height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .2s ease, background .2s ease; } .otp{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5rem; } .otp-box{ width:100%; min-width:0; padding:0; height:56px; text-align:center; font:700 20px/1 Poppins; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:14px; } .otp-box:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-100); } .otp-box.filled{ border-color:var(--accent); } @media (max-width: 420px){ .otp{ gap:.35rem; } .otp-box{ height:48px; font-size:17px; } } .su-progress { display: flex; gap: .4rem; } .su-step { height: 3px; flex: 1; border-radius: 2px; background: var(--border-soft); transition: background .25s ease; } .su-step.active, .su-step.done { background: var(--accent); } .su-step.done { opacity: .45; } /* ---------- bar charts ---------- */ .chart-bars .bar-hit{ fill:transparent; } .chart-bars .bar-seg{ transition:opacity .12s ease; } .chart-bars .bar-seg.dim{ opacity:.32; } /* ---------- revenue stream cards ---------- */ .stream{ display:flex; flex-direction:column; gap:.9rem; height:100%; padding:1.25rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border-soft); box-shadow:var(--shadow-sm); } .stream-head{ display:flex; align-items:center; gap:.65rem; } .stream-ico{ width:38px; height:38px; flex:none; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-100); color:var(--accent-700); } .stream-ico.sage{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .stream-ico{ color:var(--accent); } body.theme-dark .stream-ico.sage{ color:var(--sage); } .stream-name{ font-size:14px; font-weight:700; } .stream-sub{ font-size:11.5px; color:var(--muted); } .stream-figs{ display:flex; gap:1.75rem; } .stream-fig .lbl{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .stream-fig .val{ font-size:1.45rem; font-weight:700; line-height:1.15; margin-top:.15rem; } .stream-fig .delta{ font-size:11.5px; font-weight:600; } .stream-fig .delta.up{ color:var(--sage-700); } .stream-fig .delta.down{ color:var(--toast-danger-accent); } body.theme-dark .stream-fig .delta.up{ color:var(--sage); } /* mix bar */ .mix-bar{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--surface-2); } .mix-bar span{ display:block; } .mix-legend{ display:flex; flex-wrap:wrap; gap:1rem; font-size:12px; color:var(--muted); } .mix-legend b{ color:var(--text); } /* movement row */ .move-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:.65rem; } .move-cell{ background:var(--surface-2); border-radius:var(--r-md); padding:.85rem .9rem; } .move-cell .v{ font-size:1.3rem; font-weight:700; line-height:1.1; } .move-cell .k{ font-size:11px; color:var(--muted); } @media (max-width: 575.98px){ .stream-figs{ gap:1.25rem; } } /* ---------- scope / filter bar ---------- */ .filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; } .scope-btn{ display:flex; align-items:center; gap:.6rem; padding:.5rem .85rem .5rem .6rem; background:var(--surface); border:1px solid var(--border); border-radius:999px; color:var(--text); text-align:left; } .scope-btn:hover{ border-color:var(--accent); } .scope-btn[aria-expanded="true"]{ border-color:var(--accent); } .scope-ico{ width:30px; height:30px; flex:none; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-100); color:var(--accent-700); } body.theme-dark .scope-ico{ color:var(--accent); } .scope-text{ display:flex; flex-direction:column; line-height:1.15; } .scope-lbl{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .scope-val{ font-size:13.5px; font-weight:600; } .scope-caret{ color:var(--muted); } .scope-menu{ width:330px; max-width:calc(100vw - 1.5rem); } .scope-item{ display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; color:var(--text); } .scope-item:hover{ background:rgba(10,42,48,.07); color:var(--text); } body.theme-dark .scope-item:hover{ background:rgba(228,238,240,.07); } .scope-item.active{ background:var(--accent-100); } .scope-check{ width:14px; font-size:12px; font-weight:700; color:var(--accent); opacity:0; flex:none; } .scope-item.active .scope-check{ opacity:1; } .scope-item-text{ display:flex; flex-direction:column; flex:1; min-width:0; } .scope-item-name{ font-size:13.5px; font-weight:600; } .scope-item-sub{ font-size:11.5px; color:var(--muted); } .dot-ok,.dot-down{ width:9px; height:9px; border-radius:999px; flex:none; background:var(--sage); } .dot-down{ background:var(--toast-danger-accent); } .scope-note{ font-size:12px; color:var(--faint); } @media (max-width: 767.98px){ .scope-note{ display:none; } .filter-bar .dropdown{ flex:1 1 100%; } .scope-btn{ width:100%; } } /* ---------- connection type tags ---------- */ .tag-type{ display:inline-block; padding:.3rem .6rem; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.03em; white-space:nowrap; } .type-pppoe{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .type-pppoe{ color:var(--accent); } .type-hotspot{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .type-hotspot{ color:var(--sage); } .type-static{ background:var(--toast-warning-bg); color:#8a4a17; } body.theme-dark .type-static{ color:#e2a13a; } .cust-cell{ display:flex; flex-direction:column; line-height:1.25; min-width:0; } .cust-ident{ font-size:11.5px; color:var(--muted); } .table-crown td.nowrap, .table-crown th.nowrap{ white-space:nowrap; } .empty-rows{ padding:2.5rem 1rem; text-align:center; color:var(--muted); font-size:14px; } /* ---------- counts inside filter pills ---------- */ .pill-count{ display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border-radius:999px; background:rgba(10,42,48,.12); color:var(--muted); font-size:11px; font-weight:700; line-height:1.5; } body.theme-dark .pill-count{ background:rgba(228,238,240,.12); } .filter-pill.active .pill-count{ background:var(--accent-700); color:#fff; } body.theme-dark .filter-pill.active .pill-count{ background:rgba(6,23,26,.55); color:#e4eef0; } /* two-line menu items */ .menu-item-text{ display:flex; flex-direction:column; line-height:1.3; } .menu-item-sub{ font-size:11.5px; color:var(--muted); font-weight:500; } /* ---------- SMS history ---------- */ .sms-row{ display:flex; gap:.9rem; padding:1rem 1.1rem; } .sms-tag{ flex:none; align-self:flex-start; padding:.3rem .6rem; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .tag-reminder{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .tag-reminder{ color:var(--accent); } .tag-receipt{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .tag-receipt{ color:var(--sage); } .tag-notice{ background:var(--toast-warning-bg); color:#8a4a17; } body.theme-dark .tag-notice{ color:#e2a13a; } .tag-manual{ background:var(--surface-2); color:var(--muted); border:1px solid var(--border); } .tag-welcome{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .tag-welcome{ color:var(--sage); } .sms-body{ min-width:0; } .sms-text{ font-size:13.5px; line-height:1.5; text-wrap:pretty; } .sms-meta{ font-size:12px; color:var(--muted); margin-top:.3rem; } /* ---------- resource meters on router cards ---------- */ .meter-grid{ display:flex; flex-direction:column; gap:.8rem; } .meter-head{ display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; font-weight:600; margin-bottom:.35rem; } .meter-val{ font-variant-numeric:tabular-nums; } .meter-sub{ font-size:12px; color:var(--muted); margin-top:.3rem; } /* ---------- underline tab bar ---------- */ .tabs{ display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border-soft); margin-bottom:1.25rem; } .tabs::-webkit-scrollbar{ display:none; } .tab{ display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap; padding:.75rem 1rem; font-size:13.5px; font-weight:600; color:var(--muted); background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; } .tab:hover{ color:var(--text); } .tab.active{ color:var(--accent-700); border-bottom-color:var(--accent); } body.theme-dark .tab.active{ color:var(--accent); } .tab-count{ padding:.05rem .4rem; border-radius:999px; background:rgba(10,42,48,.12); color:var(--muted); font-size:11px; font-weight:700; } body.theme-dark .tab-count{ background:rgba(228,238,240,.12); } .tab.active .tab-count{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .tab.active .tab-count{ color:var(--accent); } /* ---------- key/value fact list ---------- */ .facts{ display:flex; flex-direction:column; } .fact{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; font-size:13px; border-bottom:1px solid var(--border-soft); } .fact:last-child{ border-bottom:0; } .fact .k{ color:var(--muted); } .fact .v{ font-weight:600; text-align:right; } /* ---------- log / event rows ---------- */ .log-row{ display:flex; gap:.85rem; padding:.85rem 1.1rem; align-items:flex-start; } .log-time{ font-size:11.5px; color:var(--muted); flex:none; width:92px; font-variant-numeric:tabular-nums; } .log-sev{ flex:none; padding:.2rem .5rem; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .sev-info{ background:rgba(10,42,48,.12); color:var(--muted); } body.theme-dark .sev-info{ background:rgba(228,238,240,.12); color:var(--text); } .sev-warn{ background:var(--accent-100); color:var(--accent-700); } body.theme-dark .sev-warn{ color:var(--accent); } .sev-ok{ background:var(--sage-100); color:var(--sage-700); } body.theme-dark .sev-ok{ color:var(--sage); } .log-text{ font-size:13px; min-width:0; } .log-text .who{ color:var(--muted); font-size:11.5px; } /* ---------- terminal output ---------- */ .term{ background:#081619; color:#d3eef0; border-radius:var(--r-md); padding:1rem 1.1rem; font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.65; overflow-x:auto; white-space:pre; } .term .ok{ color:#5ec8d6; } .term .dim{ color:#5f7378; } /* ---------- tool tiles ---------- */ .tool-tile{ display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; padding:.9rem 1rem; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--border-soft); color:var(--text); } .tool-tile:hover{ border-color:var(--accent); color:var(--text); } .tool-tile .ico{ width:34px; height:34px; flex:none; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-100); color:var(--accent-700); } body.theme-dark .tool-tile .ico{ color:var(--accent); } .tool-tile .t{ font-size:13.5px; font-weight:600; } .tool-tile .s{ font-size:11.5px; color:var(--muted); } /* ---------- empty state ---------- */ .empty-state{ text-align:center; padding:3rem 1.5rem; } .empty-state .ico{ width:56px; height:56px; margin:0 auto 1rem; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--accent-100); color:var(--accent-700); } body.theme-dark .empty-state .ico{ color:var(--accent); } .empty-state .empty-title{ font-size:15px; font-weight:600; margin:0 0 4px; } .empty-state .empty-sub{ font-size:13px; color:var(--muted); margin:0 0 1rem; } /* ---------- wizard stepper ---------- */ .stepper{ display:flex; align-items:flex-start; gap:0; margin-bottom:1.75rem; } .stepper .step{ display:flex; align-items:center; gap:.6rem; flex:none; } .stepper .line{ flex:1 1 auto; height:2px; background:var(--border); margin:1.05rem .75rem 0; border-radius:999px; min-width:24px; } .stepper .line.done{ background:var(--accent); } .step-num{ width:34px; height:34px; flex:none; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:var(--surface-2); color:var(--muted); border:1px solid var(--border); } .step.active .step-num{ background:var(--accent); color:#fff; border-color:var(--accent); } body.theme-dark .step.active .step-num{ color:#06171a; } .step.done .step-num{ background:var(--accent); color:#fff; border-color:transparent; } body.theme-dark .step.done .step-num{ color:#06171a; } .step-label{ display:flex; flex-direction:column; line-height:1.25; } .step-label .t{ font-size:13px; font-weight:600; color:var(--muted); } .step.active .step-label .t{ color:var(--text); } .step-label .s{ font-size:11.5px; color:var(--faint); } @media (max-width: 767.98px){ .step-label{ display:none; } .stepper .line{ margin-top:1.05rem; } } /* ---------- copyable command ---------- */ .cmd-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:#0a2a30; border-radius:var(--r-md) var(--r-md) 0 0; padding:.5rem .75rem .5rem 1.1rem; } .cmd-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8ea3a7; } .cmd-wrap .term{ border-radius:0 0 var(--r-md) var(--r-md); } .term-wrap{ white-space:pre-wrap; overflow-wrap:anywhere; } .btn-onterm{ background:rgba(228,238,240,.16); color:#d3eef0; border:1px solid rgba(228,238,240,.22); border-radius:999px; padding:.35rem .8rem; font-size:12px; font-weight:600; } .btn-onterm:hover{ background:rgba(228,238,240,.24); color:#fff; } /* ---------- polling status ---------- */ .poll{ display:flex; align-items:center; gap:.85rem; padding:1rem 1.1rem; border-radius:var(--r-md); background:var(--surface-2); } .poll-dot{ width:12px; height:12px; border-radius:999px; flex:none; background:var(--accent); animation:pollPulse 1.4s ease-in-out infinite; } .poll.is-done .poll-dot{ background:var(--sage); animation:none; } @keyframes pollPulse{ 0%,100%{ opacity:.35; transform:scale(.82); } 50%{ opacity:1; transform:scale(1.12); } } .poll-t{ font-size:13.5px; font-weight:600; } .poll-s{ font-size:12px; color:var(--muted); } /* ---------- import rows ---------- */ .imp-row{ display:flex; align-items:center; gap:.85rem; padding:.9rem 1.1rem; } .imp-check{ flex:none; } .imp-main{ flex:1 1 auto; min-width:0; } .imp-name{ font-size:13.5px; font-weight:600; } .imp-sub{ font-size:12px; color:var(--muted); } .imp-map{ flex:none; width:210px; } @media (max-width: 767.98px){ .imp-row{ flex-wrap:wrap; } .imp-map{ width:100%; } } /* completed step markers are navigable, future ones are not */ [data-wizard] .stepper .step.done{ cursor:pointer; } [data-wizard] .stepper .step.done:hover .step-num{ border-color:var(--accent); } .locked-note{ display:flex; align-items:center; gap:.6rem; font-size:12.5px; color:var(--muted); background:var(--surface-2); border-radius:999px; padding:.45rem .9rem; } .plan-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .65rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border-soft); font-size:11.5px; font-weight:600; } .plan-chip .mono{ color:var(--muted); font-weight:500; } /* ---------- per-profile plan definition ---------- */ .plan-def{ border-bottom:1px solid var(--border-soft); padding:1.1rem; } .plan-def:last-child{ border-bottom:0; } .plan-def.is-skipped{ background:var(--surface-2); } .plan-def .plan-off{ display:none; } .plan-def.is-skipped .plan-off{ display:inline-flex; } .plan-def.is-skipped .imp-name, .plan-def.is-skipped .imp-sub{ opacity:.7; } .plan-def .form-control:disabled, .plan-def .form-select:disabled{ opacity:.5; } .plan-def-head{ display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem; } .plan-def-head .imp-name{ font-size:13.5px; font-weight:700; } .plan-def-head .imp-sub{ font-size:12px; color:var(--muted); } .dur-group{ display:flex; gap:.4rem; } .plan-def .dur-group .form-control{ flex:0 0 4.2rem; padding:.55rem .5rem; text-align:center; } .plan-def .dur-group .form-select{ flex:1 1 auto; min-width:0; padding:.55rem 1.9rem .55rem .8rem; } .field-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; display:block; } .plan-def .form-control, .plan-def .form-select{ padding:.55rem .85rem; font-size:13.5px; } .field-hint{ font-size:11.5px; color:var(--muted); margin-top:.3rem; } .plan-def input[type="number"]{ appearance:textfield; -moz-appearance:textfield; } .plan-def input[type="number"]::-webkit-outer-spin-button, .plan-def input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } /* ---------- editable import rows ---------- */ .imp-edit{ align-items:flex-start; padding:1rem 1.1rem; } .imp-edit .imp-check{ margin-top:1.55rem; } .imp-edit .form-control, .imp-edit .form-select{ padding:.5rem .85rem; font-size:13.5px; } .imp-edit.is-blocked{ background:var(--surface-2); } .imp-edit.is-blocked .form-control, .imp-edit.is-blocked .form-select{ opacity:.5; } /* ---------- visibility switch ---------- */ .vis-switch{ display:flex; gap:.3rem; background:var(--surface-2); border-radius:999px; padding:.22rem; } .vis-opt{ flex:1 1 0; min-width:0; border:0; background:transparent; border-radius:999px; padding:.4rem .4rem; font-size:11.5px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; } .vis-opt.active{ background:var(--accent); color:#fff; } body.theme-dark .vis-opt.active{ color:#06171a; } .vis-opt.active.is-hidden{ background:var(--muted); color:#fff; } .speed-group{ display:flex; gap:.4rem; align-items:center; } .speed-group .form-control{ flex:1 1 0; min-width:0; text-align:center; } .speed-sep{ font-size:12px; color:var(--muted); flex:none; } /* ---------- bulk import grid (built for hundreds of rows) ---------- */ .imp-grid{ width:100%; } .imp-gr{ display:grid; align-items:center; gap:.5rem; grid-template-columns:30px minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1.4fr) 132px 104px; padding:.5rem .9rem; border-bottom:1px solid var(--border-soft); } .imp-gr:last-child{ border-bottom:0; } .imp-gr.imp-hd{ background:var(--surface-2); border-bottom:1px solid var(--border); font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:.65rem; padding-bottom:.65rem; } .imp-gr .form-control, .imp-gr .form-select{ padding:.45rem .75rem; font-size:13px; border-radius:10px; } .imp-gr .form-control[type="date"]{ padding-right:.5rem; } .imp-gr .cell-sub{ font-size:11px; color:var(--muted); margin-top:.15rem; } .imp-gr.is-off{ background:var(--surface-2); } .imp-gr.is-off .form-control, .imp-gr.is-off .form-select{ opacity:.45; } .imp-gr.is-flag{ box-shadow:inset 3px 0 0 var(--accent); } .imp-gr:hover:not(.imp-hd){ background:rgba(10,42,48,.04); } body.theme-dark .imp-gr:hover:not(.imp-hd){ background:rgba(228,238,240,.04); } @media (max-width: 991.98px){ .imp-gr{ grid-template-columns:26px minmax(0,1fr) minmax(0,1fr); row-gap:.4rem; } .imp-gr.imp-hd{ display:none; } .imp-gr > *:nth-child(4){ grid-column:2 / -1; } .imp-gr > *:nth-child(5){ grid-column:2; } .imp-gr > *:nth-child(6){ grid-column:3; text-align:right; } } /* issue triage */ .triage{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; } @media (max-width: 767.98px){ .triage{ grid-template-columns:1fr 1fr; } } .tri{ text-align:left; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-md); padding:.85rem .95rem; color:var(--text); } .tri:hover{ border-color:var(--accent); color:var(--text); } .tri.is-on{ border-color:var(--accent); background:var(--accent-100); } .tri .n{ font-size:1.35rem; font-weight:700; line-height:1.1; } .tri .l{ font-size:11.5px; color:var(--muted); } .tri.warn .n{ color:var(--accent-700); } body.theme-dark .tri.warn .n{ color:var(--accent); } .tri.ok .n{ color:var(--sage-700); } body.theme-dark .tri.ok .n{ color:var(--sage); } /* pager */ .pager{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding-top:.9rem; font-size:13px; } .pager .form-select{ width:auto; padding:.4rem 2rem .4rem .8rem; font-size:12.5px; } .pg{ border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:999px; padding:.3rem .7rem; font-size:12.5px; font-weight:600; } .pg.on{ background:var(--accent); border-color:var(--accent); color:#fff; } body.theme-dark .pg.on{ color:#06171a; } /* ---------- phase save state ---------- */ .saved-strip{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; background:var(--sage-100); border-radius:var(--r-md); padding:.7rem 1rem; font-size:13px; } .saved-strip .tick{ width:22px; height:22px; flex:none; border-radius:999px; background:var(--sage); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } .db-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .7rem; border-radius:999px; background:var(--surface); border:1px solid var(--border-soft); font-size:11.5px; font-weight:600; } .db-chip .mono{ color:var(--muted); font-weight:500; } .phase-note{ font-size:12.5px; color:var(--muted); } .sum-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); overflow:hidden; } .sum-head{ display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--border-soft); } .sum-head .tick{ width:20px; height:20px; flex:none; border-radius:999px; background:var(--sage); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; } .sum-head .t{ font-size:13.5px; font-weight:700; } .sum-head .n{ margin-left:auto; font-size:12px; color:var(--muted); } /* compact visibility switch inside table rows */ .vis-switch.vis-sm{ padding:.18rem; width:max-content; } .vis-switch.vis-sm .vis-opt{ padding:.28rem .6rem; font-size:11px; } /* ---- toasts (top-right stack, full tinted background, real title) -------- */ .toast-container { z-index: 1090; max-width: min(340px, calc(100vw - 2rem)); top: 1rem; right: 1rem; } .crown-toast { position: relative; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 12px; box-shadow: 0 10px 28px rgba(10,42,48,.14); font-size: 13.5px; width: auto; } .crown-toast .toast-body { display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .9rem; } .crown-toast-title{ font-size:13px; font-weight:600; margin:0; } .crown-toast-text { flex: 1; line-height: 1.4; font-weight: 500; margin-top:2px; } .crown-toast-icon { width: 22px; height: 22px; flex: 0 0 auto; margin-top: .05rem; display: grid; place-items: center; border-radius: 50%; } .crown-toast-icon svg { width: 13px; height: 13px; display: block; } .crown-toast-icon svg path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } /* success */ .crown-toast-success { background: var(--toast-success-bg); color: var(--toast-fg); } .crown-toast-success .crown-toast-icon { background: transparent; color: var(--sage-700); } body.theme-dark .crown-toast-success .crown-toast-icon{ color: var(--sage); } .crown-toast-success .crown-toast-icon svg path{ stroke: currentColor; } /* error */ .crown-toast-danger { background: var(--toast-danger-bg); color: var(--toast-fg); } .crown-toast-danger .crown-toast-icon { background: transparent; color: var(--toast-danger-accent); } .crown-toast-danger .crown-toast-icon svg path{ stroke: currentColor; } /* warning */ .crown-toast-warning { background: var(--toast-warning-bg); color: var(--toast-fg); } .crown-toast-warning .crown-toast-icon { background: transparent; color: #8a4a17; } body.theme-dark .crown-toast-warning .crown-toast-icon{ color: #e2a13a; } .crown-toast-warning .crown-toast-icon svg path{ stroke: currentColor; } /* info */ .crown-toast-info { background: var(--toast-info-bg); color: var(--toast-fg); } .crown-toast-info .crown-toast-icon { background: transparent; color: var(--accent-700); } body.theme-dark .crown-toast-info .crown-toast-icon{ color: var(--accent); } .crown-toast-info .crown-toast-icon svg path{ stroke: currentColor; } .crown-toast .btn-close { --bs-btn-close-opacity: .4; font-size: .7rem; margin-top: .2rem; } .crown-toast .btn-close:hover { --bs-btn-close-opacity: .75; } @media (max-width: 575.98px) { .toast-container { left: 0; right: 0; top: 0; max-width: none; border-radius: 0; } .crown-toast { width: 100%; border-radius: 0; } } .form-check-input:indeterminate { background-color: var(--accent); border-color: var(--accent); } .perm-group { border: 1px solid var(--border-soft); border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: .85rem; } .perm-group-head { display: flex; align-items: center; gap: .65rem; padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--border-soft); cursor: pointer; } .perm-row { display: flex; align-items: center; gap: .65rem; padding: .5rem .6rem; border-radius: 10px; font-size: 14px; cursor: pointer; } .perm-row:hover { background: rgba(10,42,48,.05); } body.theme-dark .perm-row:hover{ background: rgba(228,238,240,.05); } .perm-row:has(input:checked) { background: var(--accent-100); } /* ---------- confirm dialog ---------- */ .confirm-icon { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--toast-danger-bg); } .confirm-icon.neutral{ background: var(--accent-100); } .confirm-icon svg { width: 20px; height: 20px; } .confirm-icon svg path { fill: none; stroke: var(--toast-danger-accent); stroke-width: 2.4; stroke-linecap: round; } .confirm-icon.neutral svg path{ stroke: var(--accent-700); } body.theme-dark .confirm-icon.neutral svg path{ stroke: var(--accent); } .btn-danger-crown { background: var(--toast-danger-accent); border-color: var(--toast-danger-accent); color: #fff; } .btn-danger-crown:hover { filter: brightness(.93); color: #fff; } .nav-item-c.disabled { opacity: .38; cursor: default; pointer-events: none; } .nav-drawer-body .sidebar { display: flex !important; width: 100%; height: 100%; border: 0; position: static; } /* ---------- loading skeletons ---------- */ @keyframes crown-shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } .crown-skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border-soft) 37%, var(--surface-2) 63%); background-size: 400px 100%; animation: crown-shimmer 1.4s ease-in-out infinite; border-radius: 6px; } .landing-nav{ color:var(--text); } .landing-nav .navbar-brand{ color:var(--text); } .landing-nav .nav-link{ color:var(--muted); } .landing-nav .nav-link:hover{ color:var(--text); } .auth-aside .text-muted2{ color:rgba(255,255,255,.65) !important; } .auth-aside .hero-stat{ color:#fff; } .nav-item-c i.icon, .nav-item-c i.icon-sm{ font-size:19px; } .sidebar .brand i.icon, .sidebar .brand i.icon-sm{ font-size:17px; } .tabbar i.icon, .tabbar i.icon-sm{ font-size:19px; } .sidebar-foot{ color:rgba(255,255,255,.85); } body.theme-dark .filter-chip{ color:var(--accent); } .filter-clear-all{ font-size:12px; color:var(--accent-700); font-weight:600; cursor:pointer; } body.theme-dark .filter-clear-all{ color:var(--accent); } .btn-icon{ display:inline-flex; align-items:center; justify-content:center; } .btn-icon i{ line-height:1; } /* ---------- filter panel (search + Filters button + full-width body + chips) ---------- */ [data-filter-panel]{ position:relative; } [data-filter-toggle]{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); border-radius:9px; padding:9px 14px; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--text); } [data-filter-toggle].has-active{ background:var(--accent); border-color:var(--accent); color:#fff; } [data-filter-count]{ background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; display:none; } [data-filter-toggle].has-active [data-filter-count]{ background:rgba(255,255,255,.25); } [data-filter-body]{ display:none; width:100%; background:var(--surface); border:1px solid var(--border-soft); border-radius:12px; padding:20px; margin-bottom:10px; } [data-filter-body].open{ display:block; } .filter-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:16px; } @media (max-width: 767.98px){ .filter-grid{ grid-template-columns:1fr; } } .filter-reset-row{ display:flex; justify-content:flex-end; gap:8px; padding-top:14px; border-top:1px solid var(--border-soft); } .filter-reset-row span{ font-size:13px; color:var(--accent-700); font-weight:600; cursor:pointer; padding:8px 4px; } body.theme-dark .filter-reset-row span{ color:var(--accent); } .filter-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--accent-100); color:var(--accent-700); font-size:13px; font-weight:600; padding:6px 10px 6px 14px; border-radius:999px; margin-right:6px; margin-bottom:6px; } body.theme-dark .filter-chip{ color:var(--accent); } .filter-chip i{ font-size:13px; cursor:pointer; } .filter-clear-all{ font-size:13px; color:var(--accent-700); font-weight:600; cursor:pointer; } body.theme-dark .filter-clear-all{ color:var(--accent); } .search-filter-bar{ background:var(--surface); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:10px; } .search-filter-bar .table-search{ display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:10px; padding:12px 16px; gap:10px; flex:1; } .search-filter-bar .table-search input{ border:0; background:transparent; outline:none; font-family:inherit; font-size:14.5px; color:var(--text); flex:1; } .search-filter-bar .table-search input::placeholder{ color:var(--faint); } .search-filter-bar .table-search i{ font-size:17px; color:var(--faint); flex-shrink:0; } .search-filter-bar [data-filter-toggle]{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:12px 18px; font-family:inherit; font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; } .search-filter-bar [data-filter-toggle] i{ font-size:16px; } @media (max-width: 575.98px){ .search-filter-bar{ flex-wrap:wrap; } .search-filter-bar .table-search{ flex-basis:100%; } .search-filter-bar [data-filter-toggle]{ flex:1; justify-content:center; } } @media (max-width: 575.98px){ .table-toolbar{ flex-wrap:wrap; gap:8px; } .table-toolbar .sel-actions{ flex-basis:100%; } } .table-wrap{ overflow-x:auto; } @media (max-width: 767.98px){ /*.table-crown-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }*/ } .pager{ padding-left:1.1rem; padding-right:1.1rem; } .table-crown tbody tr:nth-child(even) td{ background:var(--surface-2); } .table-crown tbody tr:nth-child(even):hover td{ background:rgba(10,42,48,.06); } body.theme-dark .table-crown tbody tr:nth-child(even):hover td{ background:rgba(228,238,240,.06); } .table-crown tbody td{ padding:1.15rem 1.1rem; } .table-crown thead th{ padding:1rem 1.1rem; } .table-crown .dropdown-menu{ margin-bottom:.5rem; } .crown-menu-item:hover, button.crown-menu-item:hover{ background:rgba(10,42,48,.08) !important; color:var(--text); cursor:pointer; } body.theme-dark .crown-menu-item:hover, body.theme-dark button.crown-menu-item:hover{ background:rgba(228,238,240,.08) !important; } .crown-menu-item.danger:hover{ background:var(--toast-danger-bg) !important; } [data-filter-toggle].has-active{ background:var(--accent) !important; border-color:var(--accent) !important; color:#fff !important; } [data-filter-count]{ background:var(--accent); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:999px; display:none; } [data-filter-toggle].has-active [data-filter-count]{ background:rgba(255,255,255,.25) !important; } .filter-grid .dropdown{ width:100%; } .filter-grid .scope-btn{ width:100%; justify-content:space-between; } #custBulkBar{ display:none; } #custBulkBar.is-selecting{ display:flex; } .cust-hover-trigger{ cursor:pointer; } .cust-hover-card{ position:fixed; z-index:2000; pointer-events:none; opacity:0; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:.9rem 1rem; width:250px; transition:opacity .12s ease; } .cust-hover-card.show{ opacity:1; } .cust-hover-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; padding-bottom:.7rem; border-bottom:1px solid var(--border-soft); } .cust-hover-row{ display:flex; justify-content:space-between; gap:.75rem; font-size:12.5px; padding:.25rem 0; } .flatpickr-calendar{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); font-family:"Poppins",system-ui,sans-serif; } .flatpickr-day.selected{ background:var(--accent); border-color:var(--accent); border-radius:10px; } .flatpickr-day.today{ border-color:var(--accent); } .flatpickr-day:hover{ background:var(--surface-2); } .flatpickr-months .flatpickr-month{ color:var(--text); } .flatpickr-current-month .flatpickr-monthDropdown-months{ font-weight:700; } .flatpickr-weekday{ color:var(--muted); font-weight:700; font-size:11px; text-transform:uppercase; } .flatpickr-time input{ color:var(--text); font-weight:700; } .flatpickr-footer{ display:flex; justify-content:flex-end; gap:8px; padding:.75rem 1rem; border-top:1px solid var(--border-soft); } .dot-ok,.dot-down,.dot-warn{ width:9px; height:9px; border-radius:999px; flex:none; background:var(--sage); } .dot-down{ background:var(--toast-danger-accent); } .dot-warn{ background:var(--accent-700); } body.theme-dark .dot-warn{ background:var(--accent); }