/* ---------- Design tokens ---------- */ :root { --bg: #0b0d0c; /* RGB triplet (no rgb() wrapper) so it can be composed into rgba()/ color-mix() at different opacities below. Defaults to brand green; spotify-panel.js overwrites this on from the current track's album art, and removes the override (falling back to this default) when nothing is playing — see "no music -> green" behavior. */ --dynamic-color: 29, 185, 84; --panel-bg: rgba(24, 26, 25, 0.65); --panel-border: rgba(255, 255, 255, 0.08); --panel-border-hover: rgba(29, 185, 84, 0.35); --text: #f2f5f3; --text-dim: #a3aba6; --text-faint: #6b7570; --accent: #1db954; --accent-hover: #22e065; --accent-dim: #1db95422; --accent-soft: #7fcf9f; --danger: #ff5c5c; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 8px; --shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); font-size: 16px; } * { box-sizing: border-box; } /* Generic show/hide utility — used to toggle between connect/now-playing, * the notes-fab vs overlay content, the playlist browser, etc. */ .hidden { display: none !important; } html, body { height: 100%; } body { margin: 0; font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--text); /* Ambient background tinted from the current track's album art (green when nothing's playing — see --dynamic-color above) — same idea as Spotify's own now-playing background glow. Transitions smoothly between tracks instead of snapping. */ background: radial-gradient(circle at 15% 10%, rgba(var(--dynamic-color), 0.22), transparent 40%), radial-gradient(circle at 85% 90%, rgba(var(--dynamic-color), 0.14), transparent 45%), var(--bg); transition: background 900ms ease; /* A fixed-height, non-scrolling page: on a normal screen, everything — Spotify/lyrics, timer, dashboard, tasks — fits in one view, sized off each other proportionally. Any panel whose content genuinely doesn't fit falls back to its own internal scrollbar (set up elsewhere) rather than growing the page. */ height: 100vh; overflow: hidden; display: flex; flex-direction: column; } button, input { font-family: inherit; color: inherit; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: rgba(29, 185, 84, 0.4); } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.6rem 0.3rem; flex-shrink: 0; } .topbar .logo-mark { width: 26px; height: 26px; color: var(--accent); } .topbar h1 { font-size: 1.15rem; font-weight: 600; margin: 0; letter-spacing: 0.2px; } .topbar .tagline { color: var(--text-faint); font-size: 0.85rem; margin-left: 0.35rem; } .topbar-clock { margin-left: auto; font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-dim); } .topbar .topbar-icon-btn { width: 32px; height: 32px; background: transparent; border-color: transparent; color: var(--text-dim); } .topbar .topbar-icon-btn svg { width: 18px; height: 18px; display: block; } .topbar .topbar-icon-btn:hover { color: var(--accent); border-color: var(--accent); } .topbar .topbar-icon-btn.is-fullscreen { color: var(--accent); } /* ---------- Grid layout ---------- */ .app-grid { flex: 1; /* Without this, a flex item's default min-height is its content's natural size, not 0 — so a tall inner box (e.g. many lyric lines) would push .app-grid (and the whole page) taller instead of scrolling inside its own box, forcing the whole page to scroll and the other panels out of view. */ min-height: 0; display: grid; grid-template-columns: 1fr 1fr; /* Equal-ratio rows: both rows always split the available height exactly 50/50, so the four panels stay proportional to each other and to the screen instead of any one of them dictating the page's size. */ grid-template-rows: 1fr 1fr; gap: 0.9rem; padding: 0.7rem 1.4rem 1rem; /* No max-width — the grid fills the actual page width on any screen instead of capping out and leaving empty space on the sides. */ width: 100%; } .panel { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 1.1rem; display: flex; flex-direction: column; /* No min-height floor — each panel takes exactly its 1fr grid share, so all four fit the screen at their real proportions instead of a floor value forcing the grid (and page) taller than the viewport. */ min-height: 0; transition: border-color var(--transition); /* Safety net: if a panel's content ever genuinely doesn't fit (unusually long task list, huge lyrics, short viewport), it scrolls internally instead of clipping or pushing the whole page taller. overflow-x stays hidden so this never introduces a horizontal scrollbar. */ overflow-y: auto; overflow-x: hidden; } .panel:hover { border-color: var(--panel-border-hover); } .panel h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-faint); margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .panel h2 svg { width: 15px; height: 15px; } /* ---------- Buttons / inputs ---------- */ .btn { border: 1px solid var(--panel-border); background: rgba(255, 255, 255, 0.04); color: var(--text); border-radius: var(--radius-sm); padding: 0.55rem 1rem; font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition); } .btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #06210f; font-weight: 700; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .btn-danger:hover { border-color: var(--danger); color: var(--danger); } input[type="text"], input[type="number"], input[type="date"], textarea { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; color: var(--text); font-size: 0.88rem; outline: none; transition: border-color var(--transition); } input:focus, textarea:focus { border-color: var(--accent); } /* ---------- Spotify panel ---------- */ .spotify-connect { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .spotify-connect p { color: var(--text-dim); font-size: 0.85rem; max-width: 240px; } .spotify-connect .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; } .now-playing { display: flex; flex-direction: column; gap: 0.9rem; flex: 1; min-height: 0; } .np-track { display: flex; align-items: center; gap: 0.9rem; } .np-art { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; background: rgba(255, 255, 255, 0.06); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); } .np-art svg { width: 24px; height: 24px; } .np-meta { min-width: 0; } .np-title { font-weight: 600; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np-artist { color: var(--text-dim); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Playback timeline — click or drag to seek forward/backward */ .np-timeline { display: flex; align-items: center; gap: 0.5rem; } .np-time { font-size: 0.7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; width: 32px; flex-shrink: 0; } .np-time:last-child { text-align: right; } .np-progress-track { position: relative; flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; } .np-progress-track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); } .np-progress-fill { position: absolute; left: 0; height: 4px; width: 0%; border-radius: 999px; background: var(--accent); pointer-events: none; } .np-progress-handle { position: absolute; left: 0%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.2); transform: translateX(-50%); transition: transform 120ms ease; pointer-events: none; } .np-progress-track:hover .np-progress-handle, .np-progress-track.dragging .np-progress-handle { transform: translateX(-50%) scale(1.25); } .np-progress-track:not(.seekable) { cursor: default; opacity: 0.5; } .np-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } .lyrics-box { flex: 1; min-height: 0; overflow-y: auto; background: rgba(0, 0, 0, 0.22); border-radius: var(--radius-md); padding: 1rem; font-size: 1.05rem; line-height: 1.7; color: var(--text-dim); white-space: pre-wrap; } .lyrics-empty { margin: auto; text-align: center; color: var(--text-faint); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .lyrics-empty svg { width: 34px; height: 34px; opacity: 0.6; } .lyrics-empty-photo .lyrics-fallback-art { width: 140px; height: 140px; border-radius: var(--radius-md); object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } /* Karaoke-style synced lyrics — only the current WORD is highlighted, not * the whole line as a solid block. The current line is just slightly * brighter than the rest, for context. */ .lyrics-box.lyrics-synced { display: flex; flex-direction: column; gap: 0.6rem; scroll-behavior: smooth; } .lyrics-box.lyrics-synced .lyric-line { /* Lighter than before so the surrounding words are actually readable — only the active word needs to stand out, not the rest of the line. */ color: var(--text-dim); transition: color var(--transition); font-size: 1.05rem; cursor: pointer; border-radius: var(--radius-sm); padding: 0.15rem 0.3rem; margin: 0 -0.3rem; } .lyrics-box.lyrics-synced .lyric-line:hover { background: rgba(255, 255, 255, 0.05); } .lyrics-box.lyrics-synced .lyric-line.current-line { /* A soft, pale tint of the album-art color (or green) — visible against the faint other lines, but deliberately muted so the active word below still clearly stands out as the brighter one. */ color: color-mix(in srgb, rgb(var(--dynamic-color)) 45%, white); } .lyrics-box.lyrics-synced .lyric-word { transition: color 320ms ease, text-shadow 320ms ease; } .lyrics-box.lyrics-synced .lyric-word.sung { /* Words already passed within the current line — brighter/whiter than the not-yet-reached rest of the line, but a step below the actively glowing word. Progressively fills the line as playback continues, instead of only ever lighting up one word at a time. */ color: color-mix(in srgb, var(--text) 65%, rgb(var(--dynamic-color)) 35%); } .lyrics-box.lyrics-synced .lyric-word.active-word { /* Brighter than the line on purpose — near-white core color plus a glow in the same hue, so the current word is unmistakable at a glance instead of blending into the line around it. No font-weight change: many fonts (Arabic scripts especially) don't have a true bold cut, so the browser silently swaps in a different font file for the heavier weight, making the word look like mismatched typography instead of just "emphasized". Color + glow is enough. */ color: color-mix(in srgb, rgb(var(--dynamic-color)) 80%, white); text-shadow: 0 0 12px rgba(var(--dynamic-color), 0.7); } /* Playlist browser (in-panel, replaces now-playing/lyrics while open) */ .spotify-browser { flex: 1; min-height: 0; display: flex; flex-direction: column; } .browser-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; } .browser-header #browser-title { flex: 1; font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Current-lyric strip — the real track display/timeline/controls stay * visible above the browser at all times, so this only needs to cover * what's actually hidden while browsing: the lyrics box itself. */ .browser-now-playing { background: rgba(29, 185, 84, 0.08); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; margin-bottom: 0.6rem; flex-shrink: 0; } .bnp-lyric { font-size: 0.78rem; color: var(--accent-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bnp-lyric.bnp-no-lyrics { color: var(--text-faint); font-style: italic; } .browser-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.35rem; } .browser-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; } .browser-item:hover { background: rgba(255, 255, 255, 0.06); } .browser-item.playing { background: var(--accent-dim); border: 1px solid var(--panel-border-hover); } .browser-item.playing .bi-title { color: var(--accent); } .browser-item img, .browser-item-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: rgba(255, 255, 255, 0.05); } .browser-item-icon svg { width: 18px; height: 18px; } .bi-title { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bi-sub { font-size: 0.72rem; color: var(--text-faint); } .browser-loading { color: var(--text-faint); font-size: 0.82rem; padding: 0.5rem; } .embed-warning { margin-top: 0.6rem; padding: 0.5rem 0.7rem; background: rgba(255, 193, 7, 0.08); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: var(--radius-sm); color: #e8c467; font-size: 0.74rem; line-height: 1.4; } /* ---------- Timer panel ---------- */ .timer-panel { align-items: center; text-align: center; /* NOT justify-content: center — if this content ever slightly overflows, centering makes the overflow symmetric on both ends, and scrollTop can't go negative, so the top portion becomes permanently unreachable by scrolling. Keeping flex-start guarantees everything stays reachable via the panel's own scroll if it doesn't quite fit. */ gap: 0.3rem; } .preset-row { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .preset-row .btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); } .custom-duration { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.2rem; } .custom-duration input { width: 70px; text-align: center; } .timer-ring-wrap { position: relative; /* Scales with the panel's actual height instead of a fixed 200px, so it never forces the timer panel taller than its share of the screen on shorter/smaller displays. */ width: clamp(80px, 13vh, 200px); height: clamp(80px, 13vh, 200px); margin: 0.2rem 0; flex-shrink: 0; } .timer-ring-wrap svg { transform: rotate(-90deg); width: 100%; height: 100%; } .timer-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 8; } .timer-ring-progress { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; } .timer-display { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .timer-time { font-size: clamp(1rem, 3vh, 2.4rem); font-weight: 700; font-variant-numeric: tabular-nums; } .timer-phase { color: var(--text-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 0.15rem; } .timer-phase.break { color: var(--accent); } .timer-controls { display: flex; gap: 0.6rem; } .timer-cycles { color: var(--text-faint); font-size: 0.78rem; margin-top: 0.2rem; } .timer-linked-task { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.3rem; } /* ---------- Task manager ---------- */ .task-add-form { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; } .task-add-form input[type="text"] { flex: 1; min-width: 120px; } .task-add-form input[type="number"] { width: 70px; } /* Calendar-popup date picker (used for both the task date field and, * with the same markup pattern, could back any other date field later) */ .date-field-wrap { position: relative; } .date-popup { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 240px; background: #141615; border: 1px solid var(--panel-border); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 0.7rem; } .date-popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; } .date-popup-header span { font-size: 0.8rem; font-weight: 600; } .date-popup .calendar-grid { grid-auto-rows: 30px; } .date-popup-clear { width: 100%; margin-top: 0.5rem; font-size: 0.78rem; } .task-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; } .task-item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; } .task-row { display: flex; align-items: center; gap: 0.55rem; } .task-title { flex: 1; min-width: 0; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .task-title.done { text-decoration: line-through; color: var(--text-faint); } .task-time { font-size: 0.78rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .status-badge { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--text-faint); white-space: nowrap; } .status-badge.in_progress { color: var(--accent); border-color: var(--accent); } .status-badge.done { color: var(--text-dim); background: rgba(255, 255, 255, 0.06); } .task-actions { display: flex; gap: 0.3rem; } .task-actions .btn { padding: 0.35rem 0.6rem; font-size: 0.76rem; } .subtask-list { list-style: none; margin: 0.5rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--panel-border); display: flex; flex-direction: column; gap: 0.4rem; } .add-subtask-row { display: flex; gap: 0.35rem; margin-top: 0.45rem; } .add-subtask-row input { flex: 1; font-size: 0.8rem; padding: 0.35rem 0.55rem; } /* ---------- Dashboard ---------- */ .dashboard-stats { display: flex; gap: 0.6rem; margin-bottom: 0.7rem; flex-shrink: 0; } .stat-card { flex: 1; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--panel-border); border-radius: var(--radius-md); padding: 0.5rem 0.7rem; } .stat-value { font-size: 1.15rem; font-weight: 700; } .stat-label { color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; } .calendar { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; flex-shrink: 0; } .calendar-header .month-label { font-size: 0.85rem; font-weight: 600; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); /* A fixed, screen-scaled row height (not aspect-ratio: 1) — the grid can be much wider than it is tall in this 2-column layout, and matching cell height to that width would make the whole calendar taller than its share of the screen. */ grid-auto-rows: clamp(14px, 2.7vh, 34px); gap: 3px; font-size: 0.72rem; flex-shrink: 0; } .calendar-grid .dow { color: var(--text-faint); text-align: center; padding-bottom: 0.2rem; } .calendar-day { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); cursor: pointer; position: relative; color: var(--text-dim); background: rgba(255, 255, 255, 0.02); transition: background var(--transition); } .calendar-day:hover { background: rgba(255, 255, 255, 0.07); } .calendar-day.empty { cursor: default; background: transparent; } .calendar-day.today { border: 1px solid var(--accent); } .calendar-day.selected { background: var(--accent); color: #06210f; font-weight: 700; } .calendar-day .dot { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .calendar-day.selected .dot { background: #06210f; } .day-detail { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--panel-border); font-size: 0.8rem; color: var(--text-dim); overflow-y: auto; } .day-detail .day-detail-title { font-weight: 600; color: var(--text); margin-bottom: 0.35rem; } .day-detail ul { margin: 0; padding-left: 1.1rem; } /* ---------- Notes ---------- */ .notes-fab { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.15rem; border-radius: 999px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .overlay { position: fixed; inset: 0; background: rgba(4, 5, 5, 0.72); backdrop-filter: blur(6px); z-index: 50; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity var(--transition); } .overlay.hidden { /* Override the generic .hidden (display:none) — this needs to stay visible-but-transparent so the opacity transition can animate. */ display: flex !important; opacity: 0; pointer-events: none; } .notes-window { width: min(920px, 92vw); height: min(620px, 86vh); background: #141615; border: 1px solid var(--panel-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); display: grid; grid-template-columns: 220px 1fr; overflow: hidden; } .notes-sidebar { background: rgba(0, 0, 0, 0.25); border-right: 1px solid var(--panel-border); display: flex; flex-direction: column; min-height: 0; } .notes-sidebar-header { padding: 0.9rem 0.9rem 0.6rem; display: flex; align-items: center; justify-content: space-between; } .notes-sidebar-header span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-faint); } .notes-folder-row { display: flex; gap: 0.35rem; padding: 0 0.9rem 0.6rem; } .notes-folder-row select { flex: 1; min-width: 0; background: rgba(0, 0, 0, 0.28); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); padding: 0.35rem 0.5rem; color: var(--text); font-size: 0.78rem; } .notes-folder-row .btn-icon { width: 32px; height: 32px; font-size: 0.7rem; } .notes-file-item .nfi-folder-tag { font-size: 0.66rem; color: var(--text-faint); margin-left: 0.3rem; } .notes-file-list { list-style: none; margin: 0; padding: 0 0.5rem 0.9rem; overflow-y: auto; flex: 1; } .notes-file-item { padding: 0.5rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .notes-file-item:hover { background: rgba(255, 255, 255, 0.05); } .notes-file-item.active { background: var(--accent-dim); color: var(--accent); } .notes-editor { display: flex; flex-direction: column; min-height: 0; } .notes-editor-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem; border-bottom: 1px solid var(--panel-border); } .notes-editor-toolbar input[type="text"] { flex: 1; font-weight: 600; } .notes-editor-toolbar .save-status { font-size: 0.75rem; color: var(--text-faint); min-width: 60px; } .notes-editor textarea { flex: 1; border: none; border-radius: 0; resize: none; padding: 1rem; font-size: 0.9rem; line-height: 1.6; background: transparent; } .notes-editor textarea:focus { border-color: transparent; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%) translateY(10px); background: #1c1f1d; border: 1px solid var(--panel-border); color: var(--text); padding: 0.6rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.82rem; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); z-index: 60; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.error { border-color: var(--danger); color: var(--danger); cursor: pointer; } .toast.error::after { content: " (click to dismiss)"; opacity: 0.6; font-size: 0.75rem; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .app-grid { grid-template-columns: 1fr; grid-template-rows: none; } .notes-window { grid-template-columns: 1fr; grid-template-rows: 140px 1fr; } .notes-sidebar { border-right: none; border-bottom: 1px solid var(--panel-border); } }