/* ======================================================================== TOKENS ======================================================================== */ :root{ --paper:#F7F4EC; --paper-elevated:#FFFFFF; --ink:#15191F; --muted:#6B7280; --border: rgba(15,19,31,0.09); --shadow: 0 6px 24px rgba(15,19,31,0.07); --shadow-lg: 0 16px 40px rgba(15,19,31,0.12); --accent:#1B8F6E; --accent-soft: rgba(27,143,110,0.14); --accent-2:#C9791E; --accent-2-soft: rgba(201,121,30,0.16); --danger:#C84A3E; --danger-soft: rgba(200,74,62,0.14); --bill-dot:#8B5CF6; --radius: 16px; --radius-sm: 10px; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-scale: 1; --sidebar-w: 248px; --bottomnav-h: 64px; --transition: 0.22s cubic-bezier(.4,0,.2,1); } html[data-theme="dark"]{ --paper:#0D1118; --paper-elevated:#161C27; --ink:#EEF1F5; --muted:#8C97A8; --border: rgba(255,255,255,0.09); --shadow: 0 6px 24px rgba(0,0,0,0.4); --shadow-lg: 0 20px 50px rgba(0,0,0,0.55); --accent-soft: rgba(45,212,167,0.16); --accent-2-soft: rgba(245,180,92,0.18); --danger-soft: rgba(255,107,98,0.16); } /* Accent palettes — overridden by data-palette on */ html[data-palette="jade"]{ --accent:#1B8F6E; --accent-2:#C9791E; } html[data-theme="dark"][data-palette="jade"]{ --accent:#2DD4A7; --accent-2:#F5B45C; } html[data-palette="indigo"]{ --accent:#3654C9; --accent-2:#C9791E; } html[data-theme="dark"][data-palette="indigo"]{ --accent:#6E89FF; --accent-2:#F5B45C; } html[data-palette="rose"]{ --accent:#B43A63; --accent-2:#3654C9; } html[data-theme="dark"][data-palette="rose"]{ --accent:#FF6FA0; --accent-2:#6E89FF; } html[data-palette="amber"]{ --accent:#B8791E; --accent-2:#1B8F6E; } html[data-theme="dark"][data-palette="amber"]{ --accent:#F5B45C; --accent-2:#2DD4A7; } html[data-palette="violet"]{ --accent:#6A3DB8; --accent-2:#C9791E; } html[data-theme="dark"][data-palette="violet"]{ --accent:#B79CFF; --accent-2:#F5B45C; } html[data-palette="slate"]{ --accent:#3B4A5A; --accent-2:#B8791E; } html[data-theme="dark"][data-palette="slate"]{ --accent:#9FB4CC; --accent-2:#F5B45C; } *{ box-sizing:border-box; } html{ font-size: calc(16px * var(--font-scale)); -webkit-text-size-adjust: 100%; overflow-x:hidden; max-width:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.5; -webkit-font-smoothing:antialiased; transition: background var(--transition), color var(--transition); overflow-x:hidden; max-width:100%; } .reduced-motion *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } button{ font-family:inherit; } ::selection{ background:var(--accent-soft); } .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } a{ color:var(--accent); } /* ======================================================================== APP SHELL ======================================================================== */ /* App-shell layout: the document never scrolls — only .main scrolls. height:100dvh tracks Safari's collapsing toolbar natively, so the bottom nav can simply sit at bottom:0 of the app shell and never hides. */ html, body{ height:100vh; height:100dvh; overflow:hidden; overscroll-behavior:none; } .app{ display:flex; height:100vh; height:100dvh; max-width:100vw; overflow:hidden; } .sidebar{ width:var(--sidebar-w); flex-shrink:0; background:var(--paper-elevated); border-right:1px solid var(--border); padding:1.5rem 1rem; position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; display:flex; flex-direction:column; gap:1.5rem; } .brand{ display:flex; align-items:center; gap:0.6rem; padding:0 0.4rem; } .brand-mark{ width:34px; height:34px; border-radius:10px; background:linear-gradient(145deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-mono); font-weight:700; font-size:1rem; flex-shrink:0; } .brand-text{ display:flex; flex-direction:column; } .brand-text strong{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:-0.01em; } .brand-text span{ font-size:0.72rem; color:var(--muted); } .sidebar-nav{ display:flex; flex-direction:column; gap:0.2rem; flex:1; overflow-y:auto; } .nav-btn{ display:flex; align-items:center; gap:0.65rem; width:100%; text-align:left; background:none; border:none; color:var(--muted); padding:0.6rem 0.7rem; border-radius:var(--radius-sm); cursor:pointer; font-size:0.92rem; transition: background var(--transition), color var(--transition); } .nav-btn svg{ width:18px; height:18px; flex-shrink:0; } .nav-btn:hover{ background:var(--accent-soft); color:var(--ink); } .nav-btn.active{ background:var(--accent); color:#fff; font-weight:600; } .sidebar-foot{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding-top:1rem; } .main{ flex:1; min-width:0; max-width:100%; height:100vh; height:100dvh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 1.8rem); } .topbar{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; position:sticky; top:0; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--border); z-index:20; } .topbar h1{ font-family:var(--font-display); font-size:1.3rem; letter-spacing:-0.01em; margin:0; } .page-brand{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.3rem; padding:1.1rem 1rem 0.5rem; } .page-brand img{ width:46px; height:46px; border-radius:13px; box-shadow:var(--shadow); object-fit:cover; } .page-brand .pb-name{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; letter-spacing:0.22em; padding-left:0.22em; color:var(--ink); opacity:0.92; } .topbar-actions{ display:flex; gap:0.5rem; } .icon-btn{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--paper-elevated); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform var(--transition), background var(--transition); } .icon-btn:hover{ background:var(--accent-soft); } .icon-btn:active{ transform:scale(0.92); } .icon-btn svg{ width:18px; height:18px; } .view{ display:none; padding:1.2rem 1.3rem 2rem; max-width:1180px; margin:0 auto; } .app-footer{ text-align:center; font-size:0.72rem; color:var(--muted); padding:0.5rem 1.3rem 1rem; max-width:1180px; margin:0 auto; } .version-card{ background:linear-gradient(145deg, var(--paper-elevated), color-mix(in srgb, var(--accent) 8%, var(--paper-elevated))); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.5rem 1rem; display:flex; flex-direction:column; align-items:center; gap:0.5rem; text-align:center; } .version-card-logo{ width:52px; height:52px; border-radius:14px; object-fit:cover; box-shadow:0 4px 14px rgba(0,0,0,0.18); } .version-card-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; letter-spacing:0.14em; color:var(--ink); } .version-card-badge{ display:inline-flex; align-items:center; gap:0.35rem; background:var(--accent); color:#fff; font-family:var(--font-mono); font-weight:700; font-size:0.82rem; letter-spacing:0.06em; padding:0.28rem 0.75rem; border-radius:999px; margin-top:0.1rem; } .version-card-badge svg{ width:12px; height:12px; flex-shrink:0; } .version-card-tagline{ font-size:0.76rem; color:var(--muted); margin-top:0.1rem; line-height:1.4; } .view.active{ display:block; animation: fade-in 0.25s ease; } @keyframes fade-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } } /* ======================================================================== BOTTOM NAV (mobile) ======================================================================== */ .bottom-nav{ display:none; position:fixed; left:0; right:0; /* With the app-shell layout (html/body height:100dvh, overflow:hidden), bottom:0 always equals the bottom of the *visible* viewport, above the Safari toolbar. No JS tracking needed. */ bottom: 0; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); background:var(--paper-elevated); border-top:1px solid var(--border); z-index:30; padding-bottom: env(safe-area-inset-bottom, 0px); /* Promote to own layer so iOS compositor doesn't clip it */ transform: translateZ(0); -webkit-transform: translateZ(0); will-change: bottom; /* Prevent any rubber-band / overscroll from hiding the nav */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bottom-nav-inner{ display:flex; height:var(--bottomnav-h); min-height:var(--bottomnav-h); } .bottom-btn{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:none; border:none; color:var(--muted); font-size:0.66rem; cursor:pointer; min-height:44px; } .bottom-btn svg{ width:20px; height:20px; } .bottom-btn.active{ color:var(--accent); } .sheet-overlay{ position:fixed; inset:0; background:rgba(10,12,16,0.45); opacity:0; visibility:hidden; transition: opacity var(--transition); z-index:40; } .sheet-overlay.open{ opacity:1; visibility:visible; } .more-sheet{ position:fixed; left:0; right:0; bottom:0; background:var(--paper-elevated); border-radius:20px 20px 0 0; transform:translateY(100%); transition: transform var(--transition); z-index:41; padding:1rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); } .more-sheet.open{ transform:translateY(0); } .more-sheet h3{ margin:0 0 0.8rem; font-family:var(--font-display); font-size:1rem; } .sheet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem; } .sheet-item{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.8rem 0.4rem; cursor:pointer; color:var(--ink); } .sheet-item svg{ width:20px; height:20px; color:var(--accent); } .sheet-item span{ font-size:0.72rem; } /* ======================================================================== GENERIC COMPONENTS ======================================================================== */ h2.section-title{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:-0.01em; margin:1.8rem 0 0.8rem; display:flex; align-items:center; justify-content:space-between; } h2.section-title:first-child{ margin-top:0; } .card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem; } .muted{ color:var(--muted); } .pill{ display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.55rem; border-radius:999px; font-size:0.72rem; font-weight:600; } .pill.income{ background:var(--accent-soft); color:var(--accent); } .pill.expense{ background:var(--danger-soft); color:var(--danger); } .pill.outline{ background:transparent; border:1px solid var(--border); color:var(--muted); } .form{ display:flex; flex-wrap:wrap; gap:0.8rem; background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); margin-bottom:1.2rem; } .form-group{ flex:1 1 160px; display:flex; flex-direction:column; gap:0.3rem; } .form-group.grow2{ flex:2 1 220px; } .form-group label{ font-size:0.78rem; font-weight:600; color:var(--muted); } .form-group input, .form-group select{ padding:0.55rem 0.6rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font-size:0.92rem; } .form-group input:focus, .form-group select:focus{ outline:2px solid var(--accent); outline-offset:1px; } .form-actions{ display:flex; align-items:flex-end; } .btn{ background:var(--accent); color:#fff; border:none; padding:0.6rem 1.1rem; border-radius:var(--radius-sm); font-size:0.9rem; font-weight:600; cursor:pointer; transition: filter var(--transition), transform var(--transition); } .btn:hover{ filter:brightness(1.07); } .btn:active{ transform:scale(0.97); } .btn.secondary{ background:var(--paper); color:var(--ink); border:1px solid var(--border); } .btn.danger{ background:var(--danger); } .btn.sm{ padding:0.35rem 0.7rem; font-size:0.78rem; } .btn.block{ width:100%; } .btn:disabled{ opacity:0.45; cursor:not-allowed; filter:none; } .guide-cta-btn{ display:block; text-align:center; text-decoration:none; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; font-size:1rem; font-weight:700; padding:0.95rem 1.2rem; letter-spacing:0.01em; } .guide-cta-btn:hover{ filter:brightness(1.06); } .balance-toggle-btn{ background:var(--accent-2); color:#fff; font-size:0.95rem; font-weight:700; padding:0.85rem 1.3rem; letter-spacing:0.01em; border-radius:var(--radius-sm); } .balance-toggle-btn:hover{ filter:brightness(1.08); } .search-row{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:0.9rem; } .search-row input[type="text"]{ flex:2 1 200px; padding:0.55rem 0.7rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper-elevated); color:var(--ink); } .search-row select{ flex:1 1 130px; padding:0.55rem 0.6rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper-elevated); color:var(--ink); } .table-responsive{ overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow); } table{ width:100%; border-collapse:collapse; background:var(--paper-elevated); } th,td{ padding:0.65rem 0.7rem; text-align:left; border-bottom:1px solid var(--border); font-size:0.85rem; white-space:nowrap; } th{ color:var(--muted); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; } tbody tr:hover td{ background:var(--accent-soft); } td.amount{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; text-align:right; } .row-actions{ display:flex; gap:0.4rem; } .icon-btn-sm{ width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--paper); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); } .icon-btn-sm:hover{ color:var(--danger); border-color:var(--danger); } .icon-btn-sm svg{ width:14px; height:14px; } .empty-state{ text-align:center; padding:2.4rem 1rem; color:var(--muted); border:1px dashed var(--border); border-radius:var(--radius); } .empty-state svg{ width:32px; height:32px; margin-bottom:0.6rem; opacity:0.6; } .empty-state strong{ display:block; color:var(--ink); margin-bottom:0.2rem; } /* ======================================================================== DASHBOARD ======================================================================== */ .ticker-wrap{ overflow:hidden; border-radius:var(--radius-sm); background:var(--paper-elevated); border:1px solid var(--border); margin-bottom:1.1rem; position:relative; } .ticker-wrap.scrollable{ overflow-x:auto; } .ticker-track{ display:flex; width:max-content; animation: ticker-scroll 32s linear infinite; } .ticker-wrap:hover .ticker-track, .ticker-wrap.paused .ticker-track{ animation-play-state:paused; } @keyframes ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } .ticker-group{ display:flex; flex-shrink:0; } .ticker-item{ display:flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border-right:1px solid var(--border); font-size:0.8rem; white-space:nowrap; } .ticker-item .dot{ width:6px; height:6px; border-radius:50%; } .ticker-item .amt{ font-family:var(--font-mono); } .hero-card{ background:linear-gradient(155deg, var(--paper-elevated), color-mix(in srgb, var(--accent) 7%, var(--paper-elevated))); border:1px solid var(--border); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); margin-bottom:1.1rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; } .hero-label{ font-size:0.8rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; } .hero-value{ font-family:var(--font-mono); font-weight:700; font-size:clamp(1.8rem,5vw,2.6rem); letter-spacing:-0.02em; margin:0.15rem 0; } .hero-sub{ font-size:0.84rem; display:flex; align-items:center; gap:0.3rem; } .hero-sub.up{ color:var(--accent); } .hero-sub.down{ color:var(--danger); } .sparkline{ width:140px; height:42px; flex-shrink:0; } .stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.9rem; margin-bottom:1.1rem; } .stat-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:0.9rem 1rem; box-shadow:var(--shadow); } .stat-card h3{ margin:0 0 0.35rem; font-size:0.76rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; } .stat-card .val{ font-family:var(--font-mono); font-size:1.35rem; font-weight:700; } .charts-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:1rem; margin-bottom:1.1rem; } .chart-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem; box-shadow:var(--shadow); } .chart-card.span2{ grid-column:1 / -1; } .chart-card h3{ margin:0 0 0.7rem; font-size:0.86rem; font-weight:600; } .chart-card svg{ width:100%; height:auto; display:block; } .pie-chart{ width:148px; height:148px; border-radius:50%; margin:0 auto; position:relative; } .pie-center{ position:absolute; inset:18%; border-radius:50%; background:var(--paper-elevated); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow: inset 0 0 0 1px var(--border); } .pie-center .v{ font-family:var(--font-mono); font-weight:700; font-size:0.95rem; } .pie-center .l{ font-size:0.62rem; color:var(--muted); } .legend{ display:flex; justify-content:center; gap:1rem; margin-top:0.8rem; flex-wrap:wrap; font-size:0.78rem; } .legend-item{ display:flex; align-items:center; gap:0.35rem; } .legend-color{ width:10px; height:10px; border-radius:3px; } .donut-stats{ display:flex; flex-direction:column; gap:0.4rem; margin-top:0.8rem; padding-top:0.7rem; border-top:1px solid var(--border); } .donut-stats .ds-row{ display:flex; justify-content:space-between; font-size:0.78rem; } .donut-stats .ds-row .ds-label{ color:var(--muted); } .donut-stats .ds-row .ds-val{ font-family:var(--font-mono); font-weight:600; } .bar-chart{ display:flex; align-items:flex-end; gap:14px; overflow-x:auto; padding:0 0.2rem; } .bar-chart .bar{ flex:0 0 28px; border-radius:6px 6px 2px 2px; position:relative; min-height:3px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); } .bar-chart .bar span.val{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); font-size:0.62rem; font-family:var(--font-mono); white-space:nowrap; padding-bottom:0.2rem; } .bar-chart .bar span.lbl{ position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:0.5rem; writing-mode:vertical-rl; text-orientation:mixed; font-size:0.64rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bar-chart-wrap{ display:flex; flex-direction:column; } .bar-chart-bars{ display:flex; align-items:flex-end; gap:14px; overflow-x:auto; padding:0 0.2rem; height:140px; } .bar-chart-bars .bar{ flex:0 0 28px; border-radius:6px 6px 2px 2px; position:relative; min-height:3px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); } .bar-chart-bars .bar span.val{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); font-size:0.62rem; font-family:var(--font-mono); white-space:nowrap; padding-bottom:0.2rem; } .bar-chart-labels{ display:flex; gap:14px; padding:0 0.2rem; padding-top:0.5rem; overflow-x:hidden; } .bar-chart-labels .bar-lbl{ flex:0 0 28px; display:flex; justify-content:center; } .bar-chart-labels .bar-lbl span{ writing-mode:vertical-rl; text-orientation:mixed; font-size:0.64rem; color:var(--muted); white-space:nowrap; max-height:5.6rem; overflow:hidden; text-overflow:ellipsis; } .progress-list{ display:flex; flex-direction:column; gap:0.8rem; } .progress-row .top{ display:flex; justify-content:space-between; font-size:0.84rem; margin-bottom:0.3rem; } .progress-track{ height:8px; border-radius:99px; background:var(--border); overflow:hidden; } .progress-fill{ height:100%; border-radius:99px; background:var(--accent); transition: width var(--transition); } .progress-fill.warn{ background:var(--accent-2); } .progress-fill.over{ background:var(--danger); } .goal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:0.9rem; } .goal-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); text-align:center; } .goal-ring{ width:96px; height:96px; margin:0 auto 0.5rem; } .goal-ring circle.track{ fill:none; stroke:var(--border); stroke-width:8; } .goal-ring circle.fill{ fill:none; stroke-width:8; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition: stroke-dasharray var(--transition); } .goal-ring text{ font-family:var(--font-mono); font-weight:700; fill:var(--ink); } .goal-card h4{ margin:0.2rem 0 0.1rem; font-size:0.88rem; } .goal-fund-row{ display:flex; gap:0.4rem; margin-top:0.6rem; } .goal-fund-row input{ flex:1; min-width:0; padding:0.4rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); } /* ======================================================================== BUDGETS / ACCOUNTS GRIDS ======================================================================== */ .tabs{ display:flex; gap:0.4rem; margin-bottom:0.9rem; } .tab-btn{ background:var(--paper-elevated); border:1px solid var(--border); color:var(--muted); padding:0.4rem 0.9rem; border-radius:999px; font-size:0.82rem; cursor:pointer; } .tab-btn.active{ background:var(--accent); color:#fff; border-color:var(--accent); } .budgets-grid, .accounts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0.9rem; } .budget-card, .account-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); } .budget-card .head, .account-card .head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.5rem; } .budget-card h4, .account-card h4{ margin:0; font-size:0.95rem; } .account-card .bal{ font-family:var(--font-mono); font-weight:700; font-size:1.3rem; margin:0.4rem 0; } /* ======================================================================== CALENDAR ======================================================================== */ .calendar-controls{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1rem; } .calendar-controls h3{ margin:0; font-family:var(--font-display); min-width:160px; text-align:center; } .calendar-table{ width:100%; border-collapse:collapse; background:var(--paper-elevated); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-bottom:1rem; } .calendar-table th{ padding:0.5rem; font-size:0.68rem; text-align:center; background:var(--paper); } .calendar-table td{ padding:0.4rem; text-align:center; border:1px solid var(--border); vertical-align:top; height:54px; cursor:pointer; font-size:0.82rem; position:relative; } .calendar-table td:hover{ background:var(--accent-soft); } .calendar-table td.empty{ cursor:default; background:transparent; border:none; } .calendar-table td.today .daynum{ background:var(--accent); color:#fff; border-radius:50%; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; } .calendar-table td.selected{ background:var(--accent-2-soft); } .cal-dots{ display:flex; gap:2px; justify-content:center; margin-top:2px; } .cal-dots .d{ width:5px; height:5px; border-radius:50%; } .calendar-table.mini{ margin-bottom:0; } .calendar-table.mini th{ padding:0.3rem; font-size:0.6rem; } .calendar-table.mini td{ padding:0.15rem; height:30px; font-size:0.68rem; } .calendar-table.mini td.today .daynum{ width:16px; height:16px; font-size:0.65rem; } .calendar-table.mini .cal-dots .d{ width:4px; height:4px; } #calendarDetails{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow); } #calendarDetails ul{ list-style:none; padding:0; margin:0.4rem 0 0; display:flex; flex-direction:column; gap:0.3rem; font-size:0.85rem; } /* ======================================================================== SETTINGS ======================================================================== */ .settings-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; } .setting-row{ display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0; border-bottom:1px solid var(--border); gap:1rem; } .setting-row:last-child{ border-bottom:none; } .setting-row .lbl{ font-size:0.88rem; } .setting-row .lbl small{ display:block; color:var(--muted); font-size:0.72rem; margin-top:0.1rem; } .segmented{ display:flex; background:var(--paper); border:1px solid var(--border); border-radius:999px; padding:3px; } .segmented button{ background:none; border:none; padding:0.3rem 0.7rem; border-radius:999px; font-size:0.78rem; color:var(--muted); cursor:pointer; } .segmented button.active{ background:var(--accent); color:#fff; } .swatch-row{ display:flex; gap:0.5rem; } .swatch{ width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; } .style-theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:0.6rem; margin-top:0.5rem; } .style-theme-card{ cursor:pointer; border:2px solid var(--border); border-radius:var(--radius-sm); padding:0.6rem; text-align:left; background:var(--paper); transition:border-color var(--transition); } .style-theme-card.active{ border-color:var(--accent); } .style-theme-card .stc-dots{ display:flex; gap:0.3rem; margin-bottom:0.4rem; } .style-theme-card .stc-dot{ width:14px; height:14px; border-radius:50%; } .style-theme-card .stc-name{ font-size:0.74rem; font-weight:600; } .style-theme-card .stc-font{ font-size:0.66rem; color:var(--muted); margin-top:0.1rem; } .swatch.active{ border-color:var(--ink); } .switch{ position:relative; width:42px; height:24px; flex-shrink:0; } .switch input{ opacity:0; width:0; height:0; } .switch .track{ position:absolute; inset:0; background:var(--border); border-radius:999px; cursor:pointer; transition: background var(--transition); } .switch .track::after{ content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition: transform var(--transition); box-shadow:0 1px 3px rgba(0,0,0,0.3); } .switch input:checked + .track{ background:var(--accent); } .switch input:checked + .track::after{ transform:translateX(18px); } .checkbox-list{ display:flex; flex-direction:column; gap:0.5rem; } .checkbox-list label{ display:flex; align-items:center; gap:0.5rem; font-size:0.86rem; } .data-actions{ display:flex; flex-wrap:wrap; gap:0.6rem; } .info-box{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.9rem; } .info-box h4{ font-family:var(--font-display); } .info-box ul{ color:var(--ink); } .info-box li{ margin-bottom:0.2rem; } .guide-topic-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem 1.1rem; margin-bottom:0.8rem; } .finlit-chapter{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin-bottom:1rem; } .finlit-chapter h3{ margin:0 0 0.25rem; font-family:var(--font-display); font-size:1rem; display:flex; align-items:center; gap:0.5rem; } .finlit-chapter .fl-tag{ font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:var(--accent-soft); color:var(--accent); border-radius:4px; padding:0.1rem 0.45rem; } .finlit-chapter p{ margin:0.5rem 0 0; font-size:0.85rem; line-height:1.6; color:var(--ink); } .finlit-chapter .fl-example{ background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:0.6rem 0.8rem; margin-top:0.7rem; font-size:0.82rem; line-height:1.55; } .finlit-chapter .fl-example strong{ color:var(--accent); } .finlit-chapter ul{ margin:0.5rem 0 0; padding-left:1.1rem; font-size:0.84rem; line-height:1.65; color:var(--ink); } .finlit-chapter li{ margin-bottom:0.25rem; } .finlit-section-heading{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); padding:0.5rem 0 0.4rem; margin-top:0.4rem; } .guide-topic-card h4{ margin:0 0 0.4rem; font-family:var(--font-display); font-size:0.95rem; } .guide-topic-card p{ margin:0; font-size:0.85rem; line-height:1.55; color:var(--ink); } .guide-answer-card{ background:var(--accent-soft); border:1px solid var(--accent); border-radius:var(--radius-sm); padding:0.9rem 1rem; margin-top:0.8rem; } .guide-answer-card h4{ margin:0 0 0.35rem; font-size:0.88rem; color:var(--accent); } .guide-answer-card p{ margin:0; font-size:0.85rem; line-height:1.55; } .guide-no-result{ margin-top:0.8rem; font-size:0.84rem; color:var(--muted); } .backup-reminder-box{ background:var(--accent-2-soft); border:1px solid var(--accent-2); border-radius:var(--radius-sm); padding:0.8rem 0.9rem; margin-top:0.9rem; } .backup-reminder-box strong{ color:var(--accent-2); font-size:0.86rem; } .contact-hero{ background:linear-gradient(145deg, var(--paper-elevated), color-mix(in srgb, var(--accent) 9%, var(--paper-elevated))); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem 1.2rem; text-align:center; margin-bottom:1.2rem; } .contact-hero-icon{ width:52px; height:52px; border-radius:14px; margin:0 auto 0.7rem; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.18); } .contact-hero-icon svg{ width:26px; height:26px; } .contact-hero h2{ margin:0 0 0.4rem; font-family:var(--font-display); font-size:1.15rem; } .contact-hero p{ margin:0 auto; max-width:34rem; font-size:0.86rem; line-height:1.6; color:var(--muted); } .contact-open-btn{ display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.1rem; background:var(--accent); color:#fff; font-weight:600; font-size:0.9rem; padding:0.7rem 1.4rem; border-radius:999px; text-decoration:none; box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform var(--transition), box-shadow var(--transition); } .contact-open-btn:active{ transform:scale(0.97); } .contact-open-btn svg{ width:16px; height:16px; } .contact-divider{ display:flex; align-items:center; gap:0.8rem; margin:1.4rem 0 1rem; color:var(--muted); font-size:0.74rem; text-transform:uppercase; letter-spacing:0.06em; } .contact-divider::before, .contact-divider::after{ content:''; flex:1; height:1px; background:var(--border); } .contact-form-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:0.7rem; position:relative; overflow:hidden; } .contact-iframe-wrap{ position:relative; border-radius:var(--radius-sm); overflow:hidden; background:var(--paper); } .contact-iframe-wrap iframe{ width:100%; height:1100px; border:0; display:block; } .contact-loading{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.7rem; background:var(--paper); color:var(--muted); font-size:0.82rem; } .contact-spinner{ width:28px; height:28px; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation: contact-spin 0.8s linear infinite; } @keyframes contact-spin{ to{ transform:rotate(360deg); } } .venmo-donate-box{ border:1px solid #008CFF; border-radius:var(--radius-sm); padding:0.9rem 1rem; margin-top:0.9rem; text-align:center; background:linear-gradient(135deg, rgba(0,140,255,0.08), rgba(0,140,255,0.03)); } .venmo-donate-box .venmo-icon-wrap{ width:48px; height:48px; background:#008CFF; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:0.45rem; } .venmo-donate-box .venmo-icon-wrap svg{ width:28px; height:28px; fill:#fff; } .venmo-donate-box .venmo-msg{ font-size:0.85rem; font-weight:600; color:var(--ink); margin:0 0 0.2rem; } .venmo-donate-box .venmo-sub{ font-size:0.78rem; color:var(--muted); margin:0 0 0.65rem; line-height:1.4; } .venmo-donate-box a.venmo-btn{ display:inline-block; background:#008CFF; color:#fff; font-weight:700; font-size:0.85rem; padding:0.55rem 1.3rem; border-radius:20px; text-decoration:none; letter-spacing:0.01em; } .venmo-donate-box a.venmo-btn:hover{ filter:brightness(1.1); } input[type=file]{ display:none; } /* ======================================================================== TOAST ======================================================================== */ .toast-stack{ position:fixed; bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 16px); left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:0.5rem; z-index:60; width:min(90vw,360px); } .toast{ background:var(--ink); color:var(--paper); padding:0.6rem 0.9rem; border-radius:var(--radius-sm); font-size:0.84rem; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px); transition: opacity 0.25s, transform 0.25s; text-align:center; } .toast.show{ opacity:1; transform:translateY(0); } /* ======================================================================== RESPONSIVE ======================================================================== */ @media (max-width: 860px){ .sidebar{ display:none; } .bottom-nav{ display:block; } /* Extra padding ensures content never hides under nav (nav may shift via JS on Safari) */ .main{ padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px) + 1.8rem); } .charts-grid{ grid-template-columns:1fr; } .hero-card{ flex-direction:column; align-items:flex-start; } } @media (min-width: 861px){ .sheet-overlay, .more-sheet{ display:none !important; } } @media (max-width:480px){ .topbar h1{ font-size:1.1rem; } .stat-grid{ grid-template-columns:repeat(2,1fr); } .view{ padding:1rem 0.85rem 2rem; } .topbar{ padding:1rem 0.85rem; } } @media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none; } .ticker-wrap{ overflow-x:auto; } } /* ======================================================================== MODAL (added) ======================================================================== */ .modal-overlay{ position:fixed; inset:0; background:rgba(10,12,16,0.5); opacity:0; visibility:hidden; transition:opacity var(--transition); z-index:70; display:flex; align-items:center; justify-content:center; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); box-sizing:border-box; } .modal-overlay.open{ opacity:1; visibility:visible; } .modal{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); width:min(94vw,460px); /* max-height is set dynamically via JS using window.innerHeight for Safari accuracy */ max-height:82vh; /* initial fallback before JS runs */ display:flex; flex-direction:column; transform:translateY(12px) scale(0.98); transition:transform var(--transition); overflow:hidden; /* clip children to border-radius */ } .modal-overlay.open .modal{ transform:none; } .modal-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--border); background:var(--paper-elevated); z-index:1; flex-shrink:0; min-height:52px; } .modal-head h3{ margin:0; font-family:var(--font-display); font-size:1.05rem; } .modal-body{ padding:1.1rem; display:flex; flex-direction:column; gap:0.85rem; overflow-y:auto; flex:1 1 auto; /* Smooth momentum scrolling on iOS */ -webkit-overflow-scrolling:touch; } .modal-foot{ display:flex; gap:0.6rem; padding:0.75rem 1.1rem 1.1rem; border-top:1px solid var(--border); background:var(--paper-elevated); flex-shrink:0; /* Ensure buttons always sit above iOS home indicator */ padding-bottom: max(1.1rem, env(safe-area-inset-bottom)); } .modal-field{ display:flex; flex-direction:column; gap:0.3rem; } .modal-field label{ font-size:0.78rem; font-weight:600; color:var(--muted); } .modal-field input, .modal-field select{ padding:0.55rem 0.6rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font-size:0.92rem; } .modal-field input:focus, .modal-field select:focus{ outline:2px solid var(--accent); outline-offset:1px; } .modal-field small{ color:var(--muted); font-size:0.72rem; } .modal-row{ display:flex; gap:0.6rem; } .modal-row > *{ flex:1; } .modal-section-title{ font-size:0.74rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:700; margin-top:0.3rem; } /* edit icon button variant (doesn't turn red on hover) */ .icon-btn-sm.edit:hover{ color:var(--accent); border-color:var(--accent); } /* ======================================================================== ACCOUNT EXTRAS: kind badge, vaults, advance (added) ======================================================================== */ .acct-badges{ display:flex; gap:0.35rem; flex-wrap:wrap; margin:0.2rem 0 0.1rem; } .kind-badge{ display:inline-flex; align-items:center; gap:0.25rem; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:0.15rem 0.45rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); } .kind-badge.debit{ background:var(--accent-soft); color:var(--accent); border-color:transparent; } .kind-badge.credit{ background:var(--danger-soft); color:var(--danger); border-color:transparent; } .kind-badge.investment{ background:var(--accent-2-soft); color:var(--accent-2); border-color:transparent; } .kind-badge.loan{ background:var(--danger-soft); color:var(--danger); border-color:transparent; } .acct-actions{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.7rem; } .vault-list{ display:flex; flex-direction:column; gap:0.45rem; margin-top:0.7rem; } .vault-row{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.45rem 0.6rem; } .vault-row .vname{ display:flex; align-items:center; gap:0.4rem; font-size:0.82rem; } .vault-row .vname svg{ width:14px; height:14px; color:var(--accent-2); } .vault-row .vbal{ font-family:var(--font-mono); font-size:0.82rem; } .vault-mini-actions{ display:flex; gap:0.3rem; } .advance-banner{ margin-top:0.7rem; background:var(--accent-2-soft); border:1px solid transparent; border-radius:var(--radius-sm); padding:0.55rem 0.65rem; font-size:0.78rem; display:flex; flex-direction:column; gap:0.45rem; } .advance-banner .amt{ font-family:var(--font-mono); font-weight:700; } .available-line{ font-size:0.74rem; color:var(--muted); margin-top:0.3rem; } /* ======================================================================== DASHBOARD PANELS: daily target + vault split (added) ======================================================================== */ .panel{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem; margin-bottom:1.1rem; } .panel-head{ display:flex; align-items:center; justify-content:space-between; gap:0.6rem; margin-bottom:0.7rem; } .panel-head.mini{ margin-bottom:0.4rem; } .panel-head.mini h3{ font-size:0.76rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:700; } .panel-head h3{ margin:0; font-family:var(--font-display); font-size:0.98rem; } .panel-reorder{ display:flex; gap:0.2rem; flex-shrink:0; } .panel-reorder .icon-btn-sm{ width:24px; height:24px; font-size:0.6rem; } .panel-reorder .icon-btn-sm:disabled{ opacity:0.3; cursor:default; } .target-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.7rem; } .target-cell{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm); padding:0.7rem 0.8rem; } .target-cell .t-lbl{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); font-weight:600; } .target-cell .t-val{ font-family:var(--font-mono); font-weight:700; font-size:1.2rem; margin-top:0.15rem; } .target-cell.hl{ background:linear-gradient(155deg,var(--accent-soft),transparent); border-color:transparent; } .target-cell.hl .t-val{ color:var(--accent); } .split-list{ display:flex; flex-direction:column; gap:0.5rem; } .split-row{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:0.6rem; padding:0.5rem 0.65rem; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-sm); } .vault-split-edit-row{ display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0; border-bottom:1px solid var(--border); } .vault-split-edit-row input{ padding:0.4rem 0.5rem; border:1px solid var(--border); border-radius:8px; background:var(--paper); color:var(--ink); font-size:0.85rem; } .split-row .s-name{ font-size:0.85rem; font-weight:600; display:flex; align-items:center; gap:0.45rem; } .split-row .s-dot{ width:10px; height:10px; border-radius:3px; } .split-row .s-pct{ font-size:0.74rem; color:var(--muted); font-family:var(--font-mono); } .split-row .s-amt{ font-family:var(--font-mono); font-weight:700; font-size:0.95rem; } .split-input-row{ display:flex; gap:0.5rem; align-items:flex-end; margin-bottom:0.8rem; } .retirement-inputs{ display:flex; gap:0.6rem; flex-wrap:wrap; } .retirement-inputs input{ width:100%; padding:0.55rem 0.6rem; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); } .split-input-row .form-group{ margin:0; } .extra-widgets-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0.9rem; } .xw-card{ background:var(--paper-elevated); border:1px solid var(--border); border-radius:var(--radius); padding:0.95rem 1rem; box-shadow:var(--shadow); } .xw-card h4{ margin:0 0 0.5rem; font-size:0.74rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; } .xw-card .xw-big{ font-family:var(--font-mono); font-size:1.35rem; font-weight:700; } .xw-card .xw-sub{ font-size:0.74rem; color:var(--muted); margin-top:0.2rem; } .xw-mini-bars{ display:flex; align-items:flex-end; gap:6px; height:54px; margin-top:0.4rem; } .xw-mini-bars .b{ flex:1; background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 50%,transparent)); border-radius:4px 4px 1px 1px; min-height:3px; } .xw-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.35rem; } .xw-list li{ display:flex; justify-content:space-between; gap:0.6rem; font-size:0.82rem; } .xw-list li .mono{ color:var(--muted); } /* widget toggle list scroll for the long list (added) */ #widgetToggleList{ max-height:340px; overflow-y:auto; padding-right:0.3rem; } .widget-group-label{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:700; margin:0.6rem 0 0.2rem; } .widget-group-label:first-child{ margin-top:0; } /* bills table tweaks (added) */ .subhead{ font-family:var(--font-display); font-size:0.98rem; margin:1.6rem 0 0.7rem; } .manage-bar{ display:flex; justify-content:flex-end; margin-bottom:0.6rem; } /* ======================================================================== GUIDE NOTICE BANNER ======================================================================== */ @keyframes notice-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes notice-pulse { 0%, 100% { box-shadow: 0 6px 28px rgba(220,38,38,0.45), 0 0 0 0 rgba(251,191,36,0.5); } 50% { box-shadow: 0 8px 36px rgba(220,38,38,0.65), 0 0 0 6px rgba(251,191,36,0); } } @keyframes notice-label-glow { 0%, 100% { text-shadow: 0 0 8px rgba(251,191,36,0.9), 0 0 20px rgba(251,191,36,0.4); } 50% { text-shadow: 0 0 14px rgba(251,191,36,1), 0 0 32px rgba(251,191,36,0.7); } } .guide-notice-wrap{ position: relative; background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 8%, #dc2626 18%, #ea580c 30%, #d97706 40%, #ca8a04 48%, #16a34a 56%, #0284c7 68%, #7c3aed 80%, #9333ea 90%, #db2777 100%); border-radius: var(--radius); padding: 0; margin-bottom: 1.4rem; color: #fff; overflow: hidden; animation: notice-pulse 2.8s ease-in-out infinite; border: 2px solid transparent; background-clip: padding-box; } /* Rainbow border via pseudo-element */ .guide-notice-wrap::before{ content:''; position:absolute; inset:-2px; z-index:0; border-radius:calc(var(--radius) + 2px); background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); background-size: 300% 100%; animation: notice-shimmer 3s linear infinite; } .guide-notice-wrap > *{ position:relative; z-index:1; } /* Dark overlay so text stays legible */ .guide-notice-wrap::after{ content:''; position:absolute; inset:2px; z-index:0; border-radius:calc(var(--radius) - 2px); background: linear-gradient(135deg, rgba(127,29,29,0.92) 0%, rgba(220,38,38,0.88) 20%, rgba(202,138,4,0.85) 38%, rgba(22,163,74,0.85) 54%, rgba(2,132,199,0.88) 70%, rgba(124,58,237,0.90) 85%, rgba(219,39,119,0.92) 100%); } .guide-notice-label{ position:relative; z-index:2; display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(0,0,0,0.35); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 0 0 var(--radius-sm) 0; margin-bottom: 0.1rem; color: #fde68a; animation: notice-label-glow 2.2s ease-in-out infinite; border-right: 1px solid rgba(251,191,36,0.3); border-bottom: 1px solid rgba(251,191,36,0.3); } .guide-notice-title{ position:relative; z-index:2; font-size: 1.08rem; font-weight: 800; letter-spacing: 0.02em; padding: 0.65rem 1.1rem 0.4rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .guide-notice-steps{ position:relative; z-index:2; margin: 0 0 0.85rem 2.2rem; padding: 0; font-size: 0.86rem; line-height: 1.8; opacity: 1; padding-right: 1rem; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .guide-notice-steps li{ margin-bottom: 0.1rem; } .guide-notice-steps li strong{ color: #fde68a; } .guide-notice-pills{ position:relative; z-index:2; display: flex; flex-direction: column; gap: 0.55rem; padding: 0 1rem 1.1rem; } .guide-notice-pill{ display: flex; gap: 0.6rem; align-items: flex-start; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.8rem; line-height: 1.55; text-shadow: 0 1px 3px rgba(0,0,0,0.4); } .guide-notice-pill strong{ color: #fde68a; }