/* AIFlow base theme — Preflight disabled (Bootstrap-compat per house rules), so we ship our own light reset + brand tokens. Accent = violet. */ :root{ --bg:#0b0b12; --bg2:#11111d; --card:#16162a; --card2:#1d1d33; --line:#272743; --txt:#e7e7f3; --muted:#9a9ab5; --muted2:#6f6f8e; --accent:#7c3aed; --accent2:#a78bfa; --accent-soft:#2a1d52; --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444; --ink:#0d0d0d; --radius:14px; --shadow:0 10px 40px rgba(0,0,0,.45); --header-bg:rgba(11,11,18,.9); --warn-bg:rgba(245,158,11,.16); --warn-txt:#fbbf24; } /* Light (day) theme — applied via data-theme="light" on in dashboard/admin */ :root[data-theme="light"]{ --bg:#f5f6fb; --bg2:#ffffff; --card:#ffffff; --card2:#f3f4fa; --line:#e4e6ef; --txt:#1b1b2b; --muted:#5b5b75; --muted2:#8a8aa0; --accent:#7c3aed; --accent2:#6d28d9; --accent-soft:#ede9fe; --ok:#16a34a; --warn:#b45309; --bad:#dc2626; --ink:#0d0d0d; --shadow:0 10px 30px rgba(20,20,50,.12); --header-bg:rgba(255,255,255,.92); --warn-bg:#fef3c7; --warn-txt:#92400e; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased;line-height:1.55;font-size:15px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0 0 .4em;line-height:1.2;font-weight:800;letter-spacing:-.01em} p{margin:0 0 1em} .container{max-width:1140px;margin:0 auto;padding:0 20px} .btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:0;cursor:pointer; font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px;transition:.15s;text-align:center;line-height:1} .btn:active{transform:translateY(1px)} .btn-primary{background:linear-gradient(135deg,var(--accent),#9333ea);color:#fff} .btn-primary:hover{filter:brightness(1.08)} .btn-ghost{background:transparent;color:var(--txt);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--accent2);color:var(--accent2)} .btn-soft{background:var(--accent-soft);color:var(--accent2)} .btn-danger{background:#dc2626;color:#fff} .btn-danger:hover{filter:brightness(1.08)} .btn-block{width:100%} .btn-sm{padding:7px 13px;font-size:13px;border-radius:8px} /* Tabs */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap} .tab{appearance:none;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted); font-weight:700;font-size:14px;padding:10px 14px;cursor:pointer;margin-bottom:-1px;border-radius:8px 8px 0 0} .tab:hover{color:var(--txt)} .tab.active{color:var(--accent2);border-bottom-color:var(--accent)} .tabpane{display:none} .tabpane.active{display:block} /* Topbar stays within the viewport on small screens (no horizontal scroll) */ @media (max-width:560px){ .topbar-row{padding-left:12px!important;padding-right:12px!important;gap:8px!important} .topbar-row h1{flex:1} #planChip{padding:6px 9px!important;gap:7px!important} .topbar-cap{display:none} /* hide "Current plan / Xd left" caption; keep Upgrade */ } .btn:disabled{opacity:.5;cursor:not-allowed} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius)} .muted{color:var(--muted)} .tag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px} .tag-ok{background:rgba(34,197,94,.14);color:#4ade80} .tag-warn{background:rgba(245,158,11,.16);color:#fbbf24} .tag-bad{background:rgba(239,68,68,.15);color:#f87171} .tag-accent{background:var(--accent-soft);color:var(--accent2)} /* forms */ label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px} .input,select,textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt); border-radius:10px;padding:12px 14px;font-size:16px;font-family:inherit;outline:none;transition:.15s} .input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,58,237,.2)} textarea{resize:vertical;min-height:96px} .field{margin-bottom:16px} /* flash */ .flash{padding:12px 16px;border-radius:10px;margin-bottom:14px;font-size:14px;font-weight:600} .flash-info{background:var(--accent-soft);color:var(--accent2)} .flash-success{background:rgba(34,197,94,.14);color:#4ade80} .flash-error{background:rgba(239,68,68,.15);color:#f87171} /* tables */ table.tbl{width:100%;border-collapse:collapse;font-size:14px} .tbl th,.tbl td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap} .tbl th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700} .tbl tbody tr:hover{background:var(--card2)} /* auth pages */ .auth-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr} .auth-side{background:linear-gradient(160deg,#1a1036,#0b0b12);padding:56px 48px;display:flex;flex-direction:column;justify-content:center} .auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px} .auth-box{width:100%;max-width:400px} .brand{font-weight:900;font-size:22px;letter-spacing:-.02em} .brand .dot{color:var(--accent2)} /* modal */ .modal-back{position:fixed;inset:0;background:rgba(5,5,10,.78);backdrop-filter:blur(4px);z-index:60; display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto} .modal-back.open{display:flex} .modal{background:var(--bg2);border:1px solid var(--line);border-radius:18px;max-width:1040px;width:100%; box-shadow:var(--shadow);animation:zoomin .22s ease} @keyframes zoomin{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}} /* help tip */ .tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px; background:var(--accent-soft);color:var(--accent2);font-size:11px;font-weight:800;cursor:help;vertical-align:middle} .help-box{background:var(--accent-soft);border:1px dashed #4c3a86;border-radius:10px;padding:11px 14px; font-size:13px;color:var(--accent2);margin-bottom:16px;display:flex;gap:9px;align-items:flex-start} @media (max-width:760px){ .auth-wrap{grid-template-columns:1fr} .auth-side{display:none} } .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* Themed sticky topbar (was hardcoded dark inline) */ .topbar{background:var(--header-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} /* Warning / expiry banner — theme-aware contrast */ .flash-warn{background:var(--warn-bg);color:var(--warn-txt)} /* ===== App shell: fixed, collapsible, hover-expand sidebar ===== */ .app-shell{min-height:100vh} #sidebar{position:fixed;top:0;left:0;height:100vh;width:240px;z-index:40; display:flex;flex-direction:column;overflow:hidden; border-radius:0;border-top:0;border-bottom:0;border-left:0;transition:width .18s ease} #sidebar nav{overflow-y:auto;overflow-x:hidden} #mainCol{margin-left:240px;min-width:0;min-height:100vh;display:flex;flex-direction:column;transition:margin-left .18s ease} /* Collapsed (mini) — only the persistent state shifts #mainCol, NOT hover */ #sidebar.mini{width:64px} #sidebar.mini ~ #mainCol{margin-left:64px} #sidebar.mini .sb-full{display:none!important} #sidebar.mini .sb-mini{display:inline!important} #sidebar.mini nav a{justify-content:center} /* Hover-to-expand while collapsed — overlays content, no reflow (margin stays 64) */ #sidebar.mini:hover{width:240px;z-index:60;box-shadow:var(--shadow)} #sidebar.mini:hover .sb-full{display:inline!important} #sidebar.mini:hover .sb-mini{display:none!important} #sidebar.mini:hover nav a{justify-content:flex-start} /* Mobile: off-canvas drawer toggled via .open; .mini (desktop) ignored */ @media(max-width:720px){ #mainCol{margin-left:0!important} #sidebar{width:240px!important;transform:translateX(-100%)} #sidebar.mini{width:240px!important} #sidebar.mini:hover{box-shadow:none} #sidebar.open{transform:none;box-shadow:var(--shadow);z-index:70} } /* Theme toggle button */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);cursor:pointer; font-size:16px;line-height:1;transition:.15s} .theme-toggle:hover{border-color:var(--accent2)} /* Light-theme contrast fixes for status tags & flashes (dark text on pale fills) */ :root[data-theme="light"] .tag-ok{background:#dcfce7;color:#15803d} :root[data-theme="light"] .tag-warn{background:#fef3c7;color:#92400e} :root[data-theme="light"] .tag-bad{background:#fee2e2;color:#b91c1c} :root[data-theme="light"] .flash-success{background:#dcfce7;color:#15803d} :root[data-theme="light"] .flash-error{background:#fee2e2;color:#b91c1c} :root[data-theme="light"] .flash-info{background:#ede9fe;color:#6d28d9} :root[data-theme="light"] .help-box{border-color:#c4b5fd} /* ===== Dashboard polish ===== */ .card-hover{transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease} .card-hover:hover{transform:translateY(-2px);border-color:var(--accent2);box-shadow:var(--shadow)} .dash-greet{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px} .dash-greet h1{font-size:22px;font-weight:800;margin:0;letter-spacing:-.01em} .dash-greet .sub{color:var(--muted);font-size:13px;margin-top:3px} .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px} .stat{padding:16px 18px;display:flex;align-items:center;gap:13px} .stat .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .stat .lbl{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.01em} .stat .val{font-size:26px;font-weight:900;line-height:1.05;margin-top:3px;color:var(--txt)} .qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px} .qa{display:flex;align-items:center;gap:11px;padding:14px 16px;font-weight:700;font-size:14px;color:var(--txt)} .qa .ic{width:34px;height:34px;border-radius:9px;background:var(--accent-soft);color:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0} .qa .ar{margin-left:auto;color:var(--muted2)} .sec-h{display:flex;align-items:center;gap:10px;margin-bottom:14px} .sec-h h2{font-size:16px;margin:0;font-weight:800} .dash-2col{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;align-items:start} @media(max-width:820px){.dash-2col{grid-template-columns:1fr}} /* Two-column form rows that stack on phones */ .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.grid2{grid-template-columns:1fr}}