/* ============================================================ Geneticker Analytics — analytics.geneticker.com Founder-only. Vanilla static SPA. Google Sans + Material. Forked from admin/dist/styles.css so the shell, side-nav and every component class are byte-identical to the other consoles; the analytics-specific rules (studio expansion, report tabs, charts) are appended at the bottom rather than woven in, so a future diff against admin stays readable. Deliberately shares Cipher's and Decipher's token names, shell and side-nav rules VERBATIM (--ink/--panel/--line, .shell/.sidebar/.side-item, the 268px rail, the 820px collapse) so the four consoles read as one product family. Only the accent differs: Cipher teal, Decipher indigo, Admin blue, Analytics rose — chosen because it is the one hue not already spoken for, and the launcher grid shows all of them side by side. Every surface resolves through a token. The previous sheet hard-coded #fff on panels/drawers/modals and a fixed gradient on , which is exactly what made a dark theme impossible; nothing below paints a literal colour except the fixed-by-design ones (white text on an accent fill). ============================================================ */ :root{ --bg: #f8f9fa; --panel: #ffffff; --panel2: #f1f3f4; --ink: #202124; --ink2: #5f6368; --ink3: #80868b; --line: #dadce0; --line2: #e8eaed; --blue: #1a73e8; --blue-h: #1557b0; --green: #0d904f; --teal: #0ca678; /* Cipher's accent — colours Cipher-sourced figures */ --indigo: #4f46e5; /* Decipher's accent — colours Decipher-sourced figures */ --red: #d93025; --red-h: #b3261e; --amber: #e37400; --violet: #8b5cf6; --rose: #d6336c; /* Analytics' own accent */ --rose-h: #b02a5b; /* Analytics' accent, indirected so a re-skin is one line. --accent resolves through var(--rose), so the dark blocks only need to restate --rose; the two *-soft tokens are literal rgba and DO need restating in both. */ --accent: var(--rose); --accent-h: var(--rose-h); --accent-soft: rgba(214,51,108,.10); --accent-soft2:rgba(214,51,108,.16); --ok-soft: #e6f4ea; --ok-ink: #137333; --bad-soft: #fce8e6; --bad-ink: #b3261e; --bad-line: #f6bcb6; --warn-soft:#fef7e0; --warn-ink:#9a6700; --display: 'Google Sans','Google Sans Text','Roboto','Helvetica Neue',Arial,sans-serif; --body: 'Google Sans Text','Google Sans','Roboto','Helvetica Neue',Arial,sans-serif; --mono: 'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --radius: 14px; --shadow: 0 1px 3px rgba(60,64,67,.12), 0 4px 12px rgba(60,64,67,.10); --shadow-lg: 0 8px 28px -8px rgba(60,64,67,.28); color-scheme: light; } /* Dark theme — same token NAMES, flipped values, so no selector below changes. Three layers: OS preference, overridable by an explicit choice persisted in localStorage and reflected as data-theme on by theme-init.js. */ :root[data-theme="dark"]{ --bg:#0f1115; --panel:#171a21; --panel2:#1f232c; --ink:#e8eaed; --ink2:#b0b5bd; --ink3:#868b93; --line:#2a2f3a; --line2:#222731; --blue:#5b9bff; --blue-h:#7db0ff; --green:#28b463; --teal:#12b886; --indigo:#818cf8; --red:#ff6b5e; --red-h:#ff8a80; --amber:#f5a623; --violet:#a78bfa; --rose:#f06595; --rose-h:#f783ac; --accent-soft: rgba(240,101,149,.18); --accent-soft2:rgba(240,101,149,.26); --ok-soft:rgba(40,180,99,.16); --ok-ink:#5dd48f; --bad-soft:rgba(255,107,94,.15); --bad-ink:#ff9d94; --bad-line:rgba(255,107,94,.38); --warn-soft:rgba(245,166,35,.16);--warn-ink:#f5c26b; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42); --shadow-lg: 0 10px 30px -8px rgba(0,0,0,.72); color-scheme: dark; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0f1115; --panel:#171a21; --panel2:#1f232c; --ink:#e8eaed; --ink2:#b0b5bd; --ink3:#868b93; --line:#2a2f3a; --line2:#222731; --blue:#5b9bff; --blue-h:#7db0ff; --green:#28b463; --teal:#12b886; --indigo:#818cf8; --red:#ff6b5e; --red-h:#ff8a80; --amber:#f5a623; --violet:#a78bfa; --rose:#f06595; --rose-h:#f783ac; --accent-soft: rgba(240,101,149,.18); --accent-soft2:rgba(240,101,149,.26); --ok-soft:rgba(40,180,99,.16); --ok-ink:#5dd48f; --bad-soft:rgba(255,107,94,.15); --bad-ink:#ff9d94; --bad-line:rgba(255,107,94,.38); --warn-soft:rgba(245,166,35,.16);--warn-ink:#f5c26b; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.42); --shadow-lg: 0 10px 30px -8px rgba(0,0,0,.72); color-scheme: dark; } } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} html,body{height:100%;} body{font-family:var(--body);color:var(--ink);line-height:1.5;letter-spacing:.1px; background:var(--bg);min-height:100vh; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .material-icons-outlined{font-family:'Material Icons Outlined';font-style:normal;line-height:1; display:inline-block;vertical-align:middle;-webkit-font-feature-settings:'liga';} button{font-family:var(--display);cursor:pointer;border:none;background:none;color:inherit;} a{color:var(--accent);text-decoration:none;} input,select{font-family:var(--body);} .hidden{display:none !important;} .spacer{flex:1;} /* ============ LOGIN ============ */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;} .login-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-lg); width:100%;max-width:400px;padding:40px 36px;} .login-card .lock{width:56px;height:56px;border-radius:15px;background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center;margin-bottom:20px;} .login-card .lock .material-icons-outlined{font-size:30px;} .login-card h1{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.4px;} .login-card p{color:var(--ink2);font-size:14px;margin:6px 0 26px;} .field{margin-bottom:16px;} .field label{display:block;font-family:var(--display);font-weight:500;font-size:12.5px;color:var(--ink2);margin-bottom:6px;} .field input{width:100%;font-size:14.5px;color:var(--ink);background:var(--panel);border:1px solid var(--line); border-radius:11px;padding:12px 14px;outline:none;transition:border .12s,box-shadow .12s;} .field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .login-err{background:var(--bad-soft);color:var(--bad-ink);border:1px solid var(--bad-line);border-radius:10px; padding:10px 13px;font-size:13px;font-weight:500;margin-bottom:16px;display:none;} .login-err.show{display:block;} .btn-block{width:100%;height:46px;border-radius:11px;background:var(--accent);color:#fff; font-family:var(--display);font-weight:500;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px; transition:background .12s;} .btn-block:hover{background:var(--accent-h);} .btn-block:disabled{opacity:.6;cursor:default;} .login-foot{text-align:center;margin-top:20px;font-size:12px;color:var(--ink3);} /* ============ APP SHELL ============ */ .app{display:none;} .app.show{display:block;} .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;padding:12px 22px; background:var(--panel);border-bottom:1px solid var(--line);} .topbar .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);} .topbar .brand .logo{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff; display:grid;place-items:center;} .topbar .brand .logo .material-icons-outlined{font-size:18px;} .topbar .brand .tag{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:1.5px; text-transform:uppercase;color:var(--ink3);} .topbar .who{font-size:13px;color:var(--ink2);font-weight:500;display:flex;align-items:center;gap:7px;} .icon-btn{width:38px;height:38px;border-radius:999px;background:transparent;color:var(--ink2); display:grid;place-items:center;transition:.15s;} .icon-btn:hover{color:var(--ink);background:var(--panel2);} .chip-user{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 6px;border:1px solid var(--line); border-radius:999px;background:var(--panel);font-size:13px;color:var(--ink);white-space:nowrap;} .chip-user .av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;} .chip-user .av img{width:100%;height:100%;display:block;image-rendering:pixelated;border-radius:50%;} /* layout — same geometry as Cipher's shell, widened for dense admin tables */ .shell{display:flex;align-items:flex-start;gap:26px;max-width:min(1560px,95vw);margin:0 auto;padding:26px 22px 90px;} .sidebar{position:sticky;top:87px;flex:none;width:268px;display:flex;flex-direction:column;gap:6px;} .side-profile{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--line); border-radius:14px;background:var(--panel);box-shadow:var(--shadow);margin-bottom:6px;} .side-profile .av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;} .side-profile .av img{width:100%;height:100%;display:block;} .side-profile .sp-name{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;line-height:1.3;} .side-profile .sp-mode{font-size:11px;color:var(--accent);font-weight:600;margin-top:2px;} .side-nav{display:flex;flex-direction:column;gap:3px;} .side-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;border:none; background:none;width:100%;text-align:left;color:var(--ink2);font-family:var(--display);font-weight:600; font-size:14px;transition:.13s;} .side-item .material-icons-outlined{font-size:20px;} .side-item:hover{background:var(--panel2);color:var(--ink);} .side-item.active{background:var(--accent-soft);color:var(--accent-h);} .side-item .si-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .side-item .si-badge{margin-left:auto;font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:999px; background:var(--panel2);color:var(--ink2);} .side-item.active .si-badge{background:var(--accent-soft2);color:var(--accent-h);} .side-item .si-badge.alert{background:var(--bad-soft);color:var(--bad-ink);} .side-foot{margin-top:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px; background:var(--panel);font-size:11.5px;color:var(--ink3);line-height:1.45;} .content{flex:1;min-width:0;} .view{display:none;} .view.show{display:block;} .tab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;} .tab-head .eyebrow{font-family:var(--display);font-weight:500;font-size:11px;text-transform:uppercase; letter-spacing:.8px;color:var(--ink3);} .tab-head h2{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.4px;margin-top:2px;} .tab-head .sub{font-size:13px;color:var(--ink2);margin-top:5px;max-width:76ch;} /* ============ STATS ============ */ .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:22px;} .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);} .stat .lbl{font-family:var(--display);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px; color:var(--ink3);display:flex;align-items:center;gap:6px;} .stat .lbl .material-icons-outlined{font-size:17px;} .stat .val{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.5px;margin-top:8px; font-variant-numeric:tabular-nums;} .stat .sub{font-size:12.5px;color:var(--ink2);margin-top:3px;} .stat.accent .val{color:var(--accent);} .stat.cipher .val{color:var(--teal);} .stat.decipher .val{color:var(--indigo);} .stat.bad .val{color:var(--red);} .stat.good .val{color:var(--green);} .bar{height:8px;border-radius:999px;background:var(--line2);overflow:hidden;margin-top:12px;} .bar > span{display:block;height:100%;border-radius:999px;background:var(--accent);} .bar.warn > span{background:var(--amber);} .bar.crit > span{background:var(--red);} /* signup sparkline */ .spark{display:flex;align-items:flex-end;gap:2px;height:46px;margin-top:12px;} .spark i{flex:1;background:var(--accent-soft2);border-radius:2px 2px 0 0;min-height:2px;display:block;} .spark i.hot{background:var(--accent);} /* ============ PANELS / TABLES ============ */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow); overflow:hidden;margin-bottom:20px;} .panel-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line2);flex-wrap:wrap;} .panel-head h3{font-family:var(--display);font-weight:700;font-size:15px;} .panel-body{padding:16px 18px;} .search{position:relative;} .search .material-icons-outlined{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:19px;} .search input{width:250px;max-width:46vw;font-size:13.5px;color:var(--ink);background:var(--panel); border:1px solid var(--line);border-radius:999px;padding:8px 14px 8px 36px;outline:none;transition:.12s;} .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);} .table-scroll{overflow-x:auto;} table{width:100%;border-collapse:collapse;font-size:13.5px;} th,td{text-align:left;padding:11px 14px;white-space:nowrap;} th{font-family:var(--display);font-weight:500;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px; color:var(--ink3);background:var(--panel2);border-bottom:1px solid var(--line);user-select:none;} th[data-sort]{cursor:pointer;} th[data-sort]:hover{color:var(--ink);} td{border-bottom:1px solid var(--line2);} tbody tr{transition:background .1s;} tbody tr:hover{background:var(--panel2);} tbody tr.selected{background:var(--accent-soft);} tbody tr.selected:hover{background:var(--accent-soft2);} .uname{font-family:var(--mono);font-size:12.5px;color:var(--accent-h);font-weight:500;} .email{font-family:var(--mono);font-size:12.5px;color:var(--ink);} .num{text-align:right;font-variant-numeric:tabular-nums;} .muted{color:var(--ink3);} .row-link{cursor:pointer;} .empty-row td{text-align:center;color:var(--ink3);padding:40px;font-size:14px;white-space:normal;} .loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:60px;color:var(--ink2);font-size:14px;} .spin{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--accent);border-radius:50%; animation:sp .8s linear infinite;display:inline-block;} @keyframes sp{to{transform:rotate(360deg);}} /* multiselect */ .cbx{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;vertical-align:-3px;} th.sel,td.sel{width:42px;padding-right:0;} .bulk-bar{display:none;align-items:center;gap:12px;padding:11px 18px;background:var(--accent-soft); border-bottom:1px solid var(--line2);flex-wrap:wrap;} .bulk-bar.show{display:flex;} .bulk-bar .n{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--accent-h);} .bulk-bar .hint{font-size:12px;color:var(--ink2);} /* ============ PILLS / ACTIONS ============ */ .pill{display:inline-block;font-family:var(--display);font-weight:500;font-size:11px;padding:2px 9px; border-radius:999px;white-space:nowrap;} .pill.green{background:var(--ok-soft);color:var(--ok-ink);} .pill.red{background:var(--bad-soft);color:var(--bad-ink);} .pill.grey{background:var(--panel2);color:var(--ink2);border:1px solid var(--line2);} .pill.amber{background:var(--warn-soft);color:var(--warn-ink);} .pill.blue{background:var(--accent-soft);color:var(--accent-h);} .pill.teal{background:rgba(12,166,120,.14);color:var(--teal);} .pill.indigo{background:rgba(79,70,229,.14);color:var(--indigo);} .act{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:8px; font-family:var(--display);font-weight:500;font-size:12.5px;border:1px solid var(--line); background:var(--panel);color:var(--ink);transition:.12s;} .act .material-icons-outlined{font-size:16px;} .act:hover{background:var(--panel2);} .act.danger{color:var(--red);border-color:var(--bad-line);} .act.danger:hover{background:var(--bad-soft);} .act.danger:disabled{opacity:.45;cursor:default;} .act.go{color:var(--accent-h);border-color:var(--accent-soft2);} .act.go:hover{background:var(--accent-soft);} .act.solid{background:var(--accent);color:#fff;border-color:var(--accent);} .act.solid:hover{background:var(--accent-h);} .act-row{display:flex;gap:6px;flex-wrap:wrap;} /* honest-note callout — used wherever the console must state a limit of its own reach */ .note{display:flex;gap:9px;align-items:flex-start;background:var(--panel2);border:1px solid var(--line2); border-radius:11px;padding:11px 13px;font-size:12.5px;color:var(--ink2);line-height:1.5;white-space:normal;} .note .material-icons-outlined{font-size:17px;color:var(--ink3);flex:none;margin-top:1px;} .note + .note{margin-top:8px;} .note.warn{background:var(--warn-soft);border-color:transparent;color:var(--warn-ink);} .note.warn .material-icons-outlined{color:var(--warn-ink);} .note.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad-ink);} .note.bad .material-icons-outlined{color:var(--bad-ink);} /* ============ DRAWER ============ */ .overlay{position:fixed;inset:0;background:rgba(15,17,21,.5);backdrop-filter:blur(2px);z-index:80;display:none;} .overlay.show{display:block;} .drawer{position:fixed;top:0;right:0;height:100vh;width:min(660px,96vw);background:var(--panel);z-index:90; box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.8,.2,1); display:flex;flex-direction:column;} .drawer.show{transform:translateX(0);} .drawer-head{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;} .drawer-head .x{margin-left:auto;width:36px;height:36px;border-radius:9px;display:flex;align-items:center; justify-content:center;color:var(--ink2);} .drawer-head .x:hover{background:var(--panel2);} .drawer-head h2{font-family:var(--mono);font-weight:500;font-size:17px;color:var(--ink);letter-spacing:-.2px;word-break:break-all;} .drawer-head .meta{font-size:12.5px;color:var(--ink2);margin-top:4px;} .drawer-body{padding:18px 24px 40px;overflow-y:auto;flex:1;} .dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;} .dstat .c{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:12px 14px;} .dstat .c .l{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink3);font-family:var(--display);font-weight:500;} .dstat .c .v{font-family:var(--display);font-weight:700;font-size:18px;margin-top:4px;font-variant-numeric:tabular-nums;} .dsub{font-family:var(--display);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px; color:var(--ink3);margin:20px 0 10px;display:flex;align-items:center;gap:8px;} .file-card{border:1px solid var(--line);border-radius:12px;padding:13px 15px;margin-bottom:10px;} .file-card .fr{display:flex;align-items:center;gap:10px;} .file-card .fn{font-family:var(--display);font-weight:500;font-size:14px;word-break:break-all;flex:1;} .file-card .fmeta{font-size:12px;color:var(--ink2);margin:6px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .file-card .fmeta .sep{width:3px;height:3px;border-radius:50%;background:var(--ink3);} .danger-zone{border:1px solid var(--bad-line);background:var(--bad-soft);border-radius:12px;padding:16px 18px;margin-top:24px;} .danger-zone h4{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--bad-ink);display:flex;align-items:center;gap:7px;} .danger-zone p{font-size:12.5px;color:var(--bad-ink);opacity:.9;margin:6px 0 12px;} /* ============ CONFIRM MODAL ============ */ .modal-overlay{position:fixed;inset:0;background:rgba(15,17,21,.55);z-index:120;display:none; align-items:center;justify-content:center;padding:20px;} .modal-overlay.show{display:flex;} .modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;max-width:580px;width:100%; padding:28px 30px;box-shadow:var(--shadow-lg);max-height:92vh;overflow-y:auto;} .modal .mi{width:46px;height:46px;border-radius:12px;background:var(--bad-soft);color:var(--red); display:flex;align-items:center;justify-content:center;margin-bottom:16px;} .modal .mi .material-icons-outlined{font-size:26px;} .modal h3{font-family:var(--display);font-weight:700;font-size:19px;} .modal p{font-size:14px;color:var(--ink2);margin:8px 0 4px;} .modal .confirm-field{margin:16px 0 6px;} .modal .confirm-field label{font-size:12.5px;color:var(--ink2);display:block;margin-bottom:6px;} .modal .confirm-field input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px; font-size:14px;outline:none;font-family:var(--mono);background:var(--panel);color:var(--ink);} .modal .confirm-field input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--bad-soft);} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap;} .mbtn{height:42px;padding:0 20px;border-radius:11px;font-family:var(--display);font-weight:500;font-size:14px;} .mbtn.ghost{border:1px solid var(--line);background:var(--panel);color:var(--ink);} .mbtn.ghost:hover{background:var(--panel2);} .mbtn.danger{background:var(--red);color:#fff;} .mbtn.danger:hover{background:var(--red-h);} .mbtn.danger:disabled{opacity:.45;cursor:default;} /* removal preview inside the confirm modal */ .plan{border:1px solid var(--line);border-radius:12px;margin:14px 0 4px;max-height:220px;overflow-y:auto;} .plan .prow{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line2);font-size:12.5px;} .plan .prow:last-child{border-bottom:none;} .plan .prow .who{font-family:var(--mono);font-size:12px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .plan .prow .what{color:var(--ink3);font-size:11.5px;white-space:nowrap;} .plan .prow.blocked{background:var(--warn-soft);color:var(--warn-ink);} .plan .prow.blocked .what{color:var(--warn-ink);} .survives{background:var(--warn-soft);border-radius:11px;padding:12px 14px;margin-top:14px;font-size:12.5px; color:var(--warn-ink);line-height:1.55;} .survives h5{font-family:var(--display);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;} .survives ul{margin:0;padding-left:16px;} .survives li{margin-top:3px;} .opt{display:flex;align-items:flex-start;gap:9px;margin-top:14px;padding:11px 13px;border:1px solid var(--line); border-radius:11px;font-size:12.5px;color:var(--ink2);line-height:1.5;} .opt input{margin-top:3px;flex:none;} /* ============ TOAST ============ */ .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px); background:var(--ink);color:var(--bg);font-family:var(--display);font-weight:500;font-size:13.5px; padding:11px 20px;border-radius:999px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px; opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;max-width:90vw;} .toast .material-icons-outlined{font-size:18px;} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .toast.ok .material-icons-outlined{color:#81c995;} .toast.err .material-icons-outlined{color:#f28b82;} /* ============ RESPONSIVE ============ */ @media (max-width:820px){ .shell{flex-direction:column;gap:16px;padding:18px 14px 80px;max-width:100%;} .sidebar{position:static;width:100%;} .side-profile{margin-bottom:2px;} .side-nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;} .side-item{flex:none;width:auto;padding:9px 13px;} .side-item .si-badge{display:none;} .side-foot{display:none;} .dstat{grid-template-columns:1fr 1fr;} .topbar{padding:10px 14px;} .topbar .who .u{display:none;} } /* ================================================================ ANALYTICS-SPECIFIC — appended so a diff against admin/dist/styles.css above this line stays readable. The studio mechanics below are lifted from Decipher's Query/Canvas studios (frontend/decipher/dist/styles.css) so "click a property, it takes over the screen" feels identical across the two consoles. ================================================================ */ /* ---- studio expansion ---- */ .topbar{transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .3s ease;} body.studio-mode .topbar{transform:translateY(-100%);opacity:0;pointer-events:none;} .sidebar{transition:width .3s ease, opacity .26s ease, margin .3s ease, transform .3s ease;} .content{transition:opacity .26s ease, transform .26s ease;} .shell.collapsing{overflow:hidden;} .shell.collapsing .sidebar{width:0 !important;opacity:0;margin:0;transform:translateX(-26px);overflow:hidden;} .shell.collapsing .content{opacity:0;transform:translateY(6px);} #studio-root{position:fixed;inset:0;z-index:60;background:var(--bg); display:flex;flex-direction:column;overflow:hidden; animation:studioIn .42s cubic-bezier(.22,1,.36,1);} .studio{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;} @keyframes studioIn{from{opacity:0;transform:scale(.985) translateY(10px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion: reduce){ #studio-root{animation:none !important;} .topbar,.sidebar,.content{transition:none !important;} } .studio-bar{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 12px; border-bottom:1px solid var(--line);background:var(--panel);flex:none;} .studio-exit{display:inline-flex;align-items:center;gap:4px;padding:7px 12px 7px 8px; border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink2); font-family:var(--display);font-weight:600;font-size:13px;transition:.13s;} .studio-exit:hover{background:var(--panel2);color:var(--ink);border-color:var(--ink3);} .studio-brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--display); font-weight:700;font-size:15.5px;color:var(--ink);border:none;background:none; padding:5px 8px 5px 5px;border-radius:9px;transition:.13s;white-space:nowrap;} .studio-brand .sb-logo{width:28px;height:28px;border-radius:8px;background:var(--accent); color:#fff;display:grid;place-items:center;font-size:17px;flex:none;} .studio-stage{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;} .an-tabpane{padding:22px 30px 72px;max-width:1520px;margin:0 auto;width:100%;} /* Without this a horizontal scroller inside a grid cell widens the track and blows the whole studio out sideways. */ .studio,.studio-stage,.an-tabpane,.an-tabs{min-width:0;} /* ---- report tab bar (pane-switching) ---- */ .an-tabs{flex:1 1 auto;display:flex;align-items:center;gap:2px;margin-left:4px; overflow-x:auto;scrollbar-width:none;min-width:0;} .an-tabs::-webkit-scrollbar{display:none;} /* The transparent 1px border in the BASE rule is load-bearing: .active adds a border colour, and without it every tab switch would reflow the bar. */ .an-tab{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;background:none; border:1px solid transparent;border-radius:10px;color:var(--ink2); font-family:var(--display);font-weight:600;font-size:12.5px;white-space:nowrap; transition:.13s;flex:none;} .an-tab:hover{background:var(--panel2);color:var(--ink);} .an-tab.active{background:var(--accent-soft);color:var(--accent-h);border-color:var(--accent-soft2);} .an-tab .material-icons-outlined{font-size:18px;} .an-tab:focus-visible,.side-item:focus-visible,.an-range button:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:10px;} .an-bar-actions{display:flex;align-items:center;gap:8px;flex:none;} /* ---- date range picker ---- */ .an-range{display:inline-flex;background:var(--panel2);border:1px solid var(--line); border-radius:9px;padding:2px;gap:2px;} .an-range button{padding:5px 10px;border-radius:7px;font-family:var(--display);font-weight:600; font-size:12px;color:var(--ink2);background:none;transition:.12s;} .an-range button:hover{color:var(--ink);} .an-range button.active{background:var(--panel);color:var(--accent-h);box-shadow:var(--shadow);} /* ---- cards / layout ---- */ .an-grid{display:grid;gap:16px;margin-bottom:20px;} .an-grid.c2{grid-template-columns:repeat(auto-fit,minmax(380px,1fr));} .an-grid.c3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:16px 18px;min-width:0;} .card > h3{font-family:var(--display);font-weight:700;font-size:14.5px;margin-bottom:2px; display:flex;align-items:center;gap:7px;} .card > h3 .material-icons-outlined{font-size:18px;color:var(--ink3);} .card .card-sub{font-size:12px;color:var(--ink3);margin-bottom:14px;line-height:1.45;} .card.wide{grid-column:1/-1;} /* delta chip against the previous period */ .delta{display:inline-flex;align-items:center;gap:2px;font-family:var(--display);font-weight:600; font-size:11.5px;padding:1px 7px 1px 4px;border-radius:999px;white-space:nowrap;} .delta .material-icons-outlined{font-size:14px;} .delta.up{background:var(--ok-soft);color:var(--ok-ink);} .delta.down{background:var(--bad-soft);color:var(--bad-ink);} .delta.flat{background:var(--panel2);color:var(--ink3);} /* ---- charts ---- */ .chart{width:100%;display:block;overflow:visible;} .chart .grid-line{stroke:var(--line2);stroke-width:1;} .chart .axis-label{fill:var(--ink3);font-size:10.5px;font-family:var(--display);} .chart .series-line{fill:none;stroke:var(--accent);stroke-width:2; stroke-linejoin:round;stroke-linecap:round;} .chart .series-area{fill:var(--accent-soft);} .chart .series-prev{fill:none;stroke:var(--ink3);stroke-width:1.5;stroke-dasharray:3 3;opacity:.7;} .chart .bar{fill:var(--accent);} .chart .bar.dim{fill:var(--accent-soft2);} .chart .dot{fill:var(--accent);} .chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:11.5px;color:var(--ink2);} .chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px; vertical-align:-1px;} .chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;padding:38px 12px;color:var(--ink3);font-size:13px;text-align:center;} .chart-empty .material-icons-outlined{font-size:26px;opacity:.6;} /* horizontal ranked bars — the workhorse for every dimension breakdown */ .hbars{display:flex;flex-direction:column;gap:9px;} .hbar{display:grid;grid-template-columns:1fr auto;gap:3px 10px;align-items:center;} .hbar .hb-lab{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hbar .hb-val{font-family:var(--mono);font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums;} .hbar .hb-track{grid-column:1/-1;height:7px;border-radius:999px;background:var(--line2);overflow:hidden;} .hbar .hb-fill{display:block;height:100%;border-radius:999px;background:var(--accent); transition:width .35s cubic-bezier(.22,1,.36,1);} .hbar.alt .hb-fill{background:var(--indigo);} /* donut */ .donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;} .donut-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;} .donut-legend .dl{display:flex;align-items:center;gap:8px;} .donut-legend .dl i{width:10px;height:10px;border-radius:3px;flex:none;} .donut-legend .dl .n{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink2); font-variant-numeric:tabular-nums;} /* day x hour heatmap */ .heat{display:grid;grid-template-columns:auto repeat(24,1fr);gap:2px;align-items:center;} .heat .hl{font-size:10px;color:var(--ink3);padding-right:6px;text-align:right;font-family:var(--display);} .heat .hc{aspect-ratio:1;border-radius:2px;background:var(--line2);min-height:9px;} .heat .hh{font-size:9px;color:var(--ink3);text-align:center;} /* realtime */ .rt-dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block; margin-right:7px;animation:rtpulse 2s ease-in-out infinite;} @keyframes rtpulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.82);}} @media (prefers-reduced-motion: reduce){.rt-dot{animation:none;}} .rt-big{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-1.4px; color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.05;} .tail{max-height:420px;overflow-y:auto;} .tail table{font-size:12.5px;} /* estate property cards */ .prop-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:16px 18px;cursor:pointer;transition:.15s;min-width:0; text-align:left;width:100%;display:block;} .prop-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg);} .prop-card .pc-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;} .prop-card .pc-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center; background:var(--accent-soft);color:var(--accent-h);flex:none;} .prop-card .pc-name{font-family:var(--display);font-weight:700;font-size:14.5px;} .prop-card .pc-host{font-family:var(--mono);font-size:10.5px;color:var(--ink3);} .prop-card .pc-nums{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:10px;} .prop-card .pc-n{font-family:var(--display);font-weight:700;font-size:21px; font-variant-numeric:tabular-nums;letter-spacing:-.4px;} .prop-card .pc-l{font-size:10.5px;color:var(--ink3);text-transform:uppercase;letter-spacing:.5px;} /* the honesty note that rides under a number that could be misread */ .qualifier{font-size:11.5px;color:var(--ink3);line-height:1.5;margin-top:10px; padding-top:10px;border-top:1px dashed var(--line);} @media (max-width: 900px){.an-tab-lab{display:none;}.an-tab{padding:8px 10px;}} @media (max-width: 620px){ .studio-bar{padding:8px 10px;gap:8px;} .studio-brand span:not(.sb-logo){display:none;} .studio-brand{padding:5px;} .studio-exit{padding:7px 9px;} .studio-exit span:not(.material-icons-outlined){display:none;} .an-tabpane{padding:18px 14px 60px;} .an-bar-actions .act span:not(.material-icons-outlined){display:none;} }