:root { color-scheme: dark; --bg: #0a0f1d; --bg-elevated: rgba(15, 20, 36, 0.82); --panel: rgba(17, 23, 41, 0.84); --panel-2: rgba(20, 27, 48, 0.92); --line: rgba(255, 255, 255, 0.08); --text: #f4f7fb; --muted: #98a2bc; --good: #6fe3b5; --shadow: 0 24px 80px rgba(0, 0, 0, 0.45); } /* ── Light theme ── opt in via ─────────────────── */ html[data-theme="light"] { color-scheme: light; --bg: #f4f6fb; --bg-elevated: rgba(255, 255, 255, 0.92); --panel: rgba(255, 255, 255, 0.94); --panel-2: rgba(248, 250, 254, 0.98); --line: rgba(15, 23, 42, 0.10); --text: #1a2033; --muted: #5a657d; --good: #1ba879; --shadow: 0 18px 50px rgba(15, 23, 42, 0.10); } html[data-theme="light"] body { background: radial-gradient(circle at top left, rgba(91,120,255,0.10), transparent 30%), radial-gradient(circle at top right, rgba(47,196,155,0.08), transparent 26%), linear-gradient(135deg, #f4f6fb 0%, #eaeef7 55%, #eef2f9 100%); } /* Surface tints — replace white-on-white film with subtle dark-on-light film */ html[data-theme="light"] .login-card, html[data-theme="light"] .menu-card, html[data-theme="light"] .team-card, html[data-theme="light"] .stats-card, html[data-theme="light"] .board-shell, html[data-theme="light"] .summary-card, html[data-theme="light"] .home-stat-card, html[data-theme="light"] .calendar-head, html[data-theme="light"] .calendar-day, html[data-theme="light"] .associate-item, html[data-theme="light"] .recent-task-chip, html[data-theme="light"] .all-tasks-row, html[data-theme="light"] .all-tasks-group-header, html[data-theme="light"] .subtile-item, html[data-theme="light"] .ai-suggestion { background: rgba(15, 23, 42, 0.035); border-color: rgba(15, 23, 42, 0.09); } html[data-theme="light"] .all-tasks-row:hover { background: rgba(15, 23, 42, 0.06); } html[data-theme="light"] .all-tasks-group-count, html[data-theme="light"] .all-tasks-due { background: rgba(15, 23, 42, 0.06); } /* Form fields */ html[data-theme="light"] .field input, html[data-theme="light"] .field textarea, html[data-theme="light"] .field select { background: #ffffff; border-color: rgba(15, 23, 42, 0.14); color: var(--text); } html[data-theme="light"] .field select option, html[data-theme="light"] .field select optgroup { background: #ffffff; color: #1a2033; } /* Buttons / pills */ html[data-theme="light"] .btn { background: rgba(15, 23, 42, 0.06); color: var(--text); } html[data-theme="light"] .btn:hover { background: rgba(15, 23, 42, 0.10); } html[data-theme="light"] .btn-secondary { background: rgba(15, 23, 42, 0.07); } html[data-theme="light"] .btn-ghost { background: transparent; border-color: rgba(15, 23, 42, 0.12); } html[data-theme="light"] .pill { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.10); color: #2a3247; } html[data-theme="light"] .pill.active { background: rgba(27, 168, 121, 0.16); border-color: rgba(27, 168, 121, 0.45); color: #0f5a3e; } html[data-theme="light"] .user-chip { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.10); } html[data-theme="light"] .badge { background: rgba(255, 255, 255, 0.65); border-color: rgba(15, 23, 42, 0.12); color: #1a2033; } html[data-theme="light"] .tile-icon { background: rgba(15, 23, 42, 0.10); } html[data-theme="light"] .tile-menu { background: rgba(15, 23, 42, 0.10); color: #1a2033; } html[data-theme="light"] .tile-menu:hover { background: rgba(15, 23, 42, 0.18); } html[data-theme="light"] .progress-bar { background: rgba(15, 23, 42, 0.14); } html[data-theme="light"] .importance-bar { background: rgba(15, 23, 42, 0.08); } html[data-theme="light"] .check:hover { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.30); } html[data-theme="light"] .editor-divider { background: rgba(15, 23, 42, 0.10); } html[data-theme="light"] .task-stat { background: rgba(15, 23, 42, 0.05); } html[data-theme="light"] .icon-grid { background: rgba(15, 23, 42, 0.03); } html[data-theme="light"] .icon-opt:hover { background: rgba(15, 23, 42, 0.08); } html[data-theme="light"] .cog-btn { background: rgba(15, 23, 42, 0.06); color: var(--text); } html[data-theme="light"] .cog-btn:hover { background: rgba(224, 124, 26, 0.18); } /* Config / settings overlay */ html[data-theme="light"] .config-overlay { background: rgba(15, 23, 42, 0.30); } html[data-theme="light"] .config-panel { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 32px 100px rgba(15, 23, 42, 0.18); } html[data-theme="light"] .config-close-btn { background: rgba(15, 23, 42, 0.06); color: var(--text); } html[data-theme="light"] .config-close-btn:hover { background: rgba(249, 115, 115, 0.18); color: #b3261e; } html[data-theme="light"] .btn-icon { background: rgba(15, 23, 42, 0.07); color: var(--text); } html[data-theme="light"] .btn-icon:hover { background: rgba(15, 23, 42, 0.13); } html[data-theme="light"] .field-hint code { background: rgba(15, 23, 42, 0.07); } /* Notices */ html[data-theme="light"] .notice { background: rgba(27, 168, 121, 0.10); border-color: rgba(27, 168, 121, 0.28); color: #0f5a3e; } html[data-theme="light"] .notice-error { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.28); color: #8a1f1f; } /* AI assistant */ html[data-theme="light"] .ai-msg-user { background: rgba(27, 168, 121, 0.10); border-color: rgba(27, 168, 121, 0.25); color: #0f5a3e; } html[data-theme="light"] .ai-msg-bot { background: rgba(15, 23, 42, 0.05); border-color: rgba(15, 23, 42, 0.10); } /* Calendar tasks */ html[data-theme="light"] .calendar-task { background: rgba(27, 168, 121, 0.14); color: #0f5a3e; } /* Chrono grid */ html[data-theme="light"] .chrono-header-row { background: var(--panel); } html[data-theme="light"] .chrono-time-col { background: rgba(15, 23, 42, 0.04); } html[data-theme="light"] .chrono-time-label { color: rgba(15, 23, 42, 0.55); border-right-color: rgba(15, 23, 42, 0.10); border-bottom-color: rgba(15, 23, 42, 0.06); } html[data-theme="light"] .chrono-day-hdr { border-right-color: rgba(15, 23, 42, 0.07); } html[data-theme="light"] .chrono-day-col { border-right-color: rgba(15, 23, 42, 0.07); } html[data-theme="light"] .chrono-hour-row { border-bottom-color: rgba(15, 23, 42, 0.07); } html[data-theme="light"] .chrono-hour-row.hour-even { background: rgba(15, 23, 42, 0.02); } html[data-theme="light"] .chrono-hour-row:hover { background: rgba(15, 23, 42, 0.04); } html[data-theme="light"] .chrono-nav-btn { background: rgba(15, 23, 42, 0.05); color: var(--text); } html[data-theme="light"] .chrono-nav-btn:hover:not(:disabled) { background: rgba(15, 23, 42, 0.10); } html[data-theme="light"] .day-pill { color: var(--text); } html[data-theme="light"] .day-pill:hover { background: rgba(15, 23, 42, 0.08); } html[data-theme="light"] .day-pill.selected { color: #ffffff; } /* Mobile topbar */ html[data-theme="light"] .mobile-topbar { background: rgba(255, 255, 255, 0.95); } html[data-theme="light"] .mobile-hamburger, html[data-theme="light"] .mobile-panel-btn { background: rgba(15, 23, 42, 0.07); color: var(--text); } html[data-theme="light"] .mobile-hamburger:hover, html[data-theme="light"] .mobile-panel-btn:hover { background: rgba(15, 23, 42, 0.13); } html[data-theme="light"] .site-footer-sep { color: rgba(15, 23, 42, 0.20); } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top left, rgba(91,120,255,0.22), transparent 30%), radial-gradient(circle at top right, rgba(47,196,155,0.18), transparent 26%), linear-gradient(135deg, #0a0f1d 0%, #14182a 55%, #101528 100%); color: var(--text); font-family: Inter, system-ui, sans-serif; } a { color: inherit; } button, input, textarea, select { font: inherit; } body { padding: 24px; } .app-shell { max-width: 1560px; margin: 0 auto; display: grid; grid-template-columns: 300px minmax(0, 1.45fr) 340px; gap: 18px; align-items: start; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(18px); } .sidebar { padding: 24px 20px; position: sticky; top: 24px; } .center-stage { min-width: 0; } .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; } .brand-logo { flex-shrink: 0; } .brand-title { font-size: 1.75rem; font-weight: 700; } .brand-otter { color: #3a9ee8; } .brand-sub { color: var(--muted); font-size: 0.92rem; margin-top: 2px; } .login-card, .menu-card, .team-card, .stats-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; padding: 18px; margin-bottom: 16px; } .card-title { font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; } .card-subtitle { color: var(--muted); font-size: 0.92rem; margin-bottom: 16px; } .field { margin-bottom: 14px; } .field label { display:block; color: #c3cbe0; font-size: 0.82rem; margin-bottom: 8px; } .field input, .field textarea, .field select { width:100%; border-radius: 14px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04); color: var(--text); padding: 12px 14px; outline: none; } .field select option { background: #1a2035; color: #e8edf8; } .field select optgroup { background: #1a2035; color: #7e92b8; font-style: normal; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; } .field textarea { min-height: 92px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(111,227,181,0.65); box-shadow: 0 0 0 4px rgba(111,227,181,0.12); } .row { display:flex; gap:12px; } .row > * { flex:1; } .btn { border: 0; border-radius: 14px; padding: 12px 16px; cursor:pointer; transition: .2s ease; color: var(--text); background: rgba(255,255,255,0.06); } .btn:hover { transform: translateY(-1px); background: rgba(255,255,255,0.1); } .btn-primary { background: #e07c1a; } .btn-primary:hover { background: #c96b0f; } .btn-reminder { background: linear-gradient(135deg, #1e6fb5 0%, #0d3d6e 100%); border: 1px solid rgba(100,180,255,0.25); font-weight: 600; } .btn-reminder:hover { background: linear-gradient(135deg, #2580d0 0%, #104d8a 100%); transform: translateY(-1px); } .btn-reminder:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-secondary { background: rgba(255,255,255,0.08); } .btn-danger { background: #d93535; } .btn-danger:hover { background: #bc2626; } .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.08); } .btn-full { width:100%; } .header-panel { padding: 24px; } .topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom: 18px; } .title-wrap h1 { margin: 0; font-size: 2.3rem; } .title-wrap p { margin: 8px 0 0; color: var(--muted); } .action-bar { display:flex; gap:10px; flex-wrap:wrap; } .pill { padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #d8deee; } .pill.active { background: rgba(111,227,181,0.14); border-color: rgba(111,227,181,0.42); color: #c8ffea; } .user-chip { display:flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #ffd36d, #ff8b8b); display:grid; place-items:center; color:#101528; font-weight: 700; } .dashboard-grid { display:grid; gap: 18px; } .summary-strip { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .summary-card { border-radius: 18px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07); padding: 16px 18px; } .summary-label { color: var(--muted); font-size: 0.8rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.08em; } .summary-value { font-size: 1.15rem; font-weight: 700; } .compact-guest { margin-top: 6px; } /* ── Landing / Home page (logged-out center column) ── */ .home-landing { grid-column: 1 / -1; display:flex; flex-direction:column; gap:22px; padding:4px 0; } .home-stats-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; } .home-stat-card { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:18px; padding:16px 18px; } .home-stat-num { font-size:1.65rem; font-weight:800; display:flex; align-items:center; gap:8px; } .home-stat-icon { font-size:1.1rem; opacity:0.7; } .home-stat-label { font-size:0.82rem; font-weight:600; margin-top:4px; } .home-stat-sub { color:var(--muted); font-size:0.78rem; margin-top:2px; } .home-hero { background: linear-gradient(135deg, rgba(26,38,74,0.9) 0%, rgba(16,26,52,0.85) 100%); border:1px solid rgba(255,255,255,0.09); border-radius:22px; padding:28px 30px; } .home-eyebrow { color:var(--muted); font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px; } .home-headline { margin:0 0 14px; font-size:1.85rem; font-weight:800; line-height:1.22; } .home-sub { margin:0; color:#c0cadf; font-size:0.95rem; line-height:1.6; } .home-features { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:14px; } .home-feature-card { border-radius:20px; padding:18px 16px; display:flex; flex-direction:column; gap:12px; } .home-feature-icon { width:42px; height:42px; border-radius:14px; background:rgba(255,255,255,0.15); display:grid; place-items:center; font-size:20px; flex-shrink:0; } .home-feature-title { font-size:1rem; font-weight:700; margin-bottom:4px; } .home-feature-desc { font-size:0.84rem; color:rgba(255,255,255,0.82); line-height:1.5; margin-bottom:6px; } .home-feature-list { margin:0; padding-left:16px; font-size:0.82rem; color:rgba(255,255,255,0.7); line-height:1.7; } .home-feature-blue { background: linear-gradient(145deg, #1a56c4 0%, #0f3a8a 100%); border:1px solid rgba(100,160,255,0.2); } .home-feature-orange { background: linear-gradient(145deg, #c96b0f 0%, #8a3e00 100%); border:1px solid rgba(255,180,80,0.2); } .home-feature-green { background: linear-gradient(145deg, #0e9b6a 0%, #065c3e 100%); border:1px solid rgba(80,220,160,0.2); } .home-cta-row { display:flex; gap:14px; } .home-cta-guest { flex:1; padding:14px 20px; font-size:1rem; font-weight:700; background:linear-gradient(135deg,#1e6fb5,#0d3d6e); border:1px solid rgba(100,180,255,0.25); border-radius:14px; } .home-cta-guest:hover { background:linear-gradient(135deg,#2580d0,#104d8a); transform:translateY(-1px); } .home-cta-account { flex:1; padding:14px 20px; font-size:1rem; font-weight:700; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:14px; } .home-cta-account:hover { background:rgba(255,255,255,0.12); transform:translateY(-1px); } .home-cta-note { text-align:center; color:var(--muted); font-size:0.84rem; } .board-shell { border-radius: 26px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); padding: 20px; } .board-header { display:flex; align-items:flex-end; justify-content:space-between; gap: 16px; margin-bottom: 18px; } .board-actions { display:flex; gap:10px; flex-wrap:wrap; } .tile-board { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; grid-auto-flow: dense; } .tile-card { position:relative; border-radius: 28px; aspect-ratio: 1 / 1; min-height: 0; padding: 18px; overflow:hidden; border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, opacity .2s ease, filter .2s ease; display:flex; flex-direction:column; justify-content:space-between; outline: none; will-change: transform; } .tile-card:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 18px 55px rgba(0,0,0,0.28); } .tile-card:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,0.2), 0 0 0 6px rgba(111,227,181,0.3); } .tile-card.focus { grid-column: 1 / span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; } .tile-card.medium { min-height: 0; } .tile-card.small { min-height: 0; } .tile-card.dragging { opacity: 0.38; transform: scale(0.97); filter: saturate(0.8); } .tile-card.drop-target { box-shadow: 0 0 0 3px rgba(255,255,255,0.16), 0 0 0 7px rgba(111,227,181,0.22), 0 18px 55px rgba(0,0,0,0.35); transform: translateY(-4px) scale(1.015); } .tile-card.reordering { animation: tilePulse .34s ease; } .tile-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .tile-icon { width: 52px; height: 52px; border-radius: 18px; background: rgba(255,255,255,0.17); display:grid; place-items:center; font-size: 25px; } .tile-menu { background: rgba(255,255,255,0.14); border: 0; color: #fff; width: 34px; height: 34px; border-radius: 12px; } .tile-title { font-size: 1.35rem; font-weight: 700; margin: 12px 0 6px; } .tile-card.focus .tile-title { font-size: 2rem; } .tile-subtitle { color: rgba(255,255,255,0.86); font-size: 0.92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .tile-desc, .tile-meta, .muted { color: rgba(255,255,255,0.78); } .tile-support { color: rgba(255,255,255,0.82); font-size: 0.95rem; line-height: 1.45; } .tile-focus-extra { margin-top: 12px; display:grid; gap: 8px; } .tile-progress { margin-top: 14px; } .tile-status-line { display:flex; justify-content:space-between; align-items:center; gap: 10px; font-size: 0.82rem; color: rgba(255,255,255,0.85); margin-top: 10px; } .tile-actions { display:flex; justify-content:flex-end; margin-top: 12px; } .progress-bar { width:100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow:hidden; } .progress-bar > span { display:block; height:100%; border-radius:inherit; background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55)); } .tile-footer { display:flex; justify-content:space-between; align-items:center; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .badge { border-radius: 999px; padding: 7px 10px; background: rgba(17,23,41,0.24); border: 1px solid rgba(255,255,255,0.16); font-size: 0.82rem; } .tile-open-btn { color: inherit; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; } .tile-open-btn:hover { transform: translateY(-1px); background: rgba(17,23,41,0.34); border-color: rgba(255,255,255,0.24); } .tile-open-btn:focus-visible { outline: 2px solid rgba(111,227,181,0.45); outline-offset: 2px; } .focus-detail-layout { display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr); gap: 16px; } .focus-detail-card, .tile-editor-card { min-width: 0; } .editor-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 18px 0; } .section-card { padding: 22px; } .section-title-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 18px; } .section-title { font-size: 1.4rem; font-weight: 700; } .tile-menu:hover { background: rgba(255,255,255,0.28); } .tile-card.tile-editing { outline: 2px solid rgba(111,227,181,0.6); box-shadow: 0 0 0 4px rgba(111,227,181,0.12), 0 18px 55px rgba(0,0,0,0.28); } .check:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); } #tileSubpagePanel.section-card { padding: 0; overflow: hidden; } .task-view-header { border-radius: 22px 22px 0 0; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; } .task-view-back { display: flex; justify-content: space-between; align-items: center; } .task-back-btn { padding: 8px 16px; font-size: 0.88rem; } .task-view-hero { display: flex; align-items: center; gap: 14px; } .task-view-title { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1.1; } .task-view-sub { color: rgba(255,255,255,0.82); font-size: 0.92rem; margin-top: 4px; } .task-view-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } .task-stat { background: rgba(0,0,0,0.18); border-radius: 14px; padding: 12px 14px; } .task-stat-val { font-size: 1.35rem; font-weight: 700; color: #fff; line-height: 1; } .task-stat-lbl { font-size: 0.72rem; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 4px; } .task-stat-next .task-stat-val { font-size: 0.95rem; line-height: 1.3; } @media (max-width: 640px) { .task-view-stats { grid-template-columns: repeat(2, 1fr); } .task-view-title { font-size: 1.4rem; } } .icon-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; max-height:168px; overflow-y:auto; background:rgba(255,255,255,0.03); border-radius:10px; padding:6px; } .icon-opt { border:none; background:transparent; cursor:pointer; font-size:1.35rem; padding:3px; border-radius:7px; transition:background .13s,transform .13s; line-height:1; } .icon-opt:hover { background:rgba(255,255,255,0.12); transform:scale(1.18); } .icon-opt.active { background:rgba(111,227,181,0.22); outline:2px solid rgba(111,227,181,0.5); } .cog-btn { border: 0; border-radius: 14px; width: auto; height: 40px; padding: 0 16px; background: rgba(255,255,255,0.08); color: var(--text); cursor: pointer; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 4px; transition: background .18s, transform .18s; flex-shrink: 0; } .cog-btn:hover { background: rgba(224,124,26,0.18); transform: scale(1.04); } .config-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-start; justify-content: flex-end; background: rgba(5,8,20,0.62); backdrop-filter: blur(6px); padding: 24px; opacity: 0; transition: opacity .26s ease; } .config-overlay.config-visible { opacity: 1; } .config-overlay.hidden { display: none !important; } .config-panel { width: 420px; max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); overflow-y: auto; background: rgba(17,23,46,0.98); border: 1px solid rgba(255,255,255,0.10); border-radius: 28px; box-shadow: 0 32px 100px rgba(0,0,0,0.6); padding: 26px; display: flex; flex-direction: column; gap: 0; transform: translateX(32px); transition: transform .26s cubic-bezier(.22,1,.36,1); } .config-overlay.config-visible .config-panel { transform: translateX(0); } .config-panel-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .config-panel-title { font-size: 1.5rem; font-weight: 700; } .config-panel-sub { color: var(--muted); font-size: 0.82rem; margin-top: 4px; max-width: 300px; line-height: 1.4; } .config-close-btn { border: 0; border-radius: 12px; width: 36px; height: 36px; background: rgba(255,255,255,0.07); color: var(--text); cursor: pointer; font-size: 1rem; display: grid; place-items: center; flex-shrink: 0; transition: background .18s; } .config-close-btn:hover { background: rgba(249,115,115,0.22); color: #ffd0d0; } .config-section-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-bottom: 14px; } @media (max-width: 640px) { .config-panel { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; } .config-overlay { align-items: flex-end; padding: 0; } } .btn-icon { border: 0; border-radius: 10px; width: 30px; height: 30px; background: rgba(255,255,255,0.10); color: var(--text); cursor: pointer; display: inline-grid; place-items: center; font-size: 0.85rem; transition: background .18s ease, transform .18s ease; padding: 0; flex-shrink: 0; } .btn-icon:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); } .btn-icon-danger:hover { background: rgba(249,115,115,0.28); } .notice-error { background: rgba(249,115,115,0.10); border-color: rgba(249,115,115,0.32); color: #ffd0d0; } .recent-task-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 6px; overflow: hidden; } .recent-task-chip.done { opacity: 0.45; } .recent-task-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #76f2bc; } .recent-task-text { flex: 1; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .recent-task-tile { font-size: 0.75rem; color: var(--muted); white-space: nowrap; } .task-group-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; } .subtile-list { display:grid; gap: 12px; } .subtile-item { border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); border-radius: 18px; padding: 14px; display:grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items:flex-start; } .subtile-item.done { opacity: 0.68; } .check { width: 22px; height: 22px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.25); display:grid; place-items:center; cursor:pointer; margin-top:2px; } .check.done { background: rgba(111,227,181,0.22); border-color: rgba(111,227,181,0.8); } .subtile-title { font-weight: 600; margin-bottom: 6px; } .subtile-notes { color: var(--muted); font-size: 0.88rem; white-space: pre-wrap; margin-top: 2px; } .importance-bar { height: 5px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-top: 5px; overflow: hidden; } .importance-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--good), #4a9eff); transition: width 0.2s; } .notes-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .notes-item.done { opacity: 0.45; } .notes-item:last-child { border-bottom: none; } .notes-sort-bar { display: flex; gap: 4px; } .notes-sort-btn { padding: 5px 12px; font-size: 0.75rem; font-weight: 600; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .notes-sort-btn:hover { color: var(--text); background: rgba(255,255,255,0.08); } .notes-sort-btn.active { background: var(--good); color: #0a0f1d; border-color: var(--good); } .notes-importance-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); outline: none; margin-top: 8px; cursor: pointer; } .notes-importance-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 6px; border-radius: 0; background: transparent; cursor: grab; border: none; } .notes-importance-slider::-moz-range-thumb { width: 4px; height: 6px; border-radius: 0; background: transparent; cursor: grab; border: none; } .notes-importance-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--good), #4a9eff); background-size: var(--fill, 50%) 100%; background-repeat: no-repeat; } .notes-importance-slider::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); } .notes-importance-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--good), #4a9eff); } .rightbar { padding: 20px; position: sticky; top: 24px; } .event-card { padding: 20px; } .event-list { display:grid; gap: 10px; margin-bottom: 16px; } .event-chip { display:flex; gap:10px; align-items:flex-start; color: #d9e0f0; } .dot { width: 12px; height: 12px; border-radius:50%; margin-top: 5px; } .voice-box { border-radius: 18px; padding: 16px; background: linear-gradient(180deg, rgba(111,227,181,0.1), rgba(90,125,255,0.08)); border: 1px solid rgba(111,227,181,0.14); margin-bottom: 16px; } .voice-wave { height: 58px; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(111,227,181,0.1) 0 6px, transparent 6px 12px), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); margin: 10px 0 14px; position: relative; overflow: hidden; } .voice-wave::after { content:''; position:absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(111,227,181,0.35), transparent); animation: sweep 2.2s infinite; } @keyframes sweep { from { transform: translateX(-100%);} to { transform: translateX(100%);} } @keyframes tilePulse { 0% { transform: scale(0.985); } 60% { transform: scale(1.012); } 100% { transform: scale(1); } } .calendar-grid { display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 10px; } .calendar-head, .calendar-day { border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); padding: 10px; min-height: 96px; } .calendar-head { min-height: auto; text-align:center; color: var(--muted); font-size: 0.85rem; } .calendar-day.today { outline: 2px solid rgba(111,227,181,0.4); } .calendar-task { margin-top: 8px; font-size: 0.78rem; border-radius: 999px; padding: 5px 8px; background: rgba(111,227,181,0.12); color: #d6fff0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hidden { display:none !important; } .auth-state { color: var(--muted); font-size: 1.05rem; font-weight: 600; margin-bottom: 12px; } .associate-list { display:grid; gap:8px; } .associate-item { display:flex; flex-direction:column; gap:3px; border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); min-width:0; overflow:hidden; } .associate-row { display:flex; align-items:center; justify-content:space-between; gap:8px; } .associate-row span { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; } .associate-item .small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .notice { padding: 12px 14px; border-radius: 14px; background: rgba(111,227,181,0.08); border: 1px solid rgba(111,227,181,0.18); color: #d3ffef; margin-bottom: 12px; } .empty { color: var(--muted); padding: 16px 0; text-align:center; } .small { font-size: 0.82rem; } /* ── All Tasks Panel ── */ .all-tasks-group { margin-bottom: 20px; } .all-tasks-group-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,0.05); margin-bottom: 8px; } .all-tasks-group-icon { font-size: 1.2rem; } .all-tasks-group-name { font-weight: 700; font-size: 1rem; flex: 1; } .all-tasks-group-count { font-size: 0.8rem; color: var(--muted); background: rgba(255,255,255,0.07); border-radius: 20px; padding: 2px 10px; } .all-tasks-group-body { display: grid; gap: 8px; padding-left: 4px; } .all-tasks-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); transition: background 0.15s; } .all-tasks-actions { display: flex; gap: 6px; align-items: center; opacity: 0.55; transition: opacity 0.15s; } .all-tasks-row:hover .all-tasks-actions { opacity: 1; } .all-tasks-row:hover { background: rgba(255,255,255,0.06); } .all-tasks-row.done { opacity: 0.55; } .all-tasks-info { min-width: 0; } .all-tasks-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; } .all-tasks-name.done { text-decoration: line-through; color: var(--muted); } .all-tasks-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .all-tasks-due { font-size: 0.8rem; color: var(--muted); background: rgba(255,255,255,0.07); border-radius: 20px; padding: 2px 10px; white-space: nowrap; } .all-tasks-notes { font-size: 0.82rem; color: var(--muted); white-space: pre-wrap; } /* ── Chrono Alarm View ─────────────────────────────────────────────────────── */ .chrono-panel { padding: 0; overflow: hidden; display:flex; flex-direction:column; height:calc(100vh - 180px); min-height:520px; } .chrono-toolbar { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); gap:8px; flex-wrap:wrap; } .chrono-nav { display:flex; align-items:center; gap:10px; } .chrono-nav-btn { background:rgba(255,255,255,0.06); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:5px 12px; cursor:pointer; font-size:1rem; transition:background 0.15s; } .chrono-nav-btn:hover:not(:disabled) { background:rgba(255,255,255,0.1); } .chrono-nav-btn:disabled { opacity:0.25; cursor:not-allowed; } .chrono-date-range { font-size:0.82rem; color:var(--muted); min-width:160px; text-align:center; } .chrono-week-toggle { font-size:0.72rem; color:var(--muted); cursor:pointer; border:1px solid var(--line); background:transparent; border-radius:6px; padding:3px 9px; white-space:nowrap; transition:color 0.15s,border-color 0.15s; } .chrono-week-toggle:hover { color:var(--text); border-color:rgba(255,255,255,0.3); } .chrono-scroll { overflow-y:auto; overflow-x:auto; flex:1; } .chrono-header-row { display:grid; grid-template-columns:44px repeat(7,minmax(72px,1fr)); position:sticky; top:0; z-index:10; background:var(--panel); border-bottom:1px solid var(--line); min-width:548px; } .chrono-day-hdr { padding:8px 4px; text-align:center; border-right:1px solid rgba(255,255,255,0.07); } .chrono-day-hdr:last-child { border-right:none; } .chrono-day-hdr-name { display:block; font-weight:700; font-size:0.78rem; } .chrono-day-hdr-date { display:block; font-size:0.67rem; color:var(--muted); } .chrono-day-hdr.is-today { background:rgba(111,227,181,0.07); } .chrono-day-hdr.is-today .chrono-day-hdr-name { color:var(--good); } .chrono-day-hdr.is-past .chrono-day-hdr-name { color:var(--muted); } .chrono-grid-body { display:flex; min-width:548px; } .chrono-time-col { width:44px; flex-shrink:0; background:rgba(0,0,0,0.15); } .chrono-time-label { height:60px; display:flex; align-items:flex-start; justify-content:flex-end; padding:4px 7px 0 0; font-size:0.65rem; color:rgba(255,255,255,0.45); box-sizing:border-box; border-right:1px solid rgba(255,255,255,0.1); border-bottom:1px solid rgba(255,255,255,0.06); } .chrono-days-area { flex:1; display:grid; grid-template-columns:repeat(7,minmax(72px,1fr)); } .chrono-day-col { position:relative; border-right:1px solid rgba(255,255,255,0.07); } .chrono-day-col:last-child { border-right:none; } .chrono-day-col.today-col { background:rgba(111,227,181,0.04); } .chrono-day-col.past-day { opacity:0.4; pointer-events:none; } .chrono-hour-row { height:60px; border-bottom:1px solid rgba(255,255,255,0.07); cursor:pointer; box-sizing:border-box; transition:background 0.1s; } .chrono-hour-row.hour-even { background:rgba(255,255,255,0.015); } .chrono-hour-row:hover { background:rgba(255,255,255,0.025); } .chrono-alarm-block { position:absolute; left:3px; right:3px; border-radius:7px; padding:3px 6px; font-size:0.7rem; cursor:pointer; overflow:hidden; box-sizing:border-box; z-index:2; transition:filter 0.15s; } .chrono-alarm-block:hover { filter:brightness(1.2); } .chrono-alarm-block[draggable="true"] { cursor:grab; } .chrono-alarm-block[draggable="true"]:active { cursor:grabbing; } .chrono-alarm-block.dragging { opacity:0.35; } .chrono-day-col.chrono-drop-target { background:rgba(111,227,181,0.12); } .chrono-alarm-block.skipped { opacity:0.28; text-decoration:line-through; } .chrono-alarm-label { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; } .chrono-alarm-time { opacity:0.72; font-size:0.62rem; line-height:1.2; } /* Day-of-week pill selector in alarm editor */ .day-pills { display:flex; gap:6px; flex-wrap:wrap; } .day-pill { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; font-size:0.74rem; font-weight:600; transition:all 0.15s; display:flex; align-items:center; justify-content:center; } .day-pill:hover { background:rgba(255,255,255,0.08); } .day-pill.selected { background:var(--good); color:#0a0f1d; border-color:var(--good); } .once-checkbox-label { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--text); cursor:pointer; margin-bottom:8px; } .once-checkbox-label input[type="checkbox"] { width:16px; height:16px; margin:0; cursor:pointer; } .recurrence-toggle { display:flex; gap:6px; padding:4px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; } .rec-toggle-btn { flex:1; padding:8px 10px; font-size:0.85rem; font-weight:600; background:transparent; color:var(--muted); border:none; border-radius:7px; cursor:pointer; transition:background 0.15s, color 0.15s; } .rec-toggle-btn:hover { color:var(--text); } .rec-toggle-btn.selected { background:var(--good); color:#0a0f1d; } /* Alarm colors — matching OtterTile dark palette */ .ac-default { background:rgba(111,227,181,0.2); border-left:3px solid rgba(111,227,181,0.8); } .ac-red { background:rgba(239,68,68,0.2); border-left:3px solid #ef4444; } .ac-orange { background:rgba(249,115,22,0.2); border-left:3px solid #f97316; } .ac-yellow { background:rgba(234,179,8,0.2); border-left:3px solid #eab308; } .ac-green { background:rgba(34,197,94,0.2); border-left:3px solid #22c55e; } .ac-teal { background:rgba(20,184,166,0.2); border-left:3px solid #14b8a6; } .ac-blue { background:rgba(59,130,246,0.2); border-left:3px solid #3b82f6; } .ac-purple { background:rgba(168,85,247,0.2); border-left:3px solid #a855f7; } .ac-pink { background:rgba(236,72,153,0.2); border-left:3px solid #ec4899; } /* Alarm editor (right column) */ .chrono-editor { padding:18px 20px; display:flex; flex-direction:column; gap:12px; } .chrono-editor-title { font-size:1.35rem; font-weight:700; margin-bottom:8px; } .color-picker { display:flex; gap:7px; flex-wrap:wrap; } .color-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:border-color 0.15s, transform 0.1s; flex-shrink:0; } .color-swatch:hover { transform:scale(1.12); } .color-swatch.selected { border-color:var(--text); } .cs-default { background:rgba(111,227,181,0.85); } .cs-red { background:#ef4444; } .cs-orange { background:#f97316; } .cs-yellow { background:#eab308; } .cs-green { background:#22c55e; } .cs-teal { background:#14b8a6; } .cs-blue { background:#3b82f6; } .cs-purple { background:#a855f7; } .cs-pink { background:#ec4899; } /* Settings/Reminder panel hints */ .config-section-hint { font-size:0.72rem; color:var(--muted); line-height:1.5; margin:-4px 0 10px; opacity:0.7; } .field-hint { font-size:0.68rem; color:var(--muted); line-height:1.5; margin-top:4px; opacity:0.7; } .field-hint code { background:rgba(255,255,255,0.06); padding:1px 5px; border-radius:4px; font-size:0.66rem; } /* ── AI Assistant ── */ .ai-msg { margin-bottom:10px; font-size:0.85rem; line-height:1.5; } .ai-msg-user { background:rgba(111,227,181,0.08); border:1px solid rgba(111,227,181,0.15); border-radius:14px 14px 4px 14px; padding:8px 12px; color:#d3ffef; } .ai-msg-bot { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:14px 14px 14px 4px; padding:8px 12px; } .ai-msg-summary { font-weight:600; margin-bottom:6px; } .ai-suggestion { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:12px; margin-top:8px; } .ai-suggestion-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .ai-suggestion-type { font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:2px 8px; border-radius:6px; } .ai-suggestion-type.task { background:rgba(59,130,246,0.2); color:#93c5fd; } .ai-suggestion-type.alarm { background:rgba(234,179,8,0.2); color:#fde68a; } .ai-suggestion-title { font-weight:600; flex:1; } .ai-suggestion-detail { font-size:0.8rem; color:var(--muted); margin-bottom:8px; } .ai-suggestion-actions { display:flex; gap:6px; } .ai-suggestion-actions .btn { padding:6px 14px; font-size:0.8rem; } .ai-loading { display:flex; align-items:center; gap:8px; padding:10px 0; color:var(--muted); font-size:0.85rem; } .ai-loading-dot { width:6px; height:6px; border-radius:50%; background:var(--good); animation:aiPulse 1s infinite; } .ai-loading-dot:nth-child(2) { animation-delay:0.2s; } .ai-loading-dot:nth-child(3) { animation-delay:0.4s; } @keyframes aiPulse { 0%,100% { opacity:0.3; } 50% { opacity:1; } } /* SMS consent block (in Settings, under phone field) */ .sms-consent { margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); font-size:0.72rem; line-height:1.55; color:var(--muted); } .sms-consent strong { color:var(--text); } .sms-consent a { color:var(--text); text-decoration:underline; } .sms-consent label { display:flex; gap:10px; align-items:flex-start; cursor:pointer; width:100%; box-sizing:border-box; } .sms-consent label > span { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; word-break:break-word; } /* Override .field input (width:100%, padding, border, bg) for the consent checkbox */ .sms-consent input[type="checkbox"] { flex:0 0 auto; width:16px; height:16px; padding:0; margin:3px 0 0; border:0; background:transparent; border-radius:0; box-shadow:none; } .field .sms-consent input[type="checkbox"] { width:16px; padding:0; border:0; background:transparent; } html[data-theme="light"] .sms-consent { background:rgba(15,23,42,0.04); border-color:rgba(15,23,42,0.12); } /* Public landing page SMS disclosure */ .home-sms-disclosure { margin-top:28px; padding:18px 22px; border-radius:18px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); font-size:0.82rem; line-height:1.6; color:var(--muted); max-width:720px; } .home-sms-disclosure-title { font-size:0.92rem; font-weight:700; color:var(--text); margin-bottom:10px; } .home-sms-disclosure p { margin:0 0 8px; } .home-sms-disclosure p:last-child { margin-bottom:0; } .home-sms-disclosure strong { color:var(--text); } .home-sms-disclosure a { color:var(--text); text-decoration:underline; } html[data-theme="light"] .home-sms-disclosure { background:rgba(15,23,42,0.04); border-color:rgba(15,23,42,0.10); } /* Site footer */ .site-footer { max-width:1280px; margin:32px auto 24px; padding:20px 28px; border-top:1px solid var(--line); text-align:center; } .site-footer-business { font-size:0.72rem; line-height:1.6; color:var(--muted); margin-bottom:8px; } .site-footer-business a { color:var(--muted); text-decoration:none; } .site-footer-business a:hover { color:var(--text); text-decoration:underline; } .site-footer-notice { font-size:0.7rem; line-height:1.6; color:var(--muted); max-width:680px; margin:0 auto 10px; opacity:0.7; } .site-footer-links { display:flex; justify-content:center; align-items:center; gap:8px; font-size:0.72rem; } .site-footer-links a { color:var(--muted); text-decoration:none; transition:color 0.15s; } .site-footer-links a:hover { color:var(--text); text-decoration:underline; } .site-footer-sep { color:rgba(255,255,255,0.2); } /* Legal pages */ .legal-page { max-width:720px; margin:40px auto 60px; padding:0 28px; } .legal-page h1 { font-size:1.5rem; font-weight:700; margin-bottom:6px; } .legal-page .legal-effective { font-size:0.78rem; color:var(--muted); margin-bottom:28px; } .legal-page h2 { font-size:1rem; font-weight:700; margin-top:28px; margin-bottom:8px; } .legal-page p, .legal-page li { font-size:0.85rem; line-height:1.7; color:var(--muted); } .legal-page ul { padding-left:20px; margin:8px 0; } .legal-page a { color:var(--good); text-decoration:none; } .legal-page a:hover { text-decoration:underline; } .legal-back { display:inline-block; margin-bottom:24px; font-size:0.82rem; color:var(--muted); text-decoration:none; } .legal-back:hover { color:var(--text); } .legal-business-id { margin-top:36px; padding:14px 0 0; font-size:0.78rem; color:var(--muted); line-height:1.6; } .legal-business-id a { color:var(--muted); text-decoration:none; } .legal-business-id a:hover { color:var(--text); text-decoration:underline; } .legal-footer { margin-top:12px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); font-size:0.78rem; color:var(--muted); } .legal-footer a { color:var(--muted); text-decoration:none; } .legal-footer a:hover { color:var(--text); text-decoration:underline; } html[data-theme="light"] .legal-footer { border-color:rgba(15,23,42,0.10); } .optin-notice { margin:18px 0 24px; padding:14px 18px; border-radius:12px; background:rgba(74,222,128,0.08); border:1px solid rgba(74,222,128,0.2); font-size:0.82rem; line-height:1.6; color:var(--text); } .optin-step-box { margin:12px 0 18px; padding:14px 18px; border-radius:10px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.10); font-size:0.82rem; line-height:1.6; } .optin-step-box ul { padding-left:18px; margin:6px 0; } .optin-step-label { font-weight:600; color:var(--text); margin-bottom:6px; } .optin-step-note { margin-top:8px; font-size:0.78rem; color:var(--muted); font-style:italic; } .optin-consent-replica { background:rgba(255,255,255,0.02); border:2px solid rgba(255,255,255,0.15); } .optin-audit-table { width:100%; border-collapse:collapse; margin:12px 0 18px; font-size:0.82rem; } .optin-audit-table th, .optin-audit-table td { padding:8px 12px; text-align:left; border:1px solid rgba(255,255,255,0.10); } .optin-audit-table th { background:rgba(255,255,255,0.04); font-weight:600; color:var(--text); } .optin-audit-table td { color:var(--muted); } html[data-theme="light"] .optin-notice { background:rgba(22,163,74,0.06); border-color:rgba(22,163,74,0.15); } html[data-theme="light"] .optin-step-box { background:rgba(15,23,42,0.03); border-color:rgba(15,23,42,0.10); } html[data-theme="light"] .optin-consent-replica { border-color:rgba(15,23,42,0.15); } html[data-theme="light"] .optin-audit-table th { background:rgba(15,23,42,0.04); } html[data-theme="light"] .optin-audit-table th, html[data-theme="light"] .optin-audit-table td { border-color:rgba(15,23,42,0.10); } @media (max-width: 1220px) { .app-shell { grid-template-columns: 280px 1fr; } .rightbar { grid-column: span 2; position: static; } .focus-detail-layout { grid-template-columns: 1fr; } } /* ── Mobile top bar (hidden on desktop) ── */ .mobile-topbar { display:none; } .mobile-overlay { display:none; } /* ── Tablet: 2-col collapses to single ── */ @media (max-width: 900px) { body { padding: 14px; } .app-shell { grid-template-columns: 1fr; } .sidebar, .rightbar { position: static; } .tile-board, .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile-card.focus { grid-column: span 2; grid-row: span 1; aspect-ratio: 2 / 1; } .board-header { flex-direction: column; align-items: stretch; } } /* ── Mobile: full responsive layout ── */ @media (max-width: 640px) { /* Show mobile top bar */ .mobile-topbar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 900; background: rgba(10, 15, 29, 0.95); backdrop-filter: blur(12px); padding: 10px 16px; border-bottom: 1px solid var(--line); } .mobile-hamburger, .mobile-panel-btn { border: none; background: rgba(255,255,255,0.08); color: var(--text); width: 40px; height: 40px; border-radius: 12px; font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; transition: background 0.15s; } .mobile-hamburger:hover, .mobile-panel-btn:hover { background: rgba(255,255,255,0.14); } .mobile-brand { font-size: 1.2rem; font-weight: 700; } .mobile-brand .brand-otter { color: #3a9ee8; } .mobile-overlay { display: none; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); } .mobile-overlay.active { display: block; } /* Body adjustments */ body { padding: 0; padding-bottom: 20px; } .app-shell { padding: 12px; gap: 12px; } /* Sidebar: hidden by default, slide-in drawer on mobile */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 85vw; z-index: 1000; overflow-y: auto; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 0 24px 24px 0; } .sidebar.mobile-open { transform: translateX(0); } /* Rightbar: hidden by default, slide-in from right */ .rightbar { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 90vw; z-index: 1000; overflow-y: auto; transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 24px 0 0 24px; } .rightbar.mobile-open { transform: translateX(0); } /* Center stage fills width */ .center-stage { min-width: 0; } /* Topbar: horizontal scroll for action pills */ .topbar { flex-direction: row; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding-bottom: 4px; } .action-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 4px; } .action-bar::-webkit-scrollbar { display: none; } .pill { white-space: nowrap; padding: 8px 12px; font-size: 0.85rem; flex-shrink: 0; } /* Tiles: single column */ .tile-board, .summary-strip { grid-template-columns: 1fr; } .tile-card, .tile-card.focus { grid-column: span 1; grid-row: span 1; aspect-ratio: auto; min-height: 140px; } .tile-title { font-size: 1.15rem; } .tile-icon { width: 42px; height: 42px; font-size: 20px; } /* Summary cards: 2-col on mobile */ .summary-strip { grid-template-columns: repeat(2, 1fr); } /* Calendar: single column */ .calendar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } /* Chrono: fit on mobile portrait without horizontal scroll */ .chrono-panel { height: calc(100vh - 120px); min-height: 400px; } .chrono-scroll { overflow-x: hidden; } .chrono-toolbar { padding: 8px 10px; gap: 4px; flex-wrap: nowrap; } .chrono-toolbar .btn-ghost { font-size: 0.72rem; padding: 5px 8px; } .chrono-date-range { font-size: 0.68rem; min-width: 70px; } .chrono-header-row { grid-template-columns: 30px repeat(7, 1fr); min-width: 0; } .chrono-grid-body { min-width: 0; } .chrono-time-col { width: 30px; } .chrono-time-label { font-size: 0.52rem; padding: 2px 2px 0 0; } .chrono-days-area { grid-template-columns: repeat(7, 1fr); } .chrono-alarm-block { font-size: 0.58rem; padding: 2px 2px; left: 1px; right: 1px; border-radius: 4px; } .chrono-alarm-label { font-size: 0.55rem; } .chrono-alarm-time { font-size: 0.48rem; } .chrono-day-hdr { padding: 6px 2px; } .chrono-day-hdr-name { font-size: 0.6rem; } .chrono-day-hdr-date { font-size: 0.48rem; } .chrono-nav-btn { padding: 4px 8px; font-size: 0.85rem; } .chrono-week-toggle { font-size: 0.62rem; padding: 2px 5px; } /* Focus detail: single column */ .focus-detail-layout { grid-template-columns: 1fr; } /* Task view stats: 2-col on mobile */ .task-view-stats { grid-template-columns: repeat(2, 1fr); } .task-view-title { font-size: 1.4rem; } /* Config panel: full-width bottom sheet */ .config-panel { width: 100%; max-width: 100%; border-radius: 24px 24px 0 0; } .config-overlay { align-items: flex-end; padding: 0; } /* Home landing: adjust for mobile */ .home-stats-row { grid-template-columns: 1fr; } .home-features { grid-template-columns: 1fr; } .home-headline { font-size: 1.4rem; } .home-hero { padding: 20px; } .home-cta-row { flex-direction: column; } /* Footer */ .site-footer { margin: 20px auto 12px; padding: 14px 16px; } }