/* Crown Network — theme layer on top of Bootstrap 5 Light (Organic) by default, dark console via */ :root{ --toast-fg: #2b2118; --toast-success-bg: #eef2e6; --toast-danger-bg: #fbeae4; --toast-warning-bg: #fdf1e3; --toast-info-bg: #fdfaf4; --toast-danger-accent: #c2542f; --topbar-h:65px; --tabbar-h:64px; --bg:#f5ead8; --surface:#f9f4ed; --surface-2:#ebddc5; --raised:#ffffff00; --text:#201e1d; --muted:#82796a; --faint:#a19786; --accent:#c67139; --accent-600:#b2622d; --accent-700:#8c491a; --accent-100:#ffe1d0; --accent-200:#ffc6a5; --sage:#7a8a5e; --sage-100:#e1eecc; --sage-700:#56633f; --border:rgba(32,30,29,.16); --border-soft:rgba(32,30,29,.08); --shadow-sm:0 1px 2px rgba(46,43,37,.14); --shadow-md:0 3px 10px rgba(46,43,37,.16); --shadow-lg:0 12px 32px rgba(46,43,37,.22); --r-sm:8px; --r-md:16px; --r-lg:24px; --r-xl:28px; } body.theme-dark{ --toast-fg: #f2ece3; --toast-success-bg: #2a3524; --toast-danger-bg: #3d241b; --toast-warning-bg: #3a2c1a; --toast-info-bg: #2a2620; --toast-danger-accent: #d1603d; --bg:#1b1814; --surface:#232019; --surface-2:#2a251d; --text:#f2e9d9; --muted:#8c8271; --faint:#6b6355; --accent:#e2a35c; --accent-600:#f6a06b; --accent-700:#b07a3c; --accent-100:rgba(226,163,92,.18); --accent-200:rgba(226,163,92,.32); --sage:#9fb27a; --sage-100:rgba(159,178,122,.2); --sage-700:#9fb27a; --border:rgba(245,234,216,.12); --border-soft:rgba(245,234,216,.08); --shadow-sm:none; --shadow-md:none; --shadow-lg:0 12px 32px rgba(0,0,0,.4); } *{ -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:ui-monospace,Menlo,Consolas,monospace; } .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } ::selection{ background:rgba(198,113,57,.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:#1b1814; } .btn-crown:hover{ background:var(--accent-600); color:#fff; } body.theme-dark .btn-crown:hover{ color:#1b1814; } .btn-ghost{ border-color:var(--border); color:var(--text); background:transparent; } .btn-ghost:hover{ background:rgba(128,120,106,.12); color:var(--text); } .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:#1b1814; } .list-flush > *{ border-bottom:1px solid var(--border-soft); } .list-flush > *:last-child{ border-bottom: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(128,120,106,.18); color:var(--muted); } .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:#1b1814; } /* ---------- 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:999px; padding:.8rem 1.1rem; font-size:15px; } .form-control:focus,.form-select:focus{ background:var(--surface); color:var(--text); border-color:var(--accent); box-shadow: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:#1b1814; } /* ---------- app shell ---------- */ .app{ display:flex; min-height:100vh; } .sidebar{ width:250px; flex:none; background:var(--surface-2); 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:#211d18; } .sidebar .brand{ display:flex; align-items:center; gap:.6rem; padding:.15rem .4rem; font-weight:700; font-size:16px; } .nav-group-label{ font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); 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:var(--text); } .nav-item-c:hover{ background:rgba(128,120,106,.14); color:var(--text); } .nav-item-c.active{ background:var(--accent); color:#fff; font-weight:600; } body.theme-dark .nav-item-c.active{ color:#1b1814; } .nav-item-c .count{ margin-left:auto; font-size:11px; font-weight:600; background:rgba(128,120,106,.18); color:var(--muted); padding:.15rem .45rem; border-radius:999px; } .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(--bg); 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; } .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(128,120,106,.12); color:var(--text); } .crown-menu-item.danger{ color:var(--accent-700); } body.theme-dark .crown-menu-item.danger{ color:var(--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(--accent); border:2px solid var(--bg); } .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(128,120,106,.10); color:var(--text); } .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-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) */ .tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:1030; display:none; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--surface-2); border-top:1px solid var(--border-soft); padding:.55rem .5rem calc(.9rem + env(safe-area-inset-bottom)); } .tabbar a{ display:flex; flex-direction:column; align-items:center; gap:.2rem; font-size:11px; font-weight:600; color:var(--muted); } .tabbar a.active{ color:var(--accent); } @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(128,120,106,.16); color:var(--muted); } .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(--sage-100); color:var(--sage-700); } .avatar.warm{ background:var(--accent-100); color:var(--accent-700); } .avatar.mute{ background:rgba(128,120,106,.2); color:var(--muted); } .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(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.8rem 1.1rem; border:0; white-space:nowrap; } .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(128,120,106,.07); } .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; } /* ---------- 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(--sage-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:#2f2a21; } .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); } .feature-icon.sage{ background:var(--sage-100); color:var(--sage-700); } /* ---------- 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-2); color:var(--text); } .modal-content{ background:var(--bg); 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(--text); color:var(--bg); border-radius:10px; padding:.45rem .7rem; font-size:12px; font-weight:600; line-height:1.35; white-space:nowrap; box-shadow:0 6px 18px rgba(0,0,0,.25); transition:opacity .12s ease; } .crown-tip.show{ opacity:1; } .crown-tip .tip-sub{ display:block; font-weight:500; opacity:.75; font-size:11px; } [data-tip]{ cursor:pointer; } .chart svg{ display:block; width:100%; overflow:visible; } .chart .hit{ fill:transparent; } .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; } /* ---------- 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; } .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); } .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:var(--surface-2); padding:3rem; display:none; flex-direction:column; } @media (min-width:992px){ .auth-aside{ display:flex; } } .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(128,120,106,.14); color:var(--text); } .input-icon .toggle-pw:active{ background:rgba(128,120,106,.22); } .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); } /* ---------- chart tooltip card ---------- */ .crown-tip{ transform:translate(-50%,-125%); padding:.6rem .75rem; min-width:150px; white-space:nowrap; background:var(--surface); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-lg); } body.theme-dark .crown-tip{ background:#2a251d; } .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; } .chart .hit{ fill:transparent; cursor:crosshair; } .chart .dot,.chart .guide{ opacity:0; transition:opacity .1s ease; } .chart .dot.on,.chart .guide.on{ opacity:1; } /* ---------- 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); } body.theme-dark .range-switch button.active{ background:#3a3428; } .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); } body.theme-dark .price-foot{ background:#2a251d; } .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(46,43,37,.20); 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: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(46,43,37,.22); } 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(128,120,106,.18); color:var(--muted); } .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(46,43,37,.18); 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(122,138,94,.55); animation:heroPulse 2.4s infinite; } @keyframes heroPulse{ 0%{ box-shadow:0 0 0 0 rgba(122,138,94,.5); } 70%{ box-shadow:0 0 0 8px rgba(122,138,94,0); } 100%{ box-shadow:0 0 0 0 rgba(122,138,94,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; } } /* ---------- bar charts ---------- */ .chart-bars .bar-hit{ fill:transparent; } .chart-bars .bar-seg{ transition:opacity .12s ease; } .chart-bars .bar-seg.dim{ opacity:.32; } .tip-total{ border-top:1px solid rgba(255,255,255,.16); margin-top:.25rem; padding-top:.3rem; } /* ---------- 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(--accent-700); } body.theme-dark .stream-fig .delta.up{ color:var(--sage); } body.theme-dark .stream-fig .delta.down{ color:var(--accent); } .stream-foot{ display:flex; justify-content:space-between; gap:.75rem; font-size:11.5px; color:var(--muted); margin-top:auto; } /* 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(128,120,106,.12); color:var(--text); } .scope-item.active{ background:var(--accent-100); } body.theme-dark .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(--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:rgba(128,120,106,.22); color:#5d564b; } body.theme-dark .type-static{ color:var(--text); } .avatar.sage{ background:var(--sage-100); color:var(--sage-700); } .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(128,120,106,.2); color:var(--muted); font-size:11px; font-weight:700; line-height:1.5; } .filter-pill.active .pill-count{ background:var(--accent-700); color:#fff; } body.theme-dark .filter-pill.active .pill-count{ background:rgba(27,24,20,.55); color:#f2e9d9; } /* 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:rgba(128,120,106,.22); color:#5d564b; } body.theme-dark .tag-notice{ color:var(--text); } .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(128,120,106,.2); color:var(--muted); font-size:11px; font-weight:700; } .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(128,120,106,.2); color:#5d564b; } body.theme-dark .sev-info{ 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:#231f19; color:#e6dcc9; border-radius:var(--r-md); padding:1rem 1.1rem; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.65; overflow-x:auto; white-space:pre; } .term .ok{ color:#a9bf85; } .term .dim{ color:#8c8271; } /* ---------- 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:999px; 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); } /* ---------- 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:#1b1814; } .step.done .step-num{ background:var(--sage-100); color:var(--sage-700); border-color:transparent; } .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:#2b261e; 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:#8c8271; } .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(245,234,216,.16); color:#e6dcc9; border:1px solid rgba(245,234,216,.22); border-radius:999px; padding:.35rem .8rem; font-size:12px; font-weight:600; } .btn-onterm:hover{ background:rgba(245,234,216,.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:#1b1814; } .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(128,120,106,.06); } @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); } /* 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:#1b1814; } /* ---------- 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; } body.theme-dark .saved-strip{ background:rgba(159,178,122,.14); } .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 -------------------------------------------------------------- */ .toast-container { z-index: 1090; max-width: min(380px, calc(100vw - 2rem)); } .crown-toast { position: relative; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: 0 10px 30px rgba(60, 40, 25, .12); font-size: 14.5px; width: auto; } .crown-toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; } .crown-toast .toast-body { display: flex; align-items: flex-start; gap: .65rem; padding: .85rem 1rem .85rem 1.15rem; } .crown-toast-text { flex: 1; line-height: 1.45; font-weight: 500; } .crown-toast-icon { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .05rem; display: grid; place-items: center; border-radius: 50%; } .crown-toast-icon svg { width: 12px; height: 12px; stroke-width: 2.6; fill: none; } /* success */ .crown-toast-success { background: var(--toast-success-bg); color: var(--toast-fg); } .crown-toast-success::before { background: var(--sage); } .crown-toast-success .crown-toast-icon { background: var(--sage); } /* error */ .crown-toast-danger { background: var(--toast-danger-bg); color: var(--toast-fg); } .crown-toast-danger::before { background: var(--toast-danger-accent); } .crown-toast-danger .crown-toast-icon { background: var(--toast-danger-accent); } /* warning */ .crown-toast-warning { background: var(--toast-warning-bg); color: var(--toast-fg); } .crown-toast-warning::before { background: var(--accent); } .crown-toast-warning .crown-toast-icon { background: var(--accent); } /* info */ .crown-toast-info { background: var(--toast-info-bg); color: var(--toast-fg); } .crown-toast-info::before { background: var(--accent); } .crown-toast-info .crown-toast-icon { background: var(--accent); } .crown-toast .btn-close { --bs-btn-close-opacity: .3; font-size: .7rem; margin-top: .2rem; } .crown-toast .btn-close:hover { --bs-btn-close-opacity: .65; } @media (max-width: 575.98px) { .toast-container { left: 0; right: 0; max-width: none; } .crown-toast { width: 100%; } } .crown-toast-icon svg { width: 13px; height: 13px; display: block; } .crown-toast-icon svg path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .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; } .crown-menu { max-width: min(320px, calc(100vw - 2rem)); } .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(128,120,106,.07); } .perm-row:has(input:checked) { background: rgba(196,106,58,.07); } .confirm-icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--toast-danger-bg); } .confirm-icon svg { width: 18px; height: 18px; } .confirm-icon svg path { fill: none; stroke: var(--toast-danger-accent); stroke-width: 2.4; stroke-linecap: round; } .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; }