/* ───────────────────────────────────────────────────────────── Scarlett · Glass Layer Activated by adding `class="glass-app"` to . Reads four custom properties (set by glass.js from localStorage): --app-bg-image background image (url(...)) --glass-blur backdrop blur radius --card-opacity white-card opacity --overlay-opacity fixed scrim over the bg image ───────────────────────────────────────────────────────────── */ :root { /* User-controlled — overridden by glass.js */ --glass-blur: 22px; --card-opacity: 0.42; --overlay-opacity: 0.10; --app-bg-image: none; /* Pink-unified aurora — every accent the app exposes shares the same hue family (rose/mauve/peach) so the UI reads as a single color story. Saturated colors only show up in data viz. */ --aurora-mint: #F5C7D5; /* soft petal pink */ --aurora-pink: #E58FAE; /* the signature rose */ --aurora-cream: #FCEFCA; /* warm cream highlight */ --aurora-ink: #1F2530; --aurora-gradient: linear-gradient(135deg, #F5C7D5 0%, #E58FAE 55%, #FCEFCA 100%); /* Accent for small indicator dots / focus rings — readable rose */ --aurora-accent: #C9709A; } /* ── Page-level background ─────────────────────────────────── */ /* The user's bg + scrim + tri-aurora are stacked in a fixed div placed as the FIRST child of via glass.js. This avoids body bg propagation and bg-attachment compositing bugs that hid content in some layouts. */ .glass-bg-layer { position: fixed !important; inset: 0 !important; z-index: -1 !important; pointer-events: none; background-color: #2a2b35; background-image: linear-gradient(180deg, rgba(0,0,0, calc(var(--overlay-opacity) * 0.5)) 0%, rgba(0,0,0, var(--overlay-opacity)) 100%), var(--app-bg-image), var(--aurora-gradient); background-size: 100% 100%, cover, cover; background-position: center, center, center; background-repeat: no-repeat, no-repeat, no-repeat; } body.glass-app { background: transparent; color: var(--aurora-ink); min-height: 100dvh; /* Override theme.css accents inside the glass layer so every formerly-purple (#6B5BFF) or hot-pink (#FF8DB6) or green leak resolves to the unified rose family. Focus rings, link colors, "active" indicators, and chat-input focus all pull from this. */ --accent: #C9709A; --accent-hover: #B05F86; --accent-soft: rgba(201,112,154,0.18); --accent-ink: #fff; --rose: #E58FAE; --teal: #F5C7D5; } /* Override theme aurora (its radial bg + position/overflow conflict with ours) */ body.glass-app.has-aurora::before { display: none !important; } body.glass-app.has-aurora { overflow: visible !important; position: static !important; } body.glass-app.has-aurora > *:not(.glass-bg-layer) { position: static !important; z-index: auto !important; } /* Brand mark — pink-tinted conic glass, ties brand to the rose system without ever feeling neon. */ body.glass-app .brand-dot { background: conic-gradient(from 140deg, #FCEFCA, #F5C7D5, #E58FAE, #FCEFCA) !important; box-shadow: 0 4px 14px rgba(229,143,174,0.30), inset 0 0 0 1px rgba(255,255,255,0.6) !important; } /* ─────────────────────────────────────────────────────────── GLASS CARD PRIMITIVES The "standard" tier — everything else scales relative to it. ─────────────────────────────────────────────────────────── */ /* Base glass — applies to most surfaced containers */ body.glass-app .nav-card, body.glass-app .calendar, body.glass-app .memory-view, body.glass-app .upload-area, body.glass-app .photo-card, body.glass-app .style-card, body.glass-app #sidebar, body.glass-app #chat-header, body.glass-app .app-header, body.glass-app .input-wrap { background: rgba(255,255,255, var(--card-opacity)); backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: none; box-shadow: 0 1px 2px rgba(20,18,40,0.08), 0 8px 24px rgba(20,18,40,0.10), inset 0 0 0 1px rgba(255,255,255,0.55); } /* Layer 1 · HERO — thickest, brightest, biggest lift */ body.glass-app .hero, body.glass-app .login-card { background: linear-gradient(180deg, rgba(255,255,255, calc(var(--card-opacity) * 1.5 + 0.05)) 0%, rgba(255,255,255, calc(var(--card-opacity) * 1.15)) 40%, rgba(255,255,255, calc(var(--card-opacity) * 1.05)) 100%); backdrop-filter: blur(var(--glass-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%); border: none; box-shadow: 0 1px 2px rgba(20,18,40,0.10), 0 18px 40px rgba(20,18,40,0.16), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px rgba(255,255,255,0.55); } body.glass-app .hero::before, body.glass-app .login-card::before { display: none !important; } body.glass-app .hero::after, body.glass-app .login-card::after { display: none !important; } /* Layer 2 · CTA (chat card on home) — diagonal sheen + colored glow */ body.glass-app .nav-card.chat-card { background: linear-gradient(125deg, rgba(255,255,255, 0.35) 0%, rgba(255,255,255, 0.05) 35%, rgba(255,255,255, 0) 60%), rgba(255,255,255, var(--card-opacity)); color: var(--aurora-ink); box-shadow: 0 1px 2px rgba(20,18,40,0.10), 0 14px 32px rgba(20,18,40,0.14), inset 0 1px 0 rgba(255,255,255,0.65), inset 0 0 0 1px rgba(255,255,255,0.55); } body.glass-app .nav-card.chat-card::before { display: none !important; } body.glass-app .nav-card.chat-card .nav-icon { background: rgba(255,255,255,0.55); color: var(--aurora-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.50); } body.glass-app .nav-card.chat-card .nav-label { color: var(--aurora-ink) !important; } body.glass-app .nav-card.chat-card .nav-sub { color: rgba(31,37,48,0.65) !important; } body.glass-app .chat-go { background: rgba(255,255,255,0.55); color: var(--aurora-ink); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.50); } /* Layer 3 · QUOTE — most ethereal, almost floating */ body.glass-app .quote-card { background: rgba(255,255,255, calc(var(--card-opacity) * 0.6)); backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(180%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.25)) saturate(180%); border: none; box-shadow: 0 2px 8px rgba(20,18,40,0.05), inset 0 0 0 1px rgba(255,255,255,0.35); } /* Layer 4 · Inline textareas / style cards in settings — flatter */ body.glass-app textarea:not(.memory-edit) { background: rgba(255,255,255, calc(var(--card-opacity) * 0.7)); backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(140%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(140%); border: 1px solid rgba(255,255,255,0.40); color: var(--aurora-ink); } body.glass-app textarea:focus { border-color: rgba(255,255,255,0.85); background: rgba(255,255,255, calc(var(--card-opacity) * 1.1)); box-shadow: 0 0 0 3px rgba(255,255,255,0.15); } /* ── App header / sidebar — pinned chrome ───────────────────── */ body.glass-app .app-header { border-bottom: 1px solid rgba(255,255,255,0.30); border-radius: 0; } body.glass-app #chat-header { border-bottom: 1px solid rgba(255,255,255,0.25); border-radius: 0; /* override the original opaque tinted bg */ background: rgba(255,255,255, calc(var(--card-opacity) * 0.9)) !important; } body.glass-app #sidebar { border-right: 1px solid rgba(255,255,255,0.20); border-radius: 0; } body.glass-app #main { background: transparent !important; } body.glass-app #input-area { background: linear-gradient(to top, rgba(0,0,0,0.20) 30%, rgba(0,0,0,0) 100%) !important; } /* ── Page typography on glass (slightly stronger ink) ──────── */ body.glass-app, body.glass-app .intro h1, body.glass-app .days-number, body.glass-app .nav-label, body.glass-app .cal-month, body.glass-app .memory-date, body.glass-app .login-title, body.glass-app .style-name, body.glass-app .header-name, body.glass-app .brand, body.glass-app .brand-row { color: var(--aurora-ink); } body.glass-app .hero-label, body.glass-app .days-unit, body.glass-app .days-foot, body.glass-app .nav-sub, body.glass-app .intro .sub, body.glass-app .mono-meta, body.glass-app .login-sub, body.glass-app .footer, body.glass-app .footer-note, body.glass-app .date-divider, body.glass-app .legend, body.glass-app .cal-weekdays span, body.glass-app .header-status, body.glass-app h2 { color: rgba(31,37,48,0.70) !important; } body.glass-app .quote-text, body.glass-app .memory-content, body.glass-app .photo-caption { color: rgba(31,37,48,0.80) !important; } body.glass-app .quote-mark { color: var(--aurora-pink) !important; } /* App-header nav (memories/gallery/settings/login) */ body.glass-app .app-header a, body.glass-app .nav-links a { color: rgba(31,37,48,0.75) !important; } body.glass-app .nav-links a.current, body.glass-app .nav-links a:hover { color: var(--aurora-ink) !important; } /* Pills / status dots — colored over white glass */ body.glass-app .pill { background: rgba(255,255,255,0.65) !important; border-color: rgba(255,255,255,0.85) !important; color: rgba(31,37,48,0.75) !important; } body.glass-app .pill .dot { background: var(--aurora-pink); box-shadow: 0 0 0 3px rgba(229,143,174,0.25); } /* Days progress bar */ body.glass-app .days-progress { background: rgba(31,37,48,0.12); } body.glass-app .days-progress span { background: var(--aurora-gradient) !important; } /* Hero icon / chat ai-mark — keep colored against white */ body.glass-app .ai-mark { background: var(--aurora-gradient) !important; } /* ── Calendar / memories ───────────────────────────────────── */ body.glass-app .cal-day { color: rgba(31,37,48,0.65); } body.glass-app .cal-day:hover { background: rgba(255,255,255,0.40); color: var(--aurora-ink); } body.glass-app .cal-day.today { color: var(--aurora-accent); font-weight: 700; } body.glass-app .cal-day.today::before { border-color: var(--aurora-pink); opacity: 0.55; } body.glass-app .cal-day.has-memory { color: var(--aurora-ink); } body.glass-app .cal-day.has-memory::after { background: var(--aurora-pink); } body.glass-app .cal-day.selected { background: var(--aurora-ink); color: #fff; } body.glass-app .cal-day.selected::after { background: #fff; } body.glass-app .cal-nav button { background: rgba(255,255,255,0.40); border: 1px solid rgba(255,255,255,0.55); color: rgba(31,37,48,0.7); } body.glass-app .cal-nav button:hover { background: rgba(255,255,255,0.65); color: var(--aurora-ink); border-color: rgba(255,255,255,0.85); } body.glass-app .legend { border-top-color: rgba(31,37,48,0.15) !important; } body.glass-app .memory-edit { background: rgba(255,255,255,0.30) !important; border: 1px solid rgba(255,255,255,0.40) !important; } body.glass-app .memory-edit:focus { background: rgba(255,255,255,0.55) !important; border-color: rgba(255,255,255,0.85) !important; } body.glass-app .memory-head { border-bottom-color: rgba(31,37,48,0.12) !important; } /* ── Gallery ───────────────────────────────────────────────── */ body.glass-app .upload-area { border: 1.5px dashed rgba(255,255,255,0.55) !important; } body.glass-app .upload-area:hover, body.glass-app .upload-area.dragover { border-color: rgba(255,255,255,0.85) !important; background: rgba(255,255,255, calc(var(--card-opacity) * 1.2)) !important; } body.glass-app .upload-area p { color: var(--aurora-ink); } body.glass-app .upload-area .hint { color: rgba(31,37,48,0.55); } body.glass-app .photo-card { border: none !important; } body.glass-app .photo-comment { color: rgba(31,37,48,0.75) !important; border-top-color: rgba(31,37,48,0.15) !important; } body.glass-app .photo-comment::before { color: var(--aurora-accent) !important; } /* ── Chat — sidebar / header / input glass, BUBBLES SOLID ───── */ body.glass-app .chat-item:hover { background: rgba(255,255,255,0.30); } body.glass-app .chat-item.active { background: rgba(255,255,255,0.55); box-shadow: 0 1px 2px rgba(20,18,40,0.06); } body.glass-app .chat-item.active::before { background: var(--aurora-pink); } body.glass-app .chat-item { color: rgba(31,37,48,0.7); } body.glass-app .chat-item.active, body.glass-app .chat-item:hover { color: var(--aurora-ink); } body.glass-app .chat-item-date, body.glass-app .chat-item-btn { color: rgba(31,37,48,0.5); } body.glass-app #sidebar-nav { background: rgba(255,255,255,0.30); border: 1px solid rgba(255,255,255,0.40); } body.glass-app #sidebar-nav a { color: rgba(31,37,48,0.65); } body.glass-app #sidebar-nav a:hover { background: rgba(255,255,255,0.50); color: var(--aurora-ink); } body.glass-app #new-chat-btn { background: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.70); color: var(--aurora-ink); } body.glass-app #new-chat-btn:hover { background: rgba(255,255,255,0.75); } /* Message bubbles — user is a softened dark glass (translucent ink with white text). Lighter than the original near-black bubble, picks up tones from whatever background sits behind, but stays unambiguously "the user side" of the thread. Assistant stays bright glass. */ body.glass-app .message.user { background: rgba(31,37,48,0.55) !important; color: #fff !important; border: none !important; box-shadow: 0 1px 2px rgba(20,18,40,0.10), 0 8px 22px rgba(20,18,40,0.14), inset 0 0 0 1px rgba(255,255,255,0.10) !important; backdrop-filter: blur(var(--glass-blur)) saturate(140%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); } /* nuke the inherited purple+rose radial overlay from chat.html */ body.glass-app .message.user::before { display: none !important; } body.glass-app .message.user .msg-time { color: rgba(255,255,255,0.55) !important; } body.glass-app .message.user .text-content strong { color: #fff !important; } body.glass-app .message.user .text-content em { color: rgba(255,255,255,0.80) !important; } body.glass-app .message.user .text-content code { background: rgba(255,255,255,0.18) !important; color: #fff !important; } body.glass-app .message.user .text-content pre { background: rgba(0,0,0,0.28) !important; color: #fff !important; } body.glass-app .message.user .text-content a { color: #fff !important; text-decoration-color: rgba(255,255,255,0.55) !important; } body.glass-app .message.user .text-content blockquote { border-left-color: rgba(255,255,255,0.40) !important; color: rgba(255,255,255,0.80) !important; } body.glass-app .message.user .msg-action-btn { border-color: rgba(255,255,255,0.22) !important; color: rgba(255,255,255,0.65) !important; } body.glass-app .message.user .msg-action-btn:hover { border-color: #fff !important; color: #fff !important; } body.glass-app .message.assistant { background: rgba(255,255,255, calc(var(--card-opacity) + 0.35)) !important; backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(160%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(160%); color: var(--aurora-ink) !important; border: none !important; box-shadow: 0 1px 2px rgba(20,18,40,0.05), 0 6px 18px rgba(20,18,40,0.08), inset 0 0 0 1px rgba(255,255,255,0.60) !important; } body.glass-app .message.assistant { background: rgba(255,255,255, calc(var(--card-opacity) + 0.35)) !important; backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(160%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(160%); color: var(--aurora-ink) !important; border: none !important; box-shadow: 0 1px 2px rgba(20,18,40,0.05), 0 6px 18px rgba(20,18,40,0.08), inset 0 0 0 1px rgba(255,255,255,0.60) !important; } body.glass-app .input-wrap { border: none !important; } body.glass-app .input-wrap:focus-within { box-shadow: 0 1px 2px rgba(20,18,40,0.08), 0 8px 24px rgba(20,18,40,0.14), inset 0 0 0 2px rgba(255,255,255,0.85); } body.glass-app #input { color: var(--aurora-ink); } body.glass-app #input::placeholder { color: rgba(31,37,48,0.45); } body.glass-app .tool-btn { color: rgba(31,37,48,0.65); } body.glass-app .tool-btn:hover { background: rgba(255,255,255,0.45); color: var(--aurora-ink); } body.glass-app #model-select, body.glass-app #style-select { color: rgba(31,37,48,0.65); border-color: rgba(255,255,255,0.55); background-color: rgba(255,255,255,0.30); } /* Send button — clean aurora-ink, no purple/pink radial */ body.glass-app #send { background: var(--aurora-ink); box-shadow: 0 6px 16px rgba(31,37,48,0.30); } body.glass-app #send::before { display: none !important; } body.glass-app #send:disabled { background: rgba(255,255,255,0.45) !important; color: rgba(31,37,48,0.40) !important; box-shadow: none !important; } /* ── Login ─────────────────────────────────────────────────── */ body.glass-app .brand-mark { background: var(--aurora-gradient) !important; } body.glass-app .login-card input { background: rgba(255,255,255, 0.55) !important; border-color: rgba(255,255,255, 0.70) !important; color: var(--aurora-ink); } body.glass-app .login-card input:focus { border-color: rgba(255,255,255, 0.95) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.30) !important; } body.glass-app .login-card button { background: var(--aurora-ink); } /* ── Settings — admin context ──────────────────────────────── */ body.glass-app .container .btn { border-color: var(--aurora-ink); background: var(--aurora-ink); } body.glass-app .container .btn.secondary { background: rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.65); color: var(--aurora-ink); } body.glass-app h2::after { background: rgba(31,37,48,0.20); } body.glass-app .new-style-form input { background: rgba(255,255,255, 0.45); border-color: rgba(255,255,255, 0.65); color: var(--aurora-ink); } /* ── Personalization section (only on settings page) ────────── */ .personalization { display: grid; gap: 14px; margin-bottom: 12px; } .bg-uploader { position: relative; border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255, 0.40); backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: 1.5px dashed rgba(255,255,255,0.55); aspect-ratio: 16 / 9; cursor: pointer; transition: border-color var(--dur-2) var(--ease-out); } .bg-uploader:hover, .bg-uploader.dragover { border-color: rgba(255,255,255, 0.95); } .bg-uploader.has-image { border-style: solid; cursor: default; } .bg-uploader .bg-uploader-preview { position: absolute; inset: 0; background-size: cover; background-position: center; } .bg-uploader .bg-uploader-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--aurora-ink); font-size: 14px; text-align: center; padding: 20px; } .bg-uploader.has-image .bg-uploader-empty { display: none; } .bg-uploader-empty .bg-uploader-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.55); display: grid; place-items: center; margin-bottom: 4px; color: rgba(31,37,48,0.65); } .bg-uploader-empty .hint { font-family: var(--font-mono); font-size: 10.5px; color: rgba(31,37,48,0.55); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; } .bg-uploader-clear { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.50); color: #fff; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; font-size: 14px; z-index: 2; backdrop-filter: blur(8px); } .bg-uploader.has-image .bg-uploader-clear { display: flex; } .bg-uploader-clear:hover { background: rgba(0,0,0,0.70); } .glass-sliders { display: grid; gap: 12px; margin-top: 4px; } .glass-slider { background: rgba(255,255,255,0.40); backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border-radius: var(--r-md); padding: 14px 16px 16px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); } .glass-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .glass-slider-label { font-size: 13.5px; font-weight: 500; color: var(--aurora-ink); display: flex; flex-direction: column; gap: 2px; } .glass-slider-label code { font-family: var(--font-mono); font-size: 10.5px; color: rgba(31,37,48,0.50); letter-spacing: 0.04em; font-weight: 400; } .glass-slider-value { font-family: var(--font-mono); font-size: 13px; color: var(--aurora-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; padding: 3px 10px; background: rgba(255,255,255,0.55); border-radius: 999px; } .glass-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: rgba(31,37,48,0.18); border-radius: 999px; outline: none; } .glass-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--aurora-ink); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 3px rgba(255,255,255,0.65); } .glass-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--aurora-ink); cursor: pointer; border: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.25), inset 0 0 0 3px rgba(255,255,255,0.65); } .glass-reset { margin-top: 4px; padding: 9px 14px; background: rgba(255,255,255,0.40); border: 1px solid rgba(255,255,255,0.60); border-radius: 999px; color: var(--aurora-ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; cursor: pointer; justify-self: start; } .glass-reset:hover { background: rgba(255,255,255,0.65); } /* small screens — fonts compress slightly */ @media (max-width: 480px) { .glass-slider { padding: 12px 14px 14px; } } /* ── Expenses — unified glass treatment ───────────────────── The page itself has no per-element styling overrides; everything below tints its raw containers into the same glass system the rest of the app uses. */ body.glass-app .month-total, body.glass-app .chart-section, body.glass-app .scan-area, body.glass-app .expense-item { background: rgba(255,255,255, var(--card-opacity)) !important; backdrop-filter: blur(var(--glass-blur)) saturate(160%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%); border: none !important; box-shadow: 0 1px 2px rgba(20,18,40,0.08), 0 8px 24px rgba(20,18,40,0.10), inset 0 0 0 1px rgba(255,255,255,0.55) !important; } /* Hero-tier — month total card */ body.glass-app .month-total { background: linear-gradient(180deg, rgba(255,255,255, calc(var(--card-opacity) * 1.4 + 0.05)) 0%, rgba(255,255,255, calc(var(--card-opacity) * 1.05)) 100%) !important; box-shadow: 0 1px 2px rgba(20,18,40,0.10), 0 18px 40px rgba(20,18,40,0.16), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px rgba(255,255,255,0.55) !important; } body.glass-app .month-amount { color: var(--aurora-ink) !important; font-family: var(--font-serif) !important; } body.glass-app .month-currency { color: rgba(31,37,48,0.55) !important; } body.glass-app .month-label { color: rgba(31,37,48,0.65) !important; } /* Expense rows — single tier */ body.glass-app .expense-list { gap: 8px !important; } body.glass-app .expense-item { border-radius: var(--r-md) !important; padding: 13px 16px !important; } body.glass-app .expense-store { color: var(--aurora-ink) !important; } body.glass-app .expense-desc { color: rgba(31,37,48,0.55) !important; } body.glass-app .expense-amount { color: var(--aurora-ink) !important; font-family: var(--font-serif) !important; font-weight: 600; } body.glass-app .expense-cat { color: rgba(31,37,48,0.65) !important; background: rgba(255,255,255,0.50); padding: 3px 9px; border-radius: 999px; min-width: 0 !important; } body.glass-app .expense-date { color: rgba(31,37,48,0.45) !important; } body.glass-app .expense-del { color: rgba(31,37,48,0.45) !important; transition: color var(--dur-1) var(--ease-out); } body.glass-app .expense-del:hover { color: var(--aurora-ink) !important; } /* Scan dropzone — dashed glass */ body.glass-app .scan-area { border: 1.5px dashed rgba(255,255,255,0.55) !important; cursor: pointer; } body.glass-app .scan-area:hover { border-color: rgba(255,255,255,0.85) !important; background: rgba(255,255,255, calc(var(--card-opacity) * 1.2)) !important; } body.glass-app .scan-area p { color: rgba(31,37,48,0.70) !important; } /* Manual add row */ body.glass-app .manual-add input, body.glass-app .manual-add select { background: rgba(255,255,255,0.45) !important; border: 1px solid rgba(255,255,255,0.60) !important; color: var(--aurora-ink) !important; backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(140%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(140%); } body.glass-app .manual-add input:focus, body.glass-app .manual-add select:focus { border-color: rgba(255,255,255,0.95) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.30) !important; } body.glass-app .manual-add .btn, body.glass-app .expense-list + .manual-add .btn { background: var(--aurora-ink) !important; color: #fff !important; border: none !important; } /* Category pills */ body.glass-app .cat-pill { background: rgba(255,255,255,0.55) !important; border: 1px solid rgba(255,255,255,0.75) !important; color: rgba(31,37,48,0.70) !important; backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(140%); -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5)) saturate(140%); } body.glass-app .cat-pill .cat-amount { color: var(--aurora-ink) !important; } /* Month-nav prev/next */ body.glass-app .month-nav button { background: rgba(255,255,255,0.45) !important; border: 1px solid rgba(255,255,255,0.60) !important; color: var(--aurora-ink) !important; border-radius: 999px !important; width: 36px; height: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; } body.glass-app .month-nav button:hover { background: rgba(255,255,255,0.70) !important; } body.glass-app .month-nav span { color: var(--aurora-ink) !important; } /* Legend dots use aurora palette by index — overrides the inline `colors[]` array in expenses.html so the wheel never shows hot pink or saturated purple. The JS still sets a conic-gradient, but if the palette gets refreshed via the JS edit below it pulls aurora tones. */ body.glass-app .legend-dot { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65); } body.glass-app .legend-item { color: rgba(31,37,48,0.75); } body.glass-app .legend-pct { color: rgba(31,37,48,0.50); } body.glass-app .pie-chart { box-shadow: 0 8px 22px rgba(20,18,40,0.14), inset 0 0 0 6px rgba(255,255,255,0.45); }