/* ========================================================================== Theme system — 4 palettes (Default / Day / Light / Dark). Every color used in the app is a CSS custom property here so switching [data-theme] on re-skins the whole app instantly (no reflow of markup). ========================================================================== */ :root, [data-theme="default"]{ --ink:#1B2A3D; --ink-2:#283C52; --ink-3:#33495F; --paper:#F2EFE4; --paper-card:#FBFAF4; --paper-line:#E7E1CF; --brass:#AD8A44; --brass-light:#D9BD84; --brass-dark:#8A6C31; --green:#2E6B52; --green-bg:#E3EEE7; --red:#9B3D3D; --red-bg:#F6E7E5; --red-dark:#7f3232; --amber:#95661F; --amber-bg:#F3E7D4; --slate:#6E6A5C; --border:#DCD5BF; --shadow: 0 1px 2px rgba(27,42,61,0.06), 0 4px 14px rgba(27,42,61,0.07); --input-bg:#FFFFFF; --row-hover:#F7F4E9; --hover-tint:#EFEBDD; --overlay: rgba(27,32,20,.5); --tag-grey-bg:#EAE7DA; --scrollbar-thumb:#CFC7AC; --focus-ring: rgba(173,138,68,.15); --glow-a: rgba(173,138,68,.10); --glow-b: rgba(46,107,82,.08); /* "surface-dark" = always-dark chrome (sidebar, default buttons, tags, badges, toast, OTP panel) */ --surface-dark:#1B2A3D; --surface-dark-text:#EDE9DA; --surface-dark-text-muted:#8E886F; --surface-dark-hover-text:#FFFFFF; --on-accent-dark:#1B1607; --on-accent-light:#FFFFFF; } [data-theme="day"]{ --ink:#0F1F3D; --ink-2:#16294A; --ink-3:#1D3357; --paper:#FFFFFF; --paper-card:#FFFFFF; --paper-line:#E7EBF2; --brass:#C89B2C; --brass-light:#E4C165; --brass-dark:#96741E; --green:#1F7A4D; --green-bg:#E3F4EA; --red:#C23B3B; --red-bg:#FBEAEA; --red-dark:#8F2C2C; --amber:#B36B00; --amber-bg:#FCEEDA; --slate:#5B6472; --border:#DDE3EC; --shadow: 0 1px 2px rgba(15,31,61,0.08), 0 4px 14px rgba(15,31,61,0.08); --input-bg:#FFFFFF; --row-hover:#F3F6FB; --hover-tint:#EAF0F8; --overlay: rgba(15,31,61,.45); --tag-grey-bg:#E9ECF2; --scrollbar-thumb:#C7CEDA; --focus-ring: rgba(200,155,44,.20); --glow-a: rgba(200,155,44,.10); --glow-b: rgba(90,160,220,.10); --surface-dark:#0F1F3D; --surface-dark-text:#DCE6F5; --surface-dark-text-muted:#7C8AA6; --surface-dark-hover-text:#FFFFFF; --on-accent-dark:#0F1F3D; --on-accent-light:#0F1F3D; } [data-theme="light"]{ --ink:#2B3A4A; --ink-2:#34455A; --ink-3:#3D5068; --paper:#EEF1F3; --paper-card:#F8FAFB; --paper-line:#E2E7EA; --brass:#3E8E86; --brass-light:#7FC1BB; --brass-dark:#2E6B65; --green:#2E6B52; --green-bg:#E1EFEA; --red:#9B3D3D; --red-bg:#F3E6E6; --red-dark:#7A2E2E; --amber:#8A6A2F; --amber-bg:#EFE6D4; --slate:#657180; --border:#D7DEE3; --shadow: 0 1px 2px rgba(43,58,74,0.05), 0 4px 14px rgba(43,58,74,0.06); --input-bg:#FFFFFF; --row-hover:#EDF2F4; --hover-tint:#E6ECEF; --overlay: rgba(43,58,74,.4); --tag-grey-bg:#E4E9EC; --scrollbar-thumb:#C3CBD1; --focus-ring: rgba(62,142,134,.18); --glow-a: rgba(62,142,134,.09); --glow-b: rgba(43,58,74,.06); --surface-dark:#2B3A4A; --surface-dark-text:#E7ECEF; --surface-dark-text-muted:#8C97A4; --surface-dark-hover-text:#FFFFFF; --on-accent-dark:#0F2321; --on-accent-light:#0F2321; } [data-theme="dark"]{ --ink:#E9E4D6; --ink-2:#D3CCB8; --ink-3:#BFB8A2; --paper:#1B1D21; --paper-card:#232629; --paper-line:#33373C; --brass:#C9A356; --brass-light:#E3C583; --brass-dark:#9C7B3A; --green:#4FAE85; --green-bg:#1E3229; --red:#E2726B; --red-bg:#3A2323; --red-dark:#C15850; --amber:#E0A857; --amber-bg:#3A2E1B; --slate:#9C9788; --border:#3A3E43; --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.5); --input-bg:#2A2D31; --row-hover:#2A2D31; --hover-tint:#2C2F33; --overlay: rgba(0,0,0,.6); --tag-grey-bg:#33373C; --scrollbar-thumb:#4A4E54; --focus-ring: rgba(201,163,86,.25); --glow-a: rgba(201,163,86,.08); --glow-b: rgba(79,174,133,.07); --surface-dark:#101214; --surface-dark-text:#EDE9DA; --surface-dark-text-muted:#8B8677; --surface-dark-hover-text:#FFFFFF; --on-accent-dark:#1B1607; --on-accent-light:#1B1607; } :root{ --font-display:'Source Serif 4', Georgia, serif; --font-body:'IBM Plex Sans', system-ui, -apple-system, sans-serif; --font-mono:'IBM Plex Mono','Courier New', monospace; } *{box-sizing:border-box;} html{ background:var(--paper);overflow-x:hidden; height:100%; min-height:100%; min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available; } html,body{margin:0;padding:0;} body{ font-family:var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; height:100%; min-height:100%; min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available; overflow-x:hidden; transition:background .15s ease,color .15s ease; } body.nav-open{overflow:hidden;} #app{ min-height:100%; min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available; height:100%; } img,svg,video,canvas{max-width:100%;height:auto;} ::selection{background:var(--brass-light);color:var(--ink);} button{font-family:inherit;cursor:pointer;} input,select,textarea{font-family:inherit;} a{color:inherit;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:6px;} /* ---------- Utility ---------- */ .mono{font-family:var(--font-mono);} .muted{color:var(--slate);} .small{font-size:12px;} .tiny{font-size:11px;} .flex{display:flex;} .flex-between{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;} .flex-col{display:flex;flex-direction:column;} .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .hidden{display:none !important;} .tag{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:600; letter-spacing:.02em;text-transform:uppercase; } .tag.green{background:var(--green-bg);color:var(--green);} .tag.red{background:var(--red-bg);color:var(--red);} .tag.amber{background:var(--amber-bg);color:var(--amber);} .tag.grey{background:var(--tag-grey-bg);color:var(--slate);} .tag.ink{background:var(--surface-dark);color:var(--surface-dark-text);} /* ---------- Buttons ---------- */ .btn{ border:1px solid var(--surface-dark);background:var(--surface-dark);color:var(--surface-dark-text); padding:9px 16px;border-radius:6px;font-size:13.5px;font-weight:600; transition:.15s; letter-spacing:.01em; } .btn:hover{background:var(--ink-2);border-color:var(--ink-2);} .btn:disabled{opacity:.4;cursor:not-allowed;} .btn.outline{background:transparent;color:var(--ink);border:1px solid var(--border);} .btn.outline:hover{background:var(--hover-tint);} .btn.brass{background:var(--brass);border-color:var(--brass);color:var(--on-accent-light);} .btn.brass:hover{background:var(--brass-dark);} .btn.danger{background:var(--red);border-color:var(--red);color:var(--on-accent-light);} .btn.danger:hover{background:var(--red-dark);} .btn.small{padding:6px 11px;font-size:12.5px;border-radius:5px;} .btn.ghost{background:transparent;border:1px solid transparent;color:var(--ink-2);} .btn.ghost:hover{background:var(--hover-tint);} /* ---------- Login landing ---------- */ .login-wrap{ --dl-green:#1F8A45; --dl-navy:#1B3A6B; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:28px 20px 48px; position:relative; overflow-x:hidden; background: radial-gradient(circle at 12% 18%, rgba(34,133,70,.16), transparent 42%), radial-gradient(circle at 88% 78%, rgba(232,168,34,.14), transparent 44%), linear-gradient(165deg, #f4faf6 0%, #eef4f8 48%, #f7f3e8 100%); } .login-shell{ position:relative; z-index:1; width:100%; max-width:1180px; } .dl-brand-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-bottom:28px; animation:ak-fade-up .55s cubic-bezier(.22,.9,.28,1) both; } .dl-brand-bar .dl-mark{ width:56px;height:56px;object-fit:contain;border-radius:10px; background:#fff;border:1px solid rgba(27,58,107,.12); box-shadow:0 6px 18px rgba(27,58,107,.08); } .dl-brand-bar .dl-wordmark{ height:52px;width:auto;max-width:min(340px,58vw);object-fit:contain; background:#fff;border-radius:8px;padding:6px 10px; border:1px solid rgba(31,138,69,.14); } .dl-brand-tag{ flex:1 1 100%;margin:0;color:var(--dl-navy);font-size:13.5px;font-weight:500;opacity:.85; } .dl-download-banner{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px 20px;margin:0 0 26px;padding:16px 18px 16px 20px; background:linear-gradient(135deg,#1B3A6B 0%,#164a7a 58%,#1F8A45 140%); color:#fff;border-radius:14px; box-shadow:0 10px 28px rgba(27,58,107,.22); } .dl-download-copy{display:flex;flex-direction:column;gap:4px;min-width:min(280px,100%);flex:1;} .dl-download-copy strong{font-size:16px;font-weight:700;letter-spacing:.01em;} .dl-download-copy span{font-size:13px;opacity:.9;line-height:1.45;max-width:46ch;} .dl-download-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .dl-download-banner .btn.brass{ padding:12px 20px;font-size:14.5px;font-weight:700;border:0; } .dl-download-banner .btn.outline{ background:transparent;border-color:rgba(255,255,255,.45);color:#fff; padding:10px 14px; } .dl-download-banner .btn.outline:hover{background:rgba(255,255,255,.12);color:#fff;} .login-grid{ display:flex;gap:40px;width:100%;align-items:flex-start; } .login-brand{flex:1;min-width:280px;} .login-brand h1{ font-family:var(--font-display); font-size:clamp(26px,3.2vw,36px); margin:0 0 10px;font-weight:700;letter-spacing:-.02em; color:var(--dl-navy);line-height:1.15;max-width:18ch; } .login-brand > p{ color:#4a5563;font-size:14.5px;line-height:1.65;max-width:min(480px,100%);margin:0 0 18px; } .dl-legal-name{ margin:-4px 0 12px !important;font-size:13px !important;color:#6b7280 !important;max-width:42ch; } .dl-about-body-inline{ max-height:none;overflow:visible;margin:0 0 18px;max-width:min(520px,100%); } .dl-about-meta-inline{margin:0 0 16px;max-width:min(520px,100%);} .dl-login-posts{margin-top:28px;display:grid;gap:14px;} .dl-product-pills{ list-style:none;margin:0 0 18px;padding:0; display:flex;flex-wrap:wrap;gap:8px;max-width:100%; } .dl-product-pills li{ font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--dl-green); background:rgba(31,138,69,.1);border:1px solid rgba(31,138,69,.18); padding:6px 10px;border-radius:6px; } .dl-contact{ display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px; padding-top:14px;border-top:1px solid rgba(27,58,107,.12);max-width:100%; } .dl-contact span{ font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6b7280; } .dl-contact a{ font-family:var(--font-mono);font-size:13px;font-weight:600; color:var(--dl-navy);text-decoration:none; } .dl-contact a:hover{color:var(--dl-green);text-decoration:underline;} /* Single featured poster on the login brand column — full art, fills column width */ .dl-poster{ margin:18px 0 0;width:100%;max-width:100%;border-radius:12px;overflow:hidden; border:1px solid rgba(27,58,107,.12); box-shadow:0 8px 24px rgba(27,58,107,.1); background:#fff; animation:ak-fade-up .65s .08s cubic-bezier(.22,.9,.28,1) both; } .dl-poster img{ display:block;width:100%;height:auto;max-height:none; object-fit:contain;object-position:center center; } .login-card{ background:rgba(255,255,255,.96); border:1px solid rgba(27,58,107,.12); border-radius:14px; padding:28px 28px 30px; width:380px;flex-shrink:0; box-shadow:0 10px 36px rgba(27,58,107,.1), 0 1px 0 rgba(255,255,255,.8) inset; backdrop-filter:blur(8px); } .login-card h2{font-family:var(--font-display);font-size:20px;margin:0 0 4px;} .login-card .sub{color:var(--slate);font-size:13px;margin-bottom:22px;} .login-card .btn{width:100%;padding:11px;font-size:14px;margin-top:6px;} .login-err{ background:var(--red-bg);color:var(--red);padding:9px 12px;border-radius:6px; font-size:13px;margin-bottom:14px;display:none;font-weight:500; } .demo-box{margin-top:22px;padding-top:18px;border-top:1px dashed var(--border);} .demo-box .demo-title{ font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--slate);font-weight:700;margin-bottom:10px; } .demo-acct{ display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 11px;border:1px solid var(--border);border-radius:7px;margin-bottom:7px; background:var(--input-bg);cursor:pointer;transition:.15s; } .demo-acct:hover{border-color:var(--brass);background:var(--row-hover);} .demo-acct .who{font-size:12.5px;} .demo-acct .who b{display:block;font-size:13px;} .demo-acct .creds{ font-family:var(--font-mono);font-size:11.5px;color:var(--brass-dark);text-align:right; } /* About block on the public sign-in page */ .dl-about{ margin-top:28px;padding:18px 20px;background:rgba(255,255,255,.88); border:1px solid rgba(27,58,107,.1);border-radius:12px; box-shadow:0 4px 16px rgba(27,58,107,.06); } .dl-about h2{ margin:0 0 10px;font-family:var(--font-display);font-size:1.15rem;color:var(--ink); } .dl-about-body{ white-space:pre-wrap;line-height:1.55;font-size:13.5px;color:#3d4652; max-height:220px;overflow:auto;margin-bottom:12px; } .dl-about-meta{margin:0;display:grid;gap:8px;} .dl-about-meta > div{display:grid;grid-template-columns:88px 1fr;gap:8px;font-size:13px;} .dl-about-meta dt{margin:0;color:var(--slate);font-weight:600;} .dl-about-meta dd{margin:0;} .dl-about-meta a{color:var(--ink);} /* Supporting image strip — distinct assets only (no repeat of featured poster) */ .dl-sections{ display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px; animation:ak-fade-up .7s .12s cubic-bezier(.22,.9,.28,1) both; } .dl-section{ background:rgba(255,255,255,.88);border:1px solid rgba(27,58,107,.1); border-radius:12px;overflow:hidden; box-shadow:0 4px 16px rgba(27,58,107,.06); transition:transform .25s ease, box-shadow .25s ease; } .dl-section:hover{ transform:translateY(-3px); box-shadow:0 10px 28px rgba(27,58,107,.12); } .dl-section-media{aspect-ratio:16/10;overflow:hidden;background:#e8f0ea;} .dl-section-media img{ width:100%;height:100%;object-fit:cover;object-position:center top; transition:transform .45s ease; } .dl-section:hover .dl-section-media img{transform:scale(1.04);} .dl-section-copy{padding:12px 14px 14px;} .dl-section-copy h3{ margin:0 0 4px;font-size:14px;font-weight:700;color:var(--dl-navy); font-family:var(--font-display); } .dl-section-copy p{margin:0;font-size:12.5px;line-height:1.45;color:#5b6470;} .powered-by{ margin:18px 0 0;text-align:center;font-size:11px;letter-spacing:.04em; color:#8a8790;font-weight:500; } .sidebar-foot .powered-by{ margin:10px 0 0;text-align:left;color:var(--surface-dark-text-muted);opacity:.85; } /* Per-firm branding placeholders (never another firm's art) */ .brand-mark-ph{ width:56px;height:56px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.04em; color:var(--dl-navy,#1B3A6B);background:rgba(27,58,107,.08);border:1px solid rgba(27,58,107,.14); flex-shrink:0; } .brand-media-ph{ width:100%;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:6px;padding:20px 16px;text-align:center;box-sizing:border-box; background:linear-gradient(145deg,rgba(27,58,107,.06),rgba(31,138,69,.07)); border:1px dashed rgba(27,58,107,.2); } .brand-media-ph-name{ font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--dl-navy,#1B3A6B); line-height:1.25;max-width:28ch; } .brand-media-ph-label{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;} .dl-wordmark-text{ font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--dl-navy,#1B3A6B); line-height:1.2;max-width:18ch; } .dl-poster-empty{display:block;} .dl-poster-empty .brand-media-ph{min-height:180px;border:none;border-radius:0;} .dl-about-wordmark-text{ font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--ink); max-width:200px;line-height:1.25; } .dl-about-gallery-empty{margin-top:22px;} .co-media-preview{ width:96px;height:96px;border:1px solid var(--border);border-radius:8px;overflow:hidden; background:var(--bg-2,var(--paper-card));display:flex;align-items:center;justify-content:center; } .co-media-preview img{max-width:100%;max-height:100%;object-fit:contain;} .co-media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;} .co-media-slot{ border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-2,var(--paper-card)); min-height:100px;margin-bottom:8px;display:flex;align-items:center;justify-content:center; } .co-media-slot img{width:100%;height:120px;object-fit:contain;display:block;background:#fff;} @media(max-width:720px){ .co-media-grid{grid-template-columns:1fr;} } .dash-poster{ margin:0;flex:1.4 1 300px;max-width:min(640px,58%);min-width:220px; border-radius:10px;overflow:hidden;border:1px solid var(--border); box-shadow:var(--shadow);background:var(--paper-card); } .dash-poster img{ display:block;width:100%;height:auto;max-height:220px; object-fit:contain;object-position:center center; } .form-group{margin-bottom:15px;} .form-group label{ display:block;font-size:12px;font-weight:600;color:var(--ink-2); margin-bottom:5px;text-transform:uppercase;letter-spacing:.03em; } .form-group input, .form-group select, .form-group textarea{ width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px; font-size:14px;background:var(--input-bg);color:var(--ink); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--focus-ring); } .form-hint{font-size:11.5px;color:var(--slate);margin-top:4px;} @keyframes ak-fade-up{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} } /* ---------- App Shell ---------- */ :root{--sidebar-w:236px;} .app-shell{ display:flex;align-items:stretch; min-height:100%; min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available; width:100%;max-width:100vw; } .sidebar-backdrop{ display:none;position:fixed;inset:0;background:rgba(15,18,24,.46);z-index:90; backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px); } .sidebar-backdrop.show{display:block;} /* * Full-bleed left chrome for browser + Tauri WebView2. * inset + fill-available avoids the short “hanging” bar when 100vh ≠ window height. */ .sidebar{ --sidebar-w:236px; width:var(--sidebar-w); background:var(--surface-dark); color:var(--surface-dark-text); flex-shrink:0; display:flex; flex-direction:column; position:fixed; top:0;left:0;bottom:0; right:auto; width:var(--sidebar-w); height:100%; height:100vh; height:100dvh; height:-webkit-fill-available; min-height:100%; min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available; margin:0; padding:0; padding-bottom:env(safe-area-inset-bottom,0px); border:0; border-radius:0 !important; box-shadow:none; overflow:hidden; z-index:40; box-sizing:border-box; } .app-shell > .main{ margin-left:var(--sidebar-w); flex:1; min-width:0; width:calc(100% - var(--sidebar-w)); } .sidebar-brand{ padding:20px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08); display:flex;align-items:center;gap:10px; flex-shrink:0; } .sidebar-brand .mark{ width:34px;height:34px;border:1.5px solid var(--brass-light);border-radius:6px; display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--brass-light);flex-shrink:0; overflow:hidden;background:rgba(255,255,255,.92); } .sidebar-brand .mark.has-logo{border-color:rgba(255,255,255,.25);padding:2px;} .sidebar-brand .name{font-family:var(--font-display);font-size:16px;line-height:1.15;font-weight:600;min-width:0;} .sidebar-brand .name small{display:block;font-family:var(--font-body);font-size:10px;color:var(--surface-dark-text-muted);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-top:2px;} /* About page brand gallery */ .dl-about-logos{ display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0; } .dl-about-mark{ width:72px;height:72px;object-fit:contain;border-radius:10px; border:1px solid var(--border);background:#fff;padding:4px; } .dl-about-wordmark{ width:140px;height:auto;max-height:72px;object-fit:contain; border:1px solid var(--border);border-radius:10px;background:#fff;padding:6px; } .dl-about-gallery{ display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px; } .dl-about-gallery figure{margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--bg-2,var(--paper-card));} .dl-about-gallery img{ width:100%;aspect-ratio:21/10;object-fit:contain;object-position:center center;display:block;background:#fff; } .dl-about-gallery figcaption{ padding:8px 10px;font-size:12px;font-weight:600;color:var(--ink-2); border-top:1px solid var(--border); } .co-post-card{ border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px; background:var(--paper-card,var(--bg)); } .co-post-card:last-child{margin-bottom:0;} .co-post-media{ display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:10px; } .co-post-media-item{ margin:0;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#111; position:relative; } .co-post-media-item img,.co-post-media-item video{ display:block;width:100%;max-height:220px;object-fit:cover;background:#000; } .co-post-media-item[data-kind="gif"] img{object-fit:contain;background:#fff;} .co-post-media-item .co-post-rm-media{ position:absolute;top:6px;right:6px; } .co-post-public .co-post-media{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} .co-post-public .co-post-media-item img,.co-post-public .co-post-media-item video{max-height:280px;} @media(max-width:720px){ .dl-about-gallery{grid-template-columns:1fr;} .dl-about-logos{flex-direction:row;width:100%;justify-content:flex-start;} .dl-about-wordmark{width:auto;height:56px;} } .sidebar-close{ display:none;margin-left:auto;width:32px;height:32px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:var(--surface-dark-text);border-radius:8px;font-size:20px;line-height:1; align-items:center;justify-content:center;flex-shrink:0; } .sidebar-nav{ flex:1 1 auto; min-height:0; /* allow foot to stay pinned while nav scrolls */ overflow-y:auto;overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:0 0 10px; } .nav-section{padding:14px 12px 4px;font-size:10.5px;color:var(--surface-dark-text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700;} .nav-item{ display:flex;align-items:center;gap:10px;margin:1px 10px;padding:9px 12px;border-radius:6px; font-size:13.5px;color:var(--surface-dark-text);text-decoration:none;font-weight:500;transition:.12s;cursor:pointer; } .nav-item .ic{width:16px;text-align:center;font-size:14px;opacity:.85;flex-shrink:0;} .nav-item:hover{background:rgba(255,255,255,.06);color:var(--surface-dark-hover-text);} .nav-item.active{background:var(--brass);color:var(--on-accent-dark);font-weight:700;} .nav-item.active .ic{opacity:1;} .sidebar-foot{ margin-top:auto; padding:14px 16px max(18px, env(safe-area-inset-bottom, 18px)); border-top:1px solid rgba(255,255,255,.08); flex-shrink:0; background:var(--surface-dark); } .sidebar-user{display:flex;align-items:center;gap:9px;margin-bottom:10px;} .sidebar-user .av{ width:32px;height:32px;border-radius:50%;background:var(--brass);color:var(--on-accent-dark); display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0; } .sidebar-user .info{min-width:0;} .sidebar-user .info b{display:block;font-size:12.5px;color:var(--surface-dark-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-user .info span{font-size:10.5px;color:var(--surface-dark-text-muted);} .sidebar-foot .btn{width:100%;} .sidebar-foot .btn.outline{ color:var(--surface-dark-text);border-color:rgba(255,255,255,.22); } .sidebar-foot .btn.outline:hover{ background:rgba(255,255,255,.08);color:var(--surface-dark-hover-text); } /* Theme switcher (sidebar footer) */ .theme-switcher{margin-bottom:12px;} .theme-switcher-label{ font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:700; color:var(--surface-dark-text-muted);margin-bottom:6px; } .theme-switcher-opts{display:grid;grid-template-columns:1fr 1fr;gap:5px;} .theme-pill{ border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04); color:var(--surface-dark-text);font-size:11px;font-weight:600;padding:6px 4px; border-radius:5px;cursor:pointer;transition:.12s;font-family:inherit; } .theme-pill:hover{background:rgba(255,255,255,.1);color:var(--surface-dark-hover-text);} .theme-pill.active{background:var(--brass);border-color:var(--brass);color:var(--on-accent-dark);} .main{ flex:1;min-width:0;display:flex;flex-direction:column; width:100%; min-height:100%; min-height:100vh; min-height:100dvh; min-height:-webkit-fill-available; } .offline-banner{ display:block;padding:8px 28px;font-size:13px;line-height:1.4; background:var(--amber-bg);color:var(--amber);border-bottom:1px solid var(--border); } .offline-banner--lock{ background:var(--red-bg);color:var(--red-dark);font-weight:600; } [data-theme="dark"] .offline-banner{color:#E3C583;} [data-theme="dark"] .offline-banner--lock{color:#E2726B;} .topbar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:14px 28px;border-bottom:1px solid var(--border);background:var(--paper-card); position:sticky;top:0;z-index:20; } .topbar-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1;} .topbar .crumb{font-size:12.5px;color:var(--slate);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .topbar .crumb b{color:var(--ink);} .topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0;} .topbar-right .btn.small{white-space:nowrap;} .menu-toggle{display:none;flex-shrink:0;} .session-pill{ font-family:var(--font-mono);font-size:11.5px;color:var(--slate); display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:20px; max-width:160px; } .session-pill-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .session-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;} .icon-btn{ width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--input-bg);color:var(--slate); font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s,border-color .15s;flex-shrink:0; } .icon-btn:hover{background:var(--paper-line);color:var(--ink);border-color:var(--brass-dark);} .icon-btn.spinning{animation:icon-spin .7s linear infinite;color:var(--brass-dark);} @keyframes icon-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } .live-refresh-dot{ width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;margin-left:8px; animation:live-pulse 1.6s ease-in-out infinite;vertical-align:middle; } @keyframes live-pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} } .content{ padding:26px 28px 50px;max-width:1400px;width:100%;margin:0 auto; perspective:1400px;transform-style:preserve-3d;overflow-x:hidden; } .page-stage{ transform-origin:50% 50%; will-change:transform,opacity,filter; backface-visibility:hidden; } .page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;} .page-head > div{min-width:0;flex:1 1 220px;} .page-head h1{font-family:var(--font-display);font-size:26px;margin:0 0 4px;font-weight:600;word-break:break-word;} .page-head h2{font-family:var(--font-display);font-size:20px;margin:0 0 4px;font-weight:600;word-break:break-word;} .page-head p{margin:0;color:var(--slate);font-size:13.5px;line-height:1.45;word-break:break-word;} .page-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .section-stack{display:flex;flex-direction:column;gap:16px;} .section-block{margin-bottom:18px;} .section-block:last-child{margin-bottom:0;} .action-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;} .acct-panel{padding:12px 0;border-bottom:1px dashed var(--paper-line);} .acct-panel:last-child{border-bottom:none;padding-bottom:0;} .acct-panel:first-child{padding-top:0;} /* ---------- Cards / stats ---------- */ .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));gap:14px;margin-bottom:22px;} .stat-card{ background:var(--paper-card);border:1px solid var(--border);border-radius:9px;padding:16px 18px; border-top:3px solid var(--brass);min-width:0; } .stat-card.green{border-top-color:var(--green);} .stat-card.red{border-top-color:var(--red);} .stat-card.ink{border-top-color:var(--ink);} .stat-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:700;margin-bottom:8px;} .stat-card .val{font-family:var(--font-mono);font-size:clamp(18px,4.5vw,24px);font-weight:600;word-break:break-word;} .stat-card .sub{font-size:11.5px;color:var(--slate);margin-top:4px;} .card{background:var(--paper-card);border:1px solid var(--border);border-radius:9px;box-shadow:var(--shadow);overflow:hidden;min-width:0;} .card-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} .card-head h3{font-family:var(--font-display);font-size:16.5px;margin:0;font-weight:600;} .card-body{padding:18px 20px;} .two-col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start;} @media(max-width:980px){.two-col{grid-template-columns:1fr;}} /* ---------- Tables ---------- */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;} table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px;} thead th{ text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate); padding:9px 14px;border-bottom:1.5px solid var(--ink);font-weight:700;white-space:nowrap; } thead th.sortable-th{cursor:pointer;user-select:none;transition:color .15s;} thead th.sortable-th:hover{color:var(--brass-dark);} thead th.sortable-th.active{color:var(--brass-dark);} tbody td{padding:11px 14px;border-bottom:1px solid var(--paper-line);vertical-align:middle;} tbody tr:hover{background:var(--row-hover);} tbody tr.corrected-row{background:linear-gradient(90deg, rgba(155,61,61,.05), transparent 40%);} .amt-credit{color:var(--green);font-family:var(--font-mono);font-weight:600;} .amt-debit{color:var(--red);font-family:var(--font-mono);font-weight:600;} .row-link{color:var(--ink);font-weight:600;text-decoration:none;cursor:pointer;} .row-link:hover{color:var(--brass-dark);text-decoration:underline;} .search-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;width:100%;} .search-bar input, .search-bar select{ padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:var(--input-bg);color:var(--ink); max-width:100%; } .search-bar input{min-width:min(220px,100%);flex:1 1 180px;} .pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 20px;border-top:1px solid var(--border);font-size:12.5px;color:var(--slate);flex-wrap:wrap;} /* correction stamp */ .stamp{ display:inline-block;border:2px solid var(--red);color:var(--red); font-family:var(--font-mono);font-weight:700;font-size:9.5px;letter-spacing:.06em; padding:2px 6px;border-radius:3px;transform:rotate(-4deg);text-transform:uppercase; background:rgba(155,61,61,.04); } .stamp.brass{border-color:var(--brass-dark);color:var(--brass-dark);background:rgba(173,138,68,.06);} .link-chip{ font-family:var(--font-mono);font-size:11px;color:var(--brass-dark);cursor:pointer; border-bottom:1px dotted var(--brass-dark); } .link-chip:hover{color:var(--ink);} /* correction group visual block */ .corr-group{border:1px solid var(--border);border-radius:8px;margin-bottom:14px;overflow:hidden;} .corr-group .corr-meta{ background:var(--red-bg);padding:10px 16px;font-size:12px;display:flex;flex-wrap:wrap;gap:16px;color:#7a3030; border-bottom:1px solid var(--border); } .corr-meta b{color:var(--red);} .corr-entries{padding:0;} .corr-entry{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--paper-line);} .corr-entry:last-child{border-bottom:none;} .corr-entry .role-badge{width:96px;flex-shrink:0;} /* ---------- Modal ---------- */ .modal-overlay{ position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center; z-index:200;padding:20px; } .modal-overlay{animation:overlay-in .28s ease;} .modal{ background:var(--paper-card);border-radius:10px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.3);border:1px solid var(--border); animation:modal-open-book .42s cubic-bezier(.22,.9,.28,1); transform-origin:left center; } @keyframes overlay-in{from{opacity:0;}to{opacity:1;}} @keyframes modal-open-book{ from{transform:perspective(900px) rotateY(-72deg) translateX(-18px);opacity:0;} to{transform:perspective(900px) rotateY(0) translateX(0);opacity:1;} } .modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;} .modal-head h3{margin:0;font-family:var(--font-display);font-size:18px;} .modal-close{background:none;border:none;font-size:20px;color:var(--slate);line-height:1;padding:4px;} .modal-body{padding:20px 22px;} .modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;} .kv{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--paper-line);font-size:13px;} .kv b{font-family:var(--font-mono);} /* ---------- Toast ---------- */ #toastHost{position:fixed;bottom:22px;right:22px;z-index:400;display:flex;flex-direction:column;gap:8px;} .toast{ background:var(--surface-dark);color:var(--surface-dark-text);padding:12px 16px;border-radius:7px;font-size:13px;box-shadow:var(--shadow); display:flex;align-items:center;gap:10px;min-width:260px;animation:slideIn .2s ease;border-left:4px solid var(--brass); } .toast.err{border-left-color:var(--red);} .toast.ok{border-left-color:var(--green);} @keyframes slideIn{from{transform:translateX(30px);opacity:0;}to{transform:translateX(0);opacity:1;}} /* masked field */ .mask-field{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);} .mask-toggle{font-size:11px;color:var(--brass-dark);cursor:pointer;border-bottom:1px dotted var(--brass-dark);} .lock-ic{opacity:.6;font-size:11px;} /* tabs */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;} .tab-btn{padding:9px 16px;font-size:13px;font-weight:600;color:var(--slate);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex-shrink:0;} .tab-btn.active{color:var(--ink);border-bottom-color:var(--brass);} .denied-tip{position:relative;display:inline-block;} .badge-avatar{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#F2EFE4;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;} .empty-state{padding:40px 20px;text-align:center;color:var(--slate);} .empty-state .ic{font-size:26px;margin-bottom:8px;} .progress-track{height:6px;border-radius:3px;background:#E7E1CF;overflow:hidden;} .progress-fill{height:100%;background:var(--brass);} .spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;} @keyframes spin{to{transform:rotate(360deg);}} /* ---------- Responsive / mobile ---------- */ @media(max-width:880px){ :root{--sidebar-w:min(286px,86vw);} .menu-toggle{display:flex;} .sidebar-close{display:inline-flex;} .app-shell > .main{margin-left:0;width:100%;} .sidebar{ position:fixed;left:0;top:0;bottom:0; width:var(--sidebar-w); height:100%; height:100dvh; height:-webkit-fill-available; z-index:100; transform:translateX(-105%); transition:transform .22s ease; box-shadow:none; padding-top:env(safe-area-inset-top); border-radius:0 !important; } .sidebar.open{ transform:translateX(0); box-shadow:12px 0 40px rgba(0,0,0,.28); } .content{padding:16px 14px max(40px, env(safe-area-inset-bottom));} .topbar{padding:10px 14px;padding-top:max(10px, env(safe-area-inset-top));gap:8px;} .crumb-root{display:none;} .session-pill{display:none;} .role-tag{display:none;} .page-head{align-items:flex-start;margin-bottom:16px;gap:10px;} .page-head h1{font-size:22px;} .page-head h2{font-size:18px;} .page-head > .btn, .page-head > .flex, .page-head-actions{width:100%;} .page-head > .btn{justify-content:center;} .stat-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;} .stat-card{padding:12px 14px;} .card-head,.card-body{padding:14px 14px;} .two-col{gap:14px;} .section-stack{gap:14px;} .login-grid{flex-direction:column;gap:28px;align-items:stretch;} .login-card{width:100%;max-width:420px;margin:0 auto;padding:24px 18px;} .login-brand{min-width:0;} .login-brand h1{font-size:28px;max-width:none;} .dl-download-banner{padding:14px;} .dl-download-banner .btn.brass, .dl-download-banner .btn.outline{width:100%;justify-content:center;} .dl-poster{max-width:100%;width:100%;} .dl-poster img{max-height:none;} .dl-sections{grid-template-columns:1fr;gap:12px;margin-top:28px;} .dl-brand-bar .dl-wordmark{height:44px;} .dl-brand-bar .dl-mark{width:48px;height:48px;} .dash-poster{order:3;max-width:100%;flex:1 1 100%;min-width:0;} .dash-poster img{max-height:200px;height:auto;} .modal-overlay{padding:12px;align-items:flex-end;} .modal{max-height:92vh;border-radius:12px 12px 8px 8px;} .modal-head,.modal-body,.modal-foot{padding-left:16px;padding-right:16px;} .modal-foot{flex-wrap:wrap;} .modal-foot .btn{flex:1 1 auto;} #toastHost{left:12px;right:12px;bottom:14px;align-items:stretch;} .toast{min-width:0;width:100%;} .otp-reveal span{font-size:26px;letter-spacing:.18em;} .otp-input{font-size:18px !important;letter-spacing:.2em !important;} .reminder-row{align-items:flex-start;gap:10px;} .reminder-amt{text-align:left;} .corr-entry{flex-wrap:wrap;gap:8px;} .corr-entry .role-badge{width:auto;} .ledger-sheet{padding:14px 12px;margin-top:14px;} .ledger-head{flex-direction:column;align-items:flex-start;} .ledger-summary{gap:12px 18px;padding:10px 12px;} .cal-cell{min-height:52px;padding:4px 5px;} .cal-summary{display:none;} .cal-grid{gap:4px;} .field-row{flex-direction:column;gap:0;} .toolbar{gap:8px;} .toolbar select,.toolbar input{width:100%;max-width:100%;} .metric-grid{grid-template-columns:1fr 1fr;} .kv-grid{grid-template-columns:1fr;padding:10px 12px;} .doc-row{flex-wrap:wrap;} .action-row .btn{flex:1 1 auto;justify-content:center;text-align:center;} } .draft-restored-banner{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; margin:0 0 12px;padding:9px 12px;border-radius:8px; background:var(--amber-bg);border:1px solid rgba(180,120,20,.28); color:var(--ink);font-size:12.5px;line-height:1.35; } .draft-restored-banner button{ border:0;background:transparent;color:var(--brass-dark);font-weight:700; font-size:12px;padding:0;cursor:pointer;white-space:nowrap;font-family:inherit; } .draft-restored-banner button:hover{text-decoration:underline;} /* ---------- Avatars (initials or uploaded photo) ---------- */ .sidebar-user{cursor:pointer;border-radius:8px;padding:6px;margin:-6px -6px 4px;transition:.12s;} .sidebar-user:hover{background:rgba(255,255,255,.06);} .av.has-photo, .badge-avatar.has-photo{padding:0;overflow:hidden;background:none;} .av.has-photo img, .badge-avatar.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;} /* ---------- My Profile modal ---------- */ .profile-modal-head{display:flex;align-items:center;gap:16px;} .profile-modal-head b{font-size:15px;} /* ---------- OTP hand-over UI ---------- */ .otp-reveal{ text-align:center;padding:22px 10px;margin:14px 0;background:var(--surface-dark);border-radius:10px; display:flex;flex-direction:column;align-items:center;gap:10px; } .otp-reveal span{ font-family:var(--font-mono);font-size:34px;font-weight:700;letter-spacing:.28em;color:var(--brass-light); } .otp-reveal .otp-mask-value{ user-select:none; } .otp-reveal[data-masked="0"] .otp-mask-value{ user-select:text; } .otp-reveal .mask-toggle{ font-size:12px;font-weight:600;letter-spacing:0;color:var(--brass-light);cursor:pointer; border:1px solid rgba(212,175,110,.4);border-radius:20px;padding:4px 12px;background:rgba(255,255,255,.04); } .otp-reveal .mask-toggle:hover{ background:rgba(255,255,255,.1); } .otp-input{font-size:22px !important;letter-spacing:.3em !important;text-align:center;} .otp-warning{ display:flex;gap:10px;align-items:flex-start;background:var(--amber-bg);color:var(--amber); border:1px solid var(--brass-light);border-radius:8px;padding:11px 13px;font-size:12.5px;line-height:1.5;margin:12px 0; } .otp-warning .ic{flex-shrink:0;font-size:15px;} /* ---------- Reminders ---------- */ .reminder-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--paper-line);flex-wrap:wrap;} .reminder-row:last-child{border-bottom:none;} .reminder-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;} .reminder-dot.red{background:var(--red);} .reminder-dot.amber{background:var(--amber);} .reminder-dot.grey{background:var(--slate);} .reminder-body{flex:1;min-width:0;font-size:13px;} .reminder-body b{word-break:break-word;} .reminder-amt{text-align:right;flex-shrink:0;} /* ---------- Account switcher (My Accounts) & mini account cards ---------- */ .acct-mini{padding:10px;margin:0 -10px;border-radius:8px;border-bottom:1px dashed var(--paper-line);cursor:pointer;transition:.12s;} .acct-mini:last-child{border-bottom:none;} .acct-mini:hover{background:var(--row-hover);} /* ---------- Document lists (loan PDFs) ---------- */ .doc-list{display:flex;flex-direction:column;gap:2px;} .doc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--paper-line);} .doc-row:last-child{border-bottom:none;} .doc-link{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:6px;} .doc-link:hover{color:var(--brass-dark);text-decoration:underline;} .doc-link .ic{opacity:.75;} textarea{resize:vertical;min-height:60px;} /* ---------- Daily Ledger Calendar ---------- */ .cal-card-head{ justify-content:flex-start; } .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;} .cal-grid-head{margin-bottom:6px;} .cal-cell-label{text-align:center;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;padding:4px 0;} .cal-cell{ position:relative;aspect-ratio:1/1.05;min-height:68px;border:1px solid var(--border);border-radius:8px; display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;cursor:pointer;background:var(--input-bg); transition:background .12s,border-color .12s;padding:6px 7px;overflow:hidden; } .cal-cell.empty{border:none;background:transparent;cursor:default;} .cal-cell:not(.empty):hover{background:var(--row-hover);border-color:var(--brass-dark);} .cal-cell.today{border-color:var(--brass-dark);border-width:2px;} .cal-cell.selected{background:var(--ink);border-color:var(--ink);} .cal-cell.selected .cal-daynum{color:var(--brass-light);} .cal-daynum{font-family:var(--font-mono);font-size:12px;font-weight:700;align-self:flex-end;} .cal-dot{width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:auto;align-self:center;} .cal-cell.selected .cal-dot{background:var(--brass-light);} .cal-summary{margin-top:4px;display:flex;flex-direction:column;gap:1px;width:100%;} .cal-summary-line{ font-size:9.5px;line-height:1.25;color:var(--slate);font-weight:600; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .cal-cell.selected .cal-summary-line{color:var(--brass-light);} .cal-cell.has-activity{border-color:var(--brass);} /* ---------- Professional ledger / statement sheet ---------- */ .ledger-sheet{ background:var(--paper-card);border:1px solid var(--border);border-radius:10px;padding:20px 22px;margin-top:18px; } .ledger-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;} .ledger-head h3{font-family:var(--font-display);font-size:17px;margin:0 0 2px;} .ledger-summary{ display:flex;gap:28px;flex-wrap:wrap;padding:12px 16px;margin-bottom:14px; background:var(--paper-line);border-radius:8px;border:1px solid var(--border); } .ledger-summary > div{display:flex;flex-direction:column;gap:2px;} .ledger-summary b{font-family:var(--font-mono);font-size:15px;} .ledger-table thead th{background:var(--surface-dark);color:var(--brass-light);border-bottom:none;} .ledger-opening-row td{background:var(--row-hover);font-style:italic;} .ledger-footnote{margin-top:10px;text-align:right;} /* ---------- Messages inbox ---------- */ .nav-badge{ margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px; background:var(--amber);color:#1a1208;font-size:10px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;line-height:1; } .nav-item.active .nav-badge{background:var(--on-accent-dark);color:var(--brass);} .msg-layout{ display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:14px;min-height:calc(100vh - 180px); } .msg-sidebar{display:flex;flex-direction:column;overflow:hidden;padding:0;} .msg-sidebar .card-head{padding:12px 14px;border-bottom:1px solid var(--border);} .msg-conv-list{overflow:auto;flex:1;max-height:calc(100vh - 240px);} .msg-conv{ display:block;width:100%;text-align:left;border:none;border-bottom:1px solid var(--border); background:transparent;padding:12px 14px;cursor:pointer;color:inherit;font:inherit; } .msg-conv:hover{background:var(--row-hover);} .msg-conv.active{background:var(--amber-bg);border-left:3px solid var(--brass);} .msg-conv-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;} .msg-conv-top b{font-size:13px;} .msg-conv-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .msg-unread{ background:var(--brass);color:var(--on-accent-dark);border-radius:10px;min-width:18px;height:18px; padding:0 6px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center; } .msg-main{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:420px;} .msg-thread-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;} .msg-thread-head h3{margin:0 0 2px;font-family:var(--font-display);font-size:17px;} .msg-thread-body{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 340px);} .msg-empty{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;} .msg-bubble{ max-width:min(560px,92%);padding:10px 12px;border-radius:10px;border:1px solid var(--border); background:var(--paper-line);align-self:flex-start;overflow:visible; } .msg-bubble.mine{align-self:flex-end;background:var(--amber-bg);border-color:var(--brass);} .msg-bubble.system{align-self:stretch;max-width:100%;background:var(--paper-card);border-style:dashed;} .msg-meta{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px;font-size:11px;} .msg-text{font-size:13.5px;white-space:pre-wrap;word-break:break-word;} .msg-reminder b{display:block;font-size:13.5px;margin-bottom:4px;} .msg-reminder p{margin:0;font-size:13px;color:var(--slate);} .msg-otp-label{font-weight:700;font-size:13px;} .msg-att-block{margin-top:8px;} .msg-att-img{display:block;margin-top:4px;} .msg-att-img img{ display:block;max-width:min(360px,100%);max-height:320px;width:auto;height:auto; border-radius:8px;border:1px solid var(--border);background:var(--paper-card);object-fit:contain; } .msg-att-caption{margin-top:6px;font-size:12px;color:var(--slate);} .msg-att-caption a{color:var(--brass-dark);font-weight:600;} .msg-att-file{ display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:10px 12px;border-radius:8px; border:1px solid var(--border);background:var(--paper-card);color:inherit;text-decoration:none;font-size:13px; max-width:100%; } .msg-att-file:hover{border-color:var(--brass-dark);background:var(--row-hover);} .msg-att-name{font-weight:600;word-break:break-word;} .msg-att-missing{ margin-top:8px;padding:8px 10px;border-radius:8px;border:1px dashed var(--border); font-size:12px;color:var(--slate); } .msg-compose{border-top:1px solid var(--border);padding:12px 14px;display:flex;flex-direction:column;gap:8px;flex-shrink:0;background:var(--paper-card);} .msg-compose textarea{ width:100%;resize:vertical;min-height:56px;padding:10px 12px;border:1px solid var(--border); border-radius:8px;font:inherit;background:var(--input-bg);color:inherit; } .msg-compose-actions{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;} .msg-attach-wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;position:relative;} .msg-attach-wrap input[type="file"]{ position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;z-index:-1; } .tag.brass{background:rgba(173,138,68,.18);color:var(--brass-dark);} .msg-dir-list{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:8px;margin-top:8px;} .msg-dir-row{ display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:none;border-bottom:1px solid var(--border); background:transparent;padding:10px 12px;cursor:pointer;font:inherit;color:inherit; } .msg-dir-row:hover{background:var(--row-hover);} .msg-mention-menu{ position:absolute;left:0;right:0;bottom:100%;z-index:20; max-height:220px;overflow:auto;margin-bottom:4px; background:var(--paper-card);border:1px solid var(--border);border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); } .msg-mention-row{ display:flex;flex-direction:column;gap:2px;width:100%;text-align:left; padding:8px 12px;border:0;background:transparent;cursor:pointer;font:inherit;color:inherit; } .msg-mention-row:hover,.msg-mention-row.active{background:var(--row-hover);} .pad-sm{padding:10px 12px;} @media (max-width:900px){ .msg-layout{grid-template-columns:1fr;} .msg-conv-list,.msg-thread-body{max-height:280px;} .msg-att-img img{max-height:220px;} } /* ---------- Analytics metrics ---------- */ .metric-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:12px;margin-top:4px; } .metric-card{ background:var(--paper-card);border:1px solid var(--border);border-radius:10px;padding:14px 16px; } .metric-card.tone-good{border-color:var(--green);} .metric-card.tone-bad{border-color:var(--amber);} .metric-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);font-weight:700;} .metric-value{font-family:var(--font-mono);font-size:20px;font-weight:700;margin-top:6px;} .metric-hint{font-size:11px;color:var(--slate);margin-top:4px;} .kv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:8px 18px;padding:12px 16px;} .analytics-toolbar{flex-wrap:wrap;} .field-row{display:flex;gap:12px;} .field-row .field{flex:1;min-width:0;} .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;} .toolbar select,.toolbar input{ padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--paper-card); font:inherit;color:inherit;max-width:100%; } @media print{ body.printing-ledger *:not(.print-target):not(.print-target *), body.printing-vendor *:not(.print-target):not(.print-target *){ visibility:hidden !important; } body.printing-ledger .print-target, body.printing-ledger .print-target *, body.printing-vendor .print-target, body.printing-vendor .print-target *{ visibility:visible !important; } body.printing-ledger, body.printing-vendor{ background:#fff !important; } body.printing-ledger .print-target, body.printing-vendor .print-target{ position:absolute;left:0;top:0;width:100%;margin:0;border:none;box-shadow:none;padding:0; } .no-print{ display:none !important; } .vendor-print-sheet{ font-family: Georgia, "Times New Roman", serif; color:#111; padding:18px 22px; line-height:1.45; } .vendor-print-sheet h1{ font-size:20pt; margin:0 0 4px; } .vendor-print-sheet h2{ font-size:13pt; margin:18px 0 8px; border-bottom:1px solid #ccc; padding-bottom:4px; } .vendor-print-sheet .meta{ font-size:10pt; color:#444; margin:0 0 14px; } .vendor-print-sheet table{ width:100%; border-collapse:collapse; font-size:10pt; margin:0 0 8px; } .vendor-print-sheet th, .vendor-print-sheet td{ border:1px solid #bbb; padding:6px 8px; text-align:left; vertical-align:top; } .vendor-print-sheet th{ background:#f3f3f3; } .vendor-print-sheet code, .vendor-print-sheet .mono{ font-family: Consolas, "Courier New", monospace; font-size:9.5pt; word-break:break-all; } .vendor-print-sheet .warn{ border:1px solid #c9a227; background:#fff8e1; padding:8px 10px; margin:10px 0 14px; font-size:9.5pt; } .vendor-print-sheet .steps{ font-size:10pt; margin:8px 0 0; padding-left:18px; } } /* ========================================================================== Page transitions — unique enter/exit per section slide-in/out/up/down · roll-paper · spin-in/out · open/close book · fold ========================================================================== */ .page-enter{animation-fill-mode:both;animation-timing-function:cubic-bezier(.22,.9,.28,1);} .page-exit{animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.4,0,.2,1);pointer-events:none;} .page-enter--slide-in{animation-name:ak-slide-in;animation-duration:.48s;} .page-exit--slide-out{animation-name:ak-slide-out;animation-duration:.32s;} .page-enter--slide-out{animation-name:ak-slide-from-left;animation-duration:.48s;} .page-exit--slide-in{animation-name:ak-slide-to-right;animation-duration:.32s;} .page-enter--slide-up{animation-name:ak-slide-up;animation-duration:.48s;} .page-exit--slide-down{animation-name:ak-slide-to-down;animation-duration:.32s;} .page-enter--slide-down{animation-name:ak-slide-down;animation-duration:.48s;} .page-exit--slide-up{animation-name:ak-slide-to-up;animation-duration:.32s;} .page-enter--roll-paper{animation-name:ak-roll-paper-in;animation-duration:.58s;} .page-exit--roll-paper{animation-name:ak-roll-paper-out;animation-duration:.36s;} .page-enter--spin-in{animation-name:ak-spin-in;animation-duration:.55s;} .page-exit--spin-out{animation-name:ak-spin-out;animation-duration:.34s;} .page-enter--open-book{animation-name:ak-open-book;animation-duration:.58s;transform-origin:left center;} .page-exit--close-book{animation-name:ak-close-book;animation-duration:.36s;transform-origin:left center;} .page-enter--close-book{animation-name:ak-close-book-in;animation-duration:.55s;transform-origin:right center;} .page-exit--open-book{animation-name:ak-open-book-out;animation-duration:.34s;transform-origin:right center;} .page-enter--fold-paper{animation-name:ak-fold-in;animation-duration:.55s;transform-origin:top center;} .page-exit--fold-paper{animation-name:ak-fold-out;animation-duration:.34s;transform-origin:top center;} .page-enter--fade{animation-name:ak-fade-in;animation-duration:.28s;} @keyframes ak-slide-in{ from{transform:translateX(42px);opacity:0;filter:blur(2px);} to{transform:translateX(0);opacity:1;filter:blur(0);} } @keyframes ak-slide-out{ from{transform:translateX(0);opacity:1;} to{transform:translateX(-36px);opacity:0;} } @keyframes ak-slide-from-left{ from{transform:translateX(-42px);opacity:0;} to{transform:translateX(0);opacity:1;} } @keyframes ak-slide-to-right{ from{transform:translateX(0);opacity:1;} to{transform:translateX(36px);opacity:0;} } @keyframes ak-slide-up{ from{transform:translateY(36px);opacity:0;} to{transform:translateY(0);opacity:1;} } @keyframes ak-slide-to-down{ from{transform:translateY(0);opacity:1;} to{transform:translateY(28px);opacity:0;} } @keyframes ak-slide-down{ from{transform:translateY(-32px);opacity:0;} to{transform:translateY(0);opacity:1;} } @keyframes ak-slide-to-up{ from{transform:translateY(0);opacity:1;} to{transform:translateY(-24px);opacity:0;} } @keyframes ak-roll-paper-in{ 0%{transform:perspective(1100px) rotateX(82deg) scaleY(.35);opacity:0;filter:brightness(.92);} 55%{transform:perspective(1100px) rotateX(-8deg) scaleY(1.02);opacity:1;} 100%{transform:perspective(1100px) rotateX(0) scaleY(1);opacity:1;filter:brightness(1);} } @keyframes ak-roll-paper-out{ from{transform:perspective(1100px) rotateX(0) scaleY(1);opacity:1;} to{transform:perspective(1100px) rotateX(-76deg) scaleY(.4);opacity:0;} } @keyframes ak-spin-in{ from{transform:rotate(-18deg) scale(.86);opacity:0;} 60%{transform:rotate(4deg) scale(1.02);opacity:1;} to{transform:rotate(0) scale(1);opacity:1;} } @keyframes ak-spin-out{ from{transform:rotate(0) scale(1);opacity:1;} to{transform:rotate(16deg) scale(.9);opacity:0;} } @keyframes ak-open-book{ from{transform:perspective(1200px) rotateY(-88deg);opacity:0;} 70%{transform:perspective(1200px) rotateY(6deg);opacity:1;} to{transform:perspective(1200px) rotateY(0);opacity:1;} } @keyframes ak-close-book{ from{transform:perspective(1200px) rotateY(0);opacity:1;} to{transform:perspective(1200px) rotateY(-86deg);opacity:0;} } @keyframes ak-close-book-in{ from{transform:perspective(1200px) rotateY(88deg);opacity:0;} 70%{transform:perspective(1200px) rotateY(-5deg);opacity:1;} to{transform:perspective(1200px) rotateY(0);opacity:1;} } @keyframes ak-open-book-out{ from{transform:perspective(1200px) rotateY(0);opacity:1;} to{transform:perspective(1200px) rotateY(86deg);opacity:0;} } @keyframes ak-fold-in{ 0%{transform:perspective(1000px) rotateX(-88deg) translateY(-18px);opacity:0;} 55%{transform:perspective(1000px) rotateX(8deg) translateY(0);opacity:1;} 100%{transform:perspective(1000px) rotateX(0) translateY(0);opacity:1;} } @keyframes ak-fold-out{ from{transform:perspective(1000px) rotateX(0);opacity:1;} to{transform:perspective(1000px) rotateX(78deg) translateY(12px);opacity:0;} } @keyframes ak-fade-in{ from{opacity:0;} to{opacity:1;} } /* Staggered content settle after a page enter */ .page-enter .stat-card, .page-enter .card, .page-enter .page-head{ animation:ak-settle .5s cubic-bezier(.22,.9,.28,1) both; } .page-enter .page-head{animation-delay:.04s;} .page-enter .stat-card:nth-child(1){animation-delay:.08s;} .page-enter .stat-card:nth-child(2){animation-delay:.14s;} .page-enter .stat-card:nth-child(3){animation-delay:.2s;} .page-enter .stat-card:nth-child(4){animation-delay:.26s;} .page-enter .card:nth-of-type(1){animation-delay:.12s;} .page-enter .card:nth-of-type(2){animation-delay:.18s;} .page-enter .card:nth-of-type(3){animation-delay:.24s;} @keyframes ak-settle{ from{transform:translateY(10px);opacity:0;} to{transform:translateY(0);opacity:1;} } /* Nav active pulse */ .nav-item{position:relative;} .nav-item.active{ animation:nav-activate .35s ease; } @keyframes nav-activate{ from{transform:translateX(-4px);filter:brightness(1.08);} to{transform:translateX(0);filter:brightness(1);} } /* Login entrance */ .login-brand{animation:ak-slide-from-left .6s cubic-bezier(.22,.9,.28,1) both;} .login-card{animation:ak-open-book .65s cubic-bezier(.22,.9,.28,1) .08s both;transform-origin:left center;} /* ========================================================================== Savings motifs — money bag collecting coins + savings pool ========================================================================== */ .savings-motif{ display:flex;align-items:flex-end;justify-content:flex-end;gap:18px; flex-shrink:0;margin-left:auto;min-height:88px;padding:4px 2px 0; } .savings-motif.compact{min-height:72px;gap:12px;transform:scale(.92);transform-origin:right bottom;} .savings-bag{ position:relative;width:64px;height:78px; animation:bag-bob 2.8s ease-in-out infinite; } .bag-top{ position:absolute;top:8px;left:50%;width:34px;height:12px;margin-left:-17px; background:linear-gradient(180deg,var(--brass-light),var(--brass)); border-radius:4px 4px 2px 2px;border:1px solid var(--brass-dark); z-index:2; } .bag-body{ position:absolute;left:50%;bottom:0;width:52px;height:58px;margin-left:-26px; background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.22), transparent 45%), linear-gradient(160deg,var(--brass),var(--brass-dark)); border-radius:18px 18px 22px 22px / 14px 14px 28px 28px; border:1px solid var(--brass-dark); box-shadow:inset 0 -8px 0 rgba(0,0,0,.08); } .bag-body::after{ content:'$';position:absolute;left:50%;top:52%;transform:translate(-50%,-50%); font-family:var(--font-display);font-weight:700;font-size:18px;color:rgba(27,22,7,.55); } .bag-coin{ position:absolute;width:14px;height:14px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#F6E7A8,#C9A356 55%,#8A6C31); border:1px solid var(--brass-dark);z-index:3; animation:coin-drop 2.4s ease-in infinite; opacity:0; } .bag-coin.c1{left:8px;animation-delay:0s;} .bag-coin.c2{left:26px;animation-delay:.8s;} .bag-coin.c3{left:42px;animation-delay:1.5s;} @keyframes bag-bob{ 0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-5px) rotate(2deg);} } @keyframes coin-drop{ 0%{transform:translateY(-28px) scale(.7);opacity:0;} 18%{opacity:1;} 70%{transform:translateY(18px) scale(1);opacity:1;} 100%{transform:translateY(26px) scale(.5);opacity:0;} } .savings-pool{ position:relative;width:92px;height:72px; } .pool-rim{ position:absolute;inset:0;border-radius:50%; border:3px solid var(--brass-dark); background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.16), transparent 50%), linear-gradient(180deg, rgba(46,107,82,.18), rgba(46,107,82,.05)); box-shadow:inset 0 0 0 2px rgba(173,138,68,.25), 0 4px 10px rgba(27,42,61,.08); } .pool-water{ position:absolute;left:10px;right:10px;bottom:10px;height:38%; border-radius:0 0 46% 46%; background:linear-gradient(180deg, rgba(79,174,133,.55), var(--green)); animation:pool-fill 4.5s ease-in-out infinite alternate; overflow:hidden; } .pool-water::before{ content:'';position:absolute;left:-20%;top:-4px;width:140%;height:10px; background:radial-gradient(ellipse at center, rgba(255,255,255,.45), transparent 70%); animation:pool-ripple 2.2s ease-in-out infinite; } .pool-coin{ position:absolute;width:12px;height:12px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#F6E7A8,#C9A356); border:1px solid var(--brass-dark); animation:pool-coin-float 3s ease-in-out infinite; z-index:2; } .pool-coin.p1{left:28px;top:22px;animation-delay:0s;} .pool-coin.p2{left:52px;top:30px;animation-delay:1s;} .pool-coin.p3{left:40px;top:16px;width:10px;height:10px;animation-delay:1.8s;} @keyframes pool-fill{ from{height:28%;} to{height:52%;} } @keyframes pool-ripple{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(8px);} } @keyframes pool-coin-float{ 0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-7px) rotate(18deg);} } .page-head.has-motif{align-items:center;} .page-head.has-motif > div:first-child{flex:1 1 220px;} .page-head-actions .savings-motif{margin-left:0;} .page-head-actions{align-items:flex-end;} @media(max-width:720px){ .savings-motif{display:none;} } @media (prefers-reduced-motion: reduce){ .page-enter,.page-exit,.page-enter .stat-card,.page-enter .card,.page-enter .page-head, .login-brand,.login-card,.modal,.modal-overlay,.nav-item.active, .savings-bag,.bag-coin,.pool-water,.pool-water::before,.pool-coin, .live-refresh-dot,.icon-btn.spinning,.toast{ animation:none !important;transition:none !important; } .bag-coin,.pool-coin{opacity:.85;} .pool-water{height:42%;} } /* ========================================================================== Role-specific color schemes (layered on top of data-theme palettes) Administrator · Teller · Client each get a distinct accent identity. ========================================================================== */ html[data-role="Administrator"][data-theme="default"], html[data-role="Administrator"]:not([data-theme]){ --brass:#9A6B2F; --brass-light:#D4B87A; --brass-dark:#6E4A1C; --surface-dark:#1A2433; --glow-a:rgba(154,107,47,.14); --glow-b:rgba(26,36,51,.10); } html[data-role="Administrator"][data-theme="day"]{ --brass:#B8860B; --brass-light:#E6C35C; --brass-dark:#8A6508; --surface-dark:#0C1A33; --ink:#0C1A33; } html[data-role="Administrator"][data-theme="light"]{ --brass:#5C6B7A; --brass-light:#9AABBC; --brass-dark:#3E4A56; --surface-dark:#2A3542; } html[data-role="Administrator"][data-theme="dark"]{ --brass:#D4A84B; --brass-light:#E8C97A; --brass-dark:#A07C30; --surface-dark:#0A0C10; } html[data-role="Administrator"] .sidebar{border-right:3px solid var(--brass);} html[data-role="Administrator"] .nav-item.active{box-shadow:inset 3px 0 0 var(--brass-light);} html[data-role="Teller"][data-theme="default"]{ --brass:#2F6B5A; --brass-light:#7BB8A5; --brass-dark:#1F4A3E; --green:#1F7A5A; --green-bg:#DCEEE6; --surface-dark:#163028; --glow-a:rgba(47,107,90,.14); --glow-b:rgba(22,48,40,.10); } html[data-role="Teller"][data-theme="day"]{ --brass:#1B7A62; --brass-light:#6BC4A8; --brass-dark:#125544; --surface-dark:#0E2A22; --ink:#0E2A22; } html[data-role="Teller"][data-theme="light"]{ --brass:#3D8B7A; --brass-light:#8FCBBC; --brass-dark:#2A6357; --surface-dark:#1E3D36; } html[data-role="Teller"][data-theme="dark"]{ --brass:#4FBF9A; --brass-light:#8AD9C0; --brass-dark:#2E8A6C; --surface-dark:#0A1411; } html[data-role="Teller"] .sidebar{border-right:3px solid var(--brass);} html[data-role="Teller"] .stat-card{border-top-color:var(--brass);} html[data-role="Client"][data-theme="default"]{ --brass:#6B4F8A; --brass-light:#B39AD1; --brass-dark:#4A3563; --surface-dark:#2A1F38; --glow-a:rgba(107,79,138,.14); --glow-b:rgba(42,31,56,.10); } html[data-role="Client"][data-theme="day"]{ --brass:#6A4C9A; --brass-light:#B8A0DB; --brass-dark:#4A3470; --surface-dark:#1E1430; --ink:#1E1430; } html[data-role="Client"][data-theme="light"]{ --brass:#6E5A8A; --brass-light:#B5A6C9; --brass-dark:#4C3D63; --surface-dark:#322842; } html[data-role="Client"][data-theme="dark"]{ --brass:#A78BDB; --brass-light:#C9B6EC; --brass-dark:#7A5FB0; --surface-dark:#120E18; } html[data-role="Client"] .sidebar{border-right:3px solid var(--brass);} html[data-role="Client"] .btn.brass{letter-spacing:.02em;}