/* SkillDNA — house style. Tokenised for a SITE-WIDE theme: `dark` (near-black + electric cyan — the SkillDNA brand, and the DEFAULT) and a `light` (cream/charcoal) alternate. Every surface reads from a token so both themes stay coherent; theme.js stamps data-theme on . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root{ --bg:#fafafc; --card:#ffffff; --ink:#191a2e; --muted:#6b7089; --accent:#6c3ce9; --accent-2:#8a63f0; --accent-soft:#f2edfd; --accent-line:#e4d9fb; --line:#eceaf3; --line-2:#e4e2ee; --good:#158a5c; --good-soft:#e5f5ee; --info:#2160c4; --info-soft:#e7f0fd; --warn:#a9720a; --warn-soft:#fbf2df; --gray:#5a5f76; --gray-soft:#eef0f4; --danger:#c23b3b; --danger-soft:#fbe9e9; --input-bg:#ffffff; --topbar-bg:rgba(255,255,255,.86); --hero-grad:linear-gradient(135deg,#f4efff,#fdfbff); --because-bg:#fbfaff; --because-ink:#3a3a52; --soft-ink:#4b3a7d; --login-grad:radial-gradient(1200px 600px at 50% -10%,#efe8ff, #fafafc 60%); --shadow:0 1px 2px rgba(24,20,50,.05), 0 6px 20px rgba(24,20,50,.06); --shadow-lg:0 12px 40px rgba(64,40,140,.14); --radius:14px; /* shared nav (nav.js) — the ONE top bar on every authenticated page. Tokens live here (canonical); nav.js injects the component rules that read them (with dark fallbacks so the stylesheet-less dashboard still renders the bar). */ --sdnav-bg:var(--topbar-bg); --sdnav-ink:var(--ink); --sdnav-muted:var(--muted); --sdnav-accent:var(--accent); --sdnav-accent2:var(--accent-2); --sdnav-line:var(--line); --sdnav-line2:var(--line-2); --sdnav-soft:var(--accent-soft); --sdnav-chip:var(--input-bg); --sdnav-aline:var(--accent-line); } /* DARK — deep-space ground, off-white ink, muted borders; the console's purple accent lifts to stay legible on dark. Restrained, no neon (brand-coherent with the mission-control dashboard). */ :root[data-theme="dark"]{ --bg:#070710; --card:#10101c; --ink:#eef2fb; --muted:#8b93a8; --accent:#00d4ff; --accent-2:#a855f7; --accent-soft:#0e1b26; --accent-line:#123a4a; --line:#191a28; --line-2:#23263a; --good:#10b981; --good-soft:#0c241d; --info:#22d3ee; --info-soft:#0c2530; --warn:#f59e0b; --warn-soft:#2a2011; --gray:#8b93a8; --gray-soft:#171826; --danger:#ec4899; --danger-soft:#2c1320; --input-bg:#0a0a13; --topbar-bg:rgba(7,7,16,.86); --hero-grad:linear-gradient(135deg,#0b1a24,#0a0a14); --because-bg:#0c0c16; --because-ink:#c3c8de; --soft-ink:#b6b0d8; --login-grad:radial-gradient(720px 420px at 82% 6%,rgba(0,212,255,.14),transparent 60%),radial-gradient(680px 460px at 12% 96%,rgba(168,85,247,.13),transparent 58%),linear-gradient(180deg,#07070e,#050508 60%); --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 24px rgba(0,0,0,.4); --shadow-lg:0 18px 50px rgba(0,0,0,.55); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--ink); font:15px/1.55 'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0;font-weight:680;letter-spacing:-.01em;font-family:'Space Grotesk','Inter',-apple-system,BlinkMacSystemFont,sans-serif} .muted{color:var(--muted)} .mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px} .hidden{display:none !important} /* ---- top bar ---- */ .topbar{ position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px; padding:12px 26px;background:var(--topbar-bg);backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } /* theme toggle (mounted by theme.js in every topbar; floats on the login page) */ .theme-toggle{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600; cursor:pointer;padding:6px 11px;border-radius:8px;border:1px solid var(--line-2); background:var(--input-bg);color:var(--ink);transition:border-color .12s,color .12s,background .12s} .theme-toggle:hover{border-color:var(--accent-line);color:var(--accent)} .theme-toggle.float{position:fixed;top:14px;right:16px;z-index:50;box-shadow:var(--shadow)} .brand{display:flex;align-items:center;gap:11px;font-weight:720;letter-spacing:-.02em;font-size:16px} .brand .dot{width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:14px;font-weight:800; box-shadow:0 4px 14px rgba(0,212,255,.4)} .brand small{font-weight:500;color:var(--muted);letter-spacing:0} .topbar .spacer{flex:1} .who{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted)} .who b{color:var(--ink);font-weight:640} /* ---- layout ---- */ .wrap{max-width:1140px;margin:0 auto;padding:30px 26px 80px} .pagehead{display:flex;align-items:flex-end;gap:14px;margin-bottom:22px;flex-wrap:wrap} .pagehead h1{font-size:25px} .pagehead .sub{color:var(--muted);font-size:14px} .crumbs{font-size:13px;color:var(--muted);margin-bottom:14px} .crumbs a{color:var(--muted)} .grid{display:grid;gap:18px} .grid.cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .cols{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start} @media(max-width:880px){.cols{grid-template-columns:1fr}} /* ---- cards ---- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);padding:20px} .card.pad-lg{padding:26px} .card h2{font-size:16px;margin-bottom:4px} .card .hint{color:var(--muted);font-size:13px;margin-bottom:14px} .section-title{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted); font-weight:700;margin:2px 0 12px} /* tenant card (fleet) */ .tcard{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s} .tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--accent-line)} .tcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .tcard h3{font-size:17px} .tcard .vert{color:var(--muted);font-size:12.5px;margin-top:2px;text-transform:capitalize} .stats{display:flex;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .stat{display:flex;flex-direction:column} .stat b{font-size:20px;font-weight:720;letter-spacing:-.02em} .stat span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} /* ---- badges ---- */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:680; padding:3px 9px;border-radius:999px;line-height:1.4;white-space:nowrap} .badge.shared{background:var(--gray-soft);color:var(--gray)} .badge.dedicated_db{background:var(--accent-soft);color:var(--accent)} .badge.regime{background:var(--info-soft);color:var(--info)} .badge.none{background:var(--gray-soft);color:var(--gray)} .badge.gs-signed{background:var(--good-soft);color:var(--good)} .badge.gs-built{background:var(--info-soft);color:var(--info)} .badge.gs-none{background:var(--gray-soft);color:var(--gray)} .badge.CONFIRMED{background:var(--good-soft);color:var(--good)} .badge.STRONG{background:var(--info-soft);color:var(--info)} .badge.PROMISING{background:var(--warn-soft);color:var(--warn)} .badge.EARLY{background:var(--gray-soft);color:var(--gray)} .badge.open{background:var(--good-soft);color:var(--good)} .badge.closed{background:var(--gray-soft);color:var(--gray)} /* ---- tables ---- */ table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted); font-weight:700;padding:8px 12px;border-bottom:1px solid var(--line-2)} td{padding:11px 12px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle} tr.click{cursor:pointer} tr.click:hover td{background:var(--accent-soft)} .tablecard{padding:6px 6px 2px} .table-scroll{overflow-x:auto} /* ---- forms ---- */ label.field{display:block;margin-bottom:13px} label.field .lab{display:block;font-size:12.5px;font-weight:640;color:var(--ink);margin-bottom:5px} input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{ width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px; font:inherit;color:var(--ink);background:var(--input-bg);outline:none;transition:border-color .12s,box-shadow .12s} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .checks{display:grid;grid-template-columns:1fr 1fr;gap:7px 14px} .check{display:flex;align-items:center;gap:8px;font-size:13px;padding:6px 8px;border:1px solid var(--line); border-radius:9px;cursor:pointer;background:var(--input-bg)} .check input{width:auto;margin:0} .check.on{border-color:var(--accent-line);background:var(--accent-soft)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer; font:inherit;font-weight:640;font-size:14px;padding:10px 16px;border-radius:10px;border:1px solid transparent; transition:background .12s,transform .08s,box-shadow .12s} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(108,60,233,.28)} .btn.primary:hover{background:#5c30d0} .btn.ghost{background:var(--input-bg);border-color:var(--line-2);color:var(--ink)} .btn.ghost:hover{border-color:var(--accent-line);color:var(--accent)} .btn.sm{padding:6px 11px;font-size:12.5px;border-radius:8px} .btn.danger{background:var(--danger-soft);color:var(--danger)} .btn.danger:hover{background:#f6dcdc} .btn:disabled{opacity:.5;cursor:not-allowed} .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} /* toggle */ .toggle{position:relative;width:38px;height:22px;border-radius:999px;background:var(--line-2); cursor:pointer;transition:background .15s;flex:none} .toggle.on{background:var(--accent)} .toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)} .toggle.on::after{left:18px} /* ---- tabs ---- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-2);margin-bottom:16px} .tab{padding:9px 14px;font-size:13.5px;font-weight:620;color:var(--muted);cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-1px} .tab.on{color:var(--accent);border-color:var(--accent)} /* ---- human answers ---- */ .hero{background:var(--hero-grad);border:1px solid var(--accent-line); border-radius:16px;padding:24px 26px;margin-bottom:20px} .hero h1{font-size:26px} .hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .hero .tag{font-size:12.5px;background:var(--card);border:1px solid var(--accent-line);color:var(--accent); padding:4px 11px;border-radius:999px;font-weight:600} .qa{margin-bottom:16px} .qa .q{display:flex;align-items:center;gap:11px;margin-bottom:8px} .qa .qn{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-weight:740;font-size:13px;flex:none} .qa .q h3{font-size:15px;color:var(--muted);font-weight:600} .qa .ans{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px;line-height:1.45} .qa .conf{display:flex;align-items:center;gap:9px;margin-bottom:12px} .qa .conf .w{font-size:12px;color:var(--muted)} .because{background:var(--because-bg);border-left:3px solid var(--accent-line);border-radius:0 10px 10px 0; padding:11px 15px;font-size:14px;color:var(--because-ink);margin-bottom:12px} .because .lab{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent); font-weight:700;margin-bottom:4px} .dowith{display:flex;gap:9px;align-items:flex-start;font-size:14px} .dowith .lab{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--good); font-weight:700;background:var(--good-soft);padding:3px 8px;border-radius:6px;flex:none;margin-top:1px} /* technical panel */ .tech{background:#161428;color:#d9d5ec;border-radius:12px;padding:18px 20px;margin-top:6px} .tech .row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #2a2740; font-size:13px} .tech .row:last-child{border-bottom:none} .tech .k{color:#9b95c4} .tech .v{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#efe9ff;text-align:right;word-break:break-all} .verified{display:inline-flex;align-items:center;gap:7px;background:#123726;color:#57d99a; padding:6px 12px;border-radius:999px;font-weight:640;font-size:13px} .unverified{display:inline-flex;align-items:center;gap:7px;background:#3a2417;color:#e0a06a; padding:6px 12px;border-radius:999px;font-weight:640;font-size:13px} /* ---- audit rows ---- */ .arow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px} .arow .act{font-weight:700;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em; padding:2px 7px;border-radius:5px} .arow .act.insert{background:var(--good-soft);color:var(--good)} .arow .act.update{background:var(--info-soft);color:var(--info)} .arow .act.delete{background:var(--danger-soft);color:var(--danger)} .arow .tbl{font-weight:620} .arow .fields{color:var(--muted);flex:1} .arow .when{color:var(--muted);font-size:12px;white-space:nowrap} /* ---- login ---- */ .login-bg{min-height:100vh;display:grid;place-items:center;padding:24px; background:var(--login-grad)} .login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--line); border-radius:18px;box-shadow:var(--shadow-lg);padding:30px 30px 26px} .login-card .brand{justify-content:center;font-size:19px;margin-bottom:4px} .login-card .brand .dot{width:30px;height:30px} .login-sub{text-align:center;color:var(--muted);font-size:13.5px;margin:2px 0 22px} .demo-hint{margin-top:18px;background:var(--accent-soft);border:1px solid var(--accent-line); border-radius:11px;padding:12px 14px;font-size:12.5px;color:var(--soft-ink)} .demo-hint b{color:var(--accent)} .signup-row{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)} .signup-row a{font-weight:640} .demo-hint .u{display:flex;justify-content:space-between;gap:10px;padding:3px 0;cursor:pointer} .demo-hint .u:hover{color:var(--accent)} .err{background:var(--danger-soft);color:var(--danger);border-radius:9px;padding:9px 12px; font-size:13px;margin-bottom:12px} /* misc */ .empty{text-align:center;color:var(--muted);padding:40px 20px} .empty .big{font-size:30px;margin-bottom:8px} .spin{display:inline-block;width:16px;height:16px;border:2px solid var(--accent-line); border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .center-load{display:grid;place-items:center;padding:60px} .pill{font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--gray-soft);color:var(--gray);font-weight:600} .notice{background:var(--card);border:1px dashed var(--accent-line);border-radius:12px;padding:18px 20px;color:var(--soft-ink)}