/* ============================================================ Boarding Pass — v4 design system Repris du mockup Claude Design (React) puis porté vanilla. Typo : Instrument Serif + Inter Tight + JetBrains Mono (Google Fonts CDN) ============================================================ */ /* --- Palettes (thème résolu appliqué sur ) --- */ :root, :root[data-theme="dark"]{ --bg:#0E0D0B; --fg:#F2ECDF; --dim:#A69E92; --line:rgba(242,236,223,0.12); --card:#181613; --accent:#FF5E3A; --accent2:#8FB37A; } :root[data-theme="light"]{ --bg:#F5EFE3; --fg:#0E0D0B; --dim:#524D45; --line:rgba(14,13,11,0.14); --card:#EDE5D3; --accent:#B8391A; --accent2:#4A7239; } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0;overscroll-behavior-y:none;background:var(--bg)} body{font-family:'Inter Tight',system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--fg)} a{color:inherit;text-decoration:none;transition:opacity .2s} a:hover{opacity:.7} button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer} input,textarea,select{font:inherit;color:inherit;background:transparent;border:1px solid var(--line);border-radius:4px;padding:12px 14px;outline:none;width:100%;transition:border-color .2s} input:focus,textarea:focus,select:focus{border-color:var(--accent)} select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer} ::selection{background:#FF5E3A;color:#F5F0E6} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:rgba(128,128,128,.25);border-radius:999px} ::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.45)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} @keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes modalIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes blink{50%{opacity:.2}} @keyframes slideL{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}} @keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}} .rise{animation:riseIn .55s cubic-bezier(.2,.7,.2,1) both} .page-anim{animation:slideL .35s cubic-bezier(.2,.7,.2,1) both} .cursor::after{content:'';display:inline-block;width:.06em;height:.72em;margin-left:.08em;background:var(--accent);animation:blink 1.1s steps(1) infinite;vertical-align:baseline} /* --- Layout --- */ .shell{display:flex;min-height:100vh;background:var(--bg);color:var(--fg);transition:background .4s ease,color .4s ease} .sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:8px} .brand{padding:10px 12px 20px;border-bottom:1px solid var(--line);margin-bottom:12px} .brand-name{font-family:'Instrument Serif',serif;font-size:24px;letter-spacing:-.01em} .brand-name em{font-style:italic;color:var(--accent)} .brand-sub{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px} .nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:4px;font-size:13px;color:var(--dim);cursor:pointer;transition:all .2s;text-align:left;width:100%} .nav-item:hover{color:var(--fg);background:var(--card)} .nav-item.active{color:var(--fg);background:var(--card);position:relative} .nav-item.active::before{content:'';position:absolute;left:-16px;top:8px;bottom:8px;width:2px;background:var(--accent)} .nav-icon{width:16px;height:16px;flex-shrink:0;opacity:.85;display:inline-flex} .nav-item.active .nav-icon{opacity:1;color:var(--accent)} .sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:4px} .content{flex:1;min-width:0;padding:32px clamp(24px,4vw,56px) 120px;position:relative;overflow-x:hidden} .noise{position:fixed;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;z-index:100;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJyBvcGFjaXR5PScwLjknLz48L3N2Zz4=")} /* --- Bottom nav (mobile) --- */ .bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:color-mix(in oklab, var(--bg) 92%, transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom))} .bn-row{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} .bn-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:6px;color:var(--dim);transition:color .2s;min-height:52px;justify-content:center} .bn-item.active{color:var(--accent)} .bn-label{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase} /* --- Topbar --- */ .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:32px} .topbar-status{display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)} .status-dot{display:inline-block;width:8px;height:8px;border-radius:999px;background:var(--accent);box-shadow:0 0 12px var(--accent)} .pill{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--dim);transition:all .2s;background:transparent} .pill:hover{border-color:var(--fg);color:var(--fg)} /* --- Page header --- */ .page-head{display:flex;flex-direction:column;gap:8px;margin-bottom:32px} .page-back{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .2s;align-self:flex-start;padding:4px 0} .page-back:hover{color:var(--fg)} .page-title-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap} .page-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.02em;margin:0} .page-title em{font-style:italic;color:var(--accent)} .page-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} /* --- Section --- */ .section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px} .section-num{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .section-num-action{color:var(--fg)} .section-title{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(24px,3vw,36px);line-height:1;letter-spacing:-.01em;margin:0} .mono-label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .mono-meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)} /* --- Cards --- */ .card{padding:clamp(20px,3vw,32px);background:var(--card);border-radius:6px;position:relative;overflow:hidden} /* --- Buttons --- */ .btn{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;border-radius:2px;transition:all .2s;display:inline-flex;align-items:center;gap:8px;cursor:pointer;min-height:40px;justify-content:center} .btn-primary{background:var(--accent);color:var(--bg);border:none} .btn-primary:hover{filter:brightness(1.1)} .btn-solid{background:var(--fg);color:var(--bg);border:none} .btn-solid:hover{background:var(--accent)} .btn-ghost{border:1px solid var(--line);color:var(--fg);background:transparent} .btn-ghost:hover{border-color:var(--fg)} .btn-ghost-dim{border:1px solid var(--line);color:var(--dim);background:transparent} .btn-ghost-dim:hover{border-color:var(--fg);color:var(--fg)} .btn-danger{border:1px solid var(--line);color:var(--dim);background:transparent} .btn-danger:hover{border-color:var(--accent);color:var(--accent)} .btn-full{width:100%} .icon-btn{width:36px;height:36px;padding:0;border-radius:4px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--dim);transition:all .2s;flex-shrink:0} .icon-btn:hover{color:var(--fg);border-color:var(--fg)} .icon-btn.danger:hover{color:var(--accent);border-color:var(--accent)} .filter-pill{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border:1px solid var(--line);border-radius:999px;color:var(--dim);transition:all .2s;cursor:pointer;white-space:nowrap;background:transparent} .filter-pill:hover{border-color:var(--fg);color:var(--fg)} .filter-pill.active{border-color:var(--accent);color:var(--accent);background:color-mix(in oklab, var(--accent) 8%, transparent)} .filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px} .filter-row.scroll-x{flex-wrap:nowrap;overflow-x:auto;margin-left:-4px;margin-right:-4px;padding:0 4px 4px;scrollbar-width:none} .filter-row.scroll-x::-webkit-scrollbar{display:none} .search-input{margin-bottom:20px} /* --- Task --- */ .task-group-head{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:20px 0 10px;display:flex;justify-content:space-between;align-items:baseline} .task-group-head.overdue{color:var(--accent)} .task-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)} .task-row:last-child{border-bottom:none} .task-check{width:22px;height:22px;flex-shrink:0;border-radius:999px;border:1.5px solid var(--dim);background:transparent;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;font-size:12px} .task-check:hover{border-color:var(--fg)} .task-check.done{background:var(--accent2);border-color:var(--accent2);color:var(--bg)} .task-label{flex:1;font-size:15px;line-height:1.4;min-width:0;cursor:pointer} .task-label.done{text-decoration:line-through;opacity:.45} .task-meta{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);white-space:nowrap} .task-meta.overdue{color:var(--accent)} .task-meta.today{color:var(--accent2)} .task-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s} .task-row:hover .task-actions{opacity:1} /* --- Project card --- */ .project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .project-card{padding:24px;background:var(--card);border-radius:6px;display:flex;flex-direction:column;gap:14px;transition:transform .3s cubic-bezier(.2,.7,.2,1);cursor:pointer;text-align:left;width:100%;border:1px solid transparent} .project-card:hover{transform:translateY(-4px);border-color:var(--line)} .project-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:2px} .badge-status{color:var(--accent2)} .badge-active{background:var(--accent2);color:var(--bg)} .badge-paused{background:var(--dim);color:var(--bg)} .badge-done{border:1px solid var(--line);color:var(--dim)} .badge-idx{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--dim)} .project-name{font-family:'Instrument Serif',serif;font-size:30px;line-height:1.05;letter-spacing:-.01em} .project-note{font-size:13px;color:var(--dim);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .chip{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg);display:inline-flex;align-items:center;gap:6px} .chip:hover{border-color:var(--fg)} /* --- Ritual --- */ .rituals-week{display:grid;grid-template-columns:repeat(7,1fr);gap:12px} .ritual-day{padding:16px 12px;background:var(--card);border-radius:6px;min-height:120px;display:flex;flex-direction:column;gap:10px} .ritual-day.today{border:1px solid var(--accent)} .ritual-day-name{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .ritual-day.today .ritual-day-name{color:var(--accent)} .ritual-item{font-size:13px;line-height:1.35;display:flex;gap:8px;align-items:flex-start} .ritual-item .rit-body{flex:1;min-width:0} .ritual-item .rit-actions{display:flex;gap:2px} .ritual-check{width:14px;height:14px;flex-shrink:0;border-radius:999px;border:1px solid var(--dim);cursor:pointer;margin-top:3px} .ritual-check.done{background:var(--accent2);border-color:var(--accent2)} /* --- Mail --- */ .mail-row{display:grid;grid-template-columns:12px 1fr auto auto;gap:14px;align-items:center;padding:14px 12px;border-bottom:1px solid var(--line);border-radius:4px;transition:background .2s} .mail-row:hover{background:var(--card)} .mail-dot{width:6px;height:6px;border-radius:999px} .mail-body{min-width:0;cursor:pointer} .mail-sender{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-subject{font-size:14px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mail-date{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--dim);white-space:nowrap} .mail-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s} .mail-row:hover .mail-actions{opacity:1} /* --- Canva --- */ .canva-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px} .canva-tile{display:block;position:relative;aspect-ratio:4/5;background:var(--card);border-radius:4px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)} .canva-tile:hover{transform:scale(1.02);opacity:1} .canva-bg{position:absolute;inset:0;z-index:0} .canva-thumb{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease} .canva-thumb.loaded{opacity:1} .canva-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;background:linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.35) 40%, transparent 70%)} .canva-fav{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:999px;background:rgba(0,0,0,.4);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .2s;backdrop-filter:blur(8px)} .canva-fav:hover{background:rgba(0,0,0,.6)} .canva-fav.active{color:var(--accent)} .canva-date{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:6px} .canva-title{font-family:'Instrument Serif',serif;font-size:17px;line-height:1.15;color:#fff} /* --- KPIs --- */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px} .kpi{padding:24px;background:var(--card);border-radius:6px} .kpi-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px} .kpi-value{font-family:'Instrument Serif',serif;font-size:clamp(40px,5vw,64px);line-height:1;letter-spacing:-.02em} .kpi-value.accent{color:var(--accent)} .kpi-delta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--accent2);margin-top:6px} .row-dash{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px} .row-dash:last-child{border-bottom:none} .row-dash .amount{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);font-weight:600} .row-dash .rd-date{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim)} /* --- Scenario --- */ .scenario-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:16px;border-top:1px dashed var(--line);margin-top:16px} .scenario-stat-value{font-family:'Instrument Serif',serif;font-size:26px;line-height:1} .scenario-stat-value.warn{color:var(--accent)} .exec-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px dashed var(--line);font-family:'JetBrains Mono',monospace;font-size:12px} .exec-row:last-child{border-bottom:none} .exec-dot{width:8px;height:8px;border-radius:999px} .exec-dot.ok{background:var(--accent2)} .exec-dot.err{background:var(--accent)} .exec-dot.pend{background:var(--dim)} /* --- Focus block --- */ .focus-block{margin:0 0 32px;padding:28px 32px;border-left:3px solid var(--accent);background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 6%,transparent),transparent 60%)} .focus-tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .focus-text{font-family:'Instrument Serif',serif;font-size:clamp(26px,3vw,38px);line-height:1.18;letter-spacing:-.01em;margin:0;max-width:900px} /* --- Alert --- */ .alert-critical{margin-bottom:32px;padding:26px 32px;border:1px solid var(--accent);border-radius:6px;background:linear-gradient(120deg,color-mix(in oklab,var(--accent) 10%,transparent),transparent 70%);display:flex;flex-direction:column;gap:14px} .alert-badge{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding:4px 10px;background:var(--accent);color:var(--bg);border-radius:2px;align-self:flex-start} .alert-title{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(22px,2.8vw,30px);line-height:1.18;color:var(--accent);margin:0;max-width:900px} .alert-cta{align-self:flex-start;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--accent);color:var(--accent);border-radius:2px;transition:all .2s} .alert-cta:hover{background:var(--accent);color:var(--bg);opacity:1} /* --- Priority mail hero --- */ .prio-mail{position:relative} .prio-mail-glow{position:absolute;top:0;right:0;width:40%;height:100%;background:radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%);pointer-events:none} .prio-mail-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:20px;flex-wrap:wrap;position:relative} .prio-mail-days{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .prio-mail-sender{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);margin-bottom:12px} .prio-mail-subject{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(26px,4vw,44px);line-height:1.05;letter-spacing:-.01em;margin:0 0 18px;max-width:900px} .prio-mail-preview{max-width:820px;font-size:15px;line-height:1.55;opacity:.8;margin:0 0 24px} .prio-mail-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative} /* --- Empty state --- */ .empty{padding:48px 20px;text-align:center;color:var(--dim)} .empty-glyph{font-family:'Instrument Serif',serif;font-size:56px;color:var(--accent);opacity:.4;margin-bottom:16px;line-height:1} .empty-title{font-family:'Instrument Serif',serif;font-style:italic;font-size:24px;color:var(--fg);margin-bottom:8px} .empty-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px} /* --- Modal --- */ .modal-back{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease} .modal{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:28px;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;animation:modalIn .3s cubic-bezier(.2,.7,.2,1)} .modal-title{font-family:'Instrument Serif',serif;font-size:32px;line-height:1;letter-spacing:-.01em;margin:0 0 6px} .modal-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:24px} .modal-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .modal-field label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .modal-hint{font-size:12px;color:var(--dim);line-height:1.4} .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px} /* --- Toast --- */ .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);padding:14px 24px;background:var(--fg);color:var(--bg);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;z-index:300;box-shadow:0 12px 40px rgba(0,0,0,.3);animation:riseIn .3s ease;max-width:min(520px,calc(100vw - 32px));text-align:center} /* --- FAB --- */ .fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:999px;background:var(--accent);color:var(--bg);font-family:'JetBrains Mono',monospace;font-size:24px;box-shadow:0 8px 32px rgba(0,0,0,.35);z-index:50;transition:transform .2s;display:inline-flex;align-items:center;justify-content:center} .fab:hover{transform:scale(1.05)} /* --- Footer --- */ .footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)} /* --- Home layout --- */ .home-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px} .home-hero-name{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(64px,10vw,140px);line-height:.94;letter-spacing:-.02em;margin:0 0 clamp(24px,4vw,40px)} .home-hero-name em{font-style:italic;color:var(--accent)} .home-date{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .home-rule{display:inline-block;width:28px;height:1px;background:var(--fg)} .stack{display:flex;flex-direction:column;gap:24px} /* --- Login --- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg);color:var(--fg)} .login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:8px} .login-brand{font-family:'Instrument Serif',serif;font-size:44px;letter-spacing:-.02em;line-height:1;margin-bottom:4px} .login-brand em{font-style:italic;color:var(--accent)} .login-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:28px} .login-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px} .login-field label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .login-err{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);min-height:16px;margin:4px 0 8px} .login-foot{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:20px;line-height:1.6} /* --- Skeleton --- */ .skel{background:linear-gradient(90deg, var(--card) 25%, color-mix(in oklab,var(--fg) 8%,var(--card)) 50%, var(--card) 75%);background-size:800px 100%;animation:shimmer 1.4s infinite linear;border-radius:6px} .skel-line{height:14px;margin-bottom:10px} .skel-card{height:120px;margin-bottom:16px} /* --- Banner (snapshot stale / offline) --- */ .banner{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:10px 16px;border-radius:4px;margin-bottom:20px;background:color-mix(in oklab,var(--accent) 12%,transparent);color:var(--accent);border:1px solid color-mix(in oklab,var(--accent) 40%,transparent)} .settings-block{margin-bottom:36px} .settings-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap} .settings-row:last-child{border-bottom:none} .settings-key{font-size:14px} .settings-key .k-sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:3px} .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden} .seg button{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;color:var(--dim)} .seg button.active{background:var(--accent);color:var(--bg)} /* --- Responsive --- */ @media(max-width:1023px){ .sidebar{display:none} .bottom-nav{display:block} .content{padding:24px 20px calc(90px + env(safe-area-inset-bottom))} .content{padding-top:max(24px, env(safe-area-inset-top))} .fab{bottom:calc(84px + env(safe-area-inset-bottom))} .toast{bottom:calc(84px + env(safe-area-inset-bottom))} } @media(max-width:900px){ .home-grid{grid-template-columns:1fr} .rituals-week{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))} } @media(max-width:768px){ .content{padding-left:16px;padding-right:16px} .page-title{font-size:clamp(36px,10vw,56px)} .home-hero-name{font-size:clamp(52px,14vw,80px)} .focus-block{padding:22px 20px;margin-bottom:24px} .focus-text{font-size:20px} .canva-grid{grid-template-columns:repeat(2,1fr)} .kpi-grid{grid-template-columns:repeat(2,1fr)} .rituals-week{grid-template-columns:1fr} } @media(max-width:480px){ .content{padding:20px 14px calc(96px + env(safe-area-inset-bottom))} .home-hero-name{font-size:56px} .kpi-value{font-size:36px} .mail-actions,.task-actions{opacity:1} .btn{padding:12px 16px;min-height:44px} }