/* ============================================================ Profile Editor styles v0.1 baseline — function first; visual polish (fonts, theme) in a later pass per design discussion. ============================================================ */ :root { /* "Backstage / Heiress" palette — dark, restrained, gold-tinged. Playlist data surfaces stay close to in-game (white on near-black, yellow active highlight, coral BACK pill); chrome leans into a muted gold + ink-purple register for the high-class K-POP feel. */ --bg: #110d16; /* warm-tinted deep ink (touch of plum) */ --bg-deeper: #08060d; --fg: #f0ebe8; /* off-white, slight warm — like ivory under low light */ --muted: #948592; /* warm taupe-mauve, secondary readable */ --accent: #c4b6c0; /* warmer mid-tone */ --soft: #5a4f5a; /* disabled / coming-soon */ --border: rgba(255, 230, 220, 0.08); --border-strong: rgba(255, 230, 220, 0.18); --card-bg: #1c1620; /* surface lift, warm-tinted */ --card-bg-elev: #221b27; /* modal / popover lift */ --hover-bg: rgba(255, 220, 215, 0.05); --hover-tint: rgba(255, 195, 200, 0.06); /* peach-rose whisper (vanity-bulb cast) */ /* Game-continuity accents (do not drift far from #ffff00 / #ff7088) */ --highlight: #ffe14a; /* electric yellow, active tab + NEW + section headers */ --highlight-bg: rgba(255, 225, 74, 0.10); --pill: #ff7088; /* coral, kept exact from game */ --pill-fg: #1a1018; /* dark text on coral — fashion-magazine feel */ --pill-hover: #ff8aa0; /* Luxury accent — used sparingly for primary actions, divider hints */ --gold: #d4ac56; --gold-soft: rgba(212, 172, 86, 0.30); --gold-bg: rgba(212, 172, 86, 0.10); /* Info / link blue */ --link: #8db4ee; --link-hover: #b3cdf5; --link-bg-hover: rgba(141, 180, 238, 0.10); /* States */ --success: #6dcf80; --danger: #ff7575; --danger-bg: rgba(255, 117, 117, 0.10); --warn-bg: rgba(255, 225, 74, 0.08); --error-bg: rgba(255, 117, 117, 0.10); --error-border: rgba(255, 117, 117, 0.30); --error-fg: #ff9a9a; /* Two-bulb spotlight: warm peach glow top-left + soft rose top-right, evoking dressing-room vanity mirror lights. Centers placed slightly inside the viewport so the brightest point is visible; alpha pushed enough to register on a dark bg without blowing out content. */ --spotlight: radial-gradient(ellipse 70vw 55vh at 22% 8vh, rgba(255, 200, 170, 0.22) 0%, rgba(255, 200, 170, 0.07) 32%, transparent 60%), radial-gradient(ellipse 70vw 55vh at 78% 8vh, rgba(255, 130, 165, 0.22) 0%, rgba(255, 130, 165, 0.07) 32%, transparent 60%); /* Typography stacks */ --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Bebas Neue', 'Oswald', 'Helvetica Neue', Arial, sans-serif; } /* CJK locales: dial display surfaces a touch *below* the EN baseline. At equal font-size CJK system fonts read denser than Bebas Neue, so matching pixel size makes them feel slightly heavier than the Latin wordmarks. The .cjk class on stays as a future hook for font-family swaps. */ html.cjk .tab { font-size: 1rem; } html.cjk .slot { font-size: 1rem; } html.cjk .fav-row { font-size: 0.98rem; } html.cjk .pane-title { font-size: 1.15rem; } html.cjk .empty-state-title { font-size: 1.25rem; } html.cjk .tag-level2-header .tag-current { font-size: 1.3rem; } html.cjk .pagination { font-size: 0.95rem; } /* Spotlight goes on html so it always covers the full viewport (body has max-width 1500px and would clip the gradient on wide screens). Background-attachment fixed keeps the lights anchored to viewport. */ html { background-image: var(--spotlight); background-color: var(--bg); background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } body { background: transparent; } * { box-sizing: border-box; } body { font-family: var(--font-ui); max-width: 1500px; margin: 2.5rem auto 3rem; padding: 1.5rem 1.5rem 0; color: var(--fg); background: var(--bg); line-height: 1.5; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: rgba(255, 230, 220, 0.08); padding: 0.05em 0.35em; border-radius: 3px; color: var(--accent); } .hidden { display: none !important; } .breadcrumb { color: var(--muted); font-size: 0.85rem; margin: 0 0 1rem; } header { margin-bottom: 1.5rem; } h1 { font-family: var(--font-display); font-weight: 400; font-size: 2.8rem; letter-spacing: 0.05em; margin: 0 0 0.4rem; color: var(--fg); text-transform: uppercase; } .subtitle { color: var(--muted); font-size: 0.95rem; margin: 0; } /* === Loading / error states ============================== */ .loading { padding: 3rem 0; text-align: center; color: var(--muted); font-size: 0.95rem; } .error { padding: 1.25rem 1.5rem; background: var(--error-bg); border-left: 3px solid var(--error-border); border-radius: 4px; color: var(--error-fg); } .error h2 { margin: 0 0 0.5rem; font-size: 1.05rem; } /* === Handoff banner (shown after redirect from another tool) === */ .handoff-banner { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; margin-bottom: 1rem; background: var(--link-bg-hover); border: 1px solid rgba(141, 180, 238, 0.20); border-left: 3px solid var(--link); border-radius: 4px; color: var(--link-hover); font-size: 0.9rem; } .handoff-banner > span:first-child { flex: 1; } .handoff-banner-dismiss { background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 1.15rem; line-height: 1; padding: 0.15rem 0.4rem; border-radius: 3px; } .handoff-banner-dismiss:hover { color: var(--fg); background: var(--hover-bg); } /* === Action bar ========================================== */ .action-bar { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; } .action-bar button { font: inherit; font-size: 0.9rem; letter-spacing: 0.02em; padding: 0.45rem 1.1rem; background: var(--gold); color: #1a1018; border: none; border-radius: 4px; cursor: pointer; transition: background 0.12s, transform 0.05s; } .action-bar button:hover { background: #e0bb6c; } .action-bar button:active { transform: translateY(1px); } .action-bar button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); } .action-bar button.secondary:hover { background: var(--hover-bg); color: var(--fg); border-color: var(--gold-soft); } .action-bar button:disabled { background: transparent; color: var(--soft); border: 1px solid var(--border); cursor: default; opacity: 0.7; } .action-bar .spacer { flex: 1; } /* === Language switcher (right side of action bar) === */ .lang-switcher { display: inline-flex; gap: 0.15rem; font-family: var(--font-ui); font-size: 0.75rem; margin-right: 0.4rem; } .lang-switcher button { background: transparent; border: 1px solid var(--border); color: var(--muted); font: inherit; cursor: pointer; padding: 0.32rem 0.55rem; border-radius: 3px; letter-spacing: 0.02em; line-height: 1.2; } .lang-switcher button:hover { color: var(--fg); border-color: var(--gold-soft); } .lang-switcher button.active { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-bg); } /* History indicator pill — visible only when imported file carried recent / mostPlayed fields. Clicking the × drops them; otherwise the user gets the same effect by choosing "favorites only" in the export modal. */ .history-indicator { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.7rem 0.2rem 0.85rem; background: var(--highlight-bg); border: 1px solid var(--highlight); border-radius: 999px; font-family: var(--font-display); font-size: 0.92rem; color: var(--highlight); letter-spacing: 0.05em; text-transform: uppercase; } .history-indicator .drop-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 1.05rem; line-height: 1; border-radius: 50%; width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center; } .history-indicator .drop-btn:hover { color: var(--danger); background: rgba(255, 117, 117, 0.10); } .text-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0.3rem 0.5rem; border-radius: 3px; } .text-btn:hover { color: var(--fg); background: var(--hover-bg); } .text-btn.danger:hover { color: var(--danger); background: var(--danger-bg); } /* === Two-pane layout ===================================== */ .editor { display: flex; flex-direction: column; } .two-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; } @media (max-width: 1100px) { .two-pane { grid-template-columns: 1fr; } } .left-pane, .right-pane { background: var(--card-bg); border: 1px solid var(--border); border-radius: 6px; padding: 1rem 1.25rem; } .pane-title { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); } /* === Left pane: fav list (3-col grid, mirrors right-pane layout) === */ .fav-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.05rem 1.5rem; } @media (max-width: 1100px) { .fav-list { grid-template-columns: 1fr; } } .fav-row { display: grid; grid-template-columns: 1.5rem 1fr 1.4rem; gap: 0.3rem; align-items: baseline; padding: 0.2rem 0.4rem; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.015em; border-radius: 3px; cursor: grab; position: relative; min-height: 1.7rem; } .fav-row:hover { background: var(--hover-tint); } .fav-row.dragging { opacity: 0.35; cursor: grabbing; } .fav-row.drop-target { outline: 2px dashed var(--gold); outline-offset: -2px; background: var(--gold-bg); } .fav-row .index { font-family: var(--font-ui); color: var(--muted); font-size: 0.72rem; text-align: right; font-style: normal; letter-spacing: 0; user-select: none; } .fav-row .label { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fav-row .label.is-missing { color: var(--soft); } .fav-row .label .variant-suffix { font-family: var(--font-display); font-size: 0.82em; color: var(--muted); font-style: normal; margin-left: 0.25em; letter-spacing: 0.04em; } .fav-row .label .missing-tag { font-family: var(--font-ui); font-style: normal; font-size: 0.7em; color: var(--soft); margin-left: 0.3em; letter-spacing: 0; } .fav-row .remove-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 1rem; line-height: 1; border-radius: 2px; visibility: hidden; } .fav-row:hover .remove-btn { visibility: visible; } .fav-row .remove-btn:hover { color: var(--danger); } .empty-fav-msg { color: var(--muted); font-size: 0.88rem; padding: 1.5rem 0.5rem; text-align: center; } .fav-footer { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; } /* === Right pane: tab strip ============================== */ .tab-strip { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); align-items: center; } .tab { background: transparent; border: none; font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.4rem; cursor: pointer; color: var(--muted); border-radius: 3px; transition: color 0.1s; } .tab:hover { color: var(--fg); } .tab.active { color: var(--highlight); text-shadow: 0 0 12px rgba(255, 225, 74, 0.45); } .tab.tag-pill { background: var(--pill); color: var(--pill-fg); padding: 0.3rem 1rem; border-radius: 999px; margin-left: auto; letter-spacing: 0.05em; } .tab.tag-pill:hover { background: var(--pill-hover); color: white; } .tab.tag-pill.active { background: var(--pill); color: white; } /* === Song grid ========================================== */ .song-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.05rem 1.5rem; position: relative; } .slot { font-family: var(--font-display); font-size: 1.08rem; letter-spacing: 0.015em; padding: 0.2rem 0.4rem; border-radius: 3px; display: flex; align-items: baseline; gap: 0.3rem; min-height: 1.7rem; position: relative; font-style: italic; } .slot.empty { /* purposely blank */ } .slot.header { color: var(--highlight); font-weight: 400; letter-spacing: 0.04em; cursor: default; padding-top: 0.6rem; padding-bottom: 0.2rem; font-size: 1.05rem; text-shadow: 0 0 8px rgba(255, 225, 74, 0.30); } .slot.song:not(.coming-soon):not(.expanded) { cursor: pointer; } .slot.song:not(.coming-soon):hover { background: var(--hover-tint); } .slot.song.is-new { color: var(--highlight); } /* Added state: dark-gold row tint instead of a text badge. Subtle enough to keep the grid scannable, distinctive enough to spot already-picked songs at a glance. Hover deepens the tint slightly. */ .slot.song.added { background: rgba(212, 172, 86, 0.18); box-shadow: inset 2px 0 0 var(--gold-soft); } .slot.song.added:hover { background: rgba(212, 172, 86, 0.28); } .slot.song.coming-soon { color: var(--soft); cursor: default; } .slot .from-tag { font-family: var(--font-display); font-size: 0.78em; font-style: normal; color: var(--muted); margin-left: 0.3em; letter-spacing: 0.05em; } .slot.song.is-new .from-tag { color: var(--highlight); opacity: 0.85; } .slot .play-count { font-family: var(--font-display); font-size: 0.82em; font-style: normal; color: var(--muted); margin-left: 0.35em; letter-spacing: 0.04em; font-weight: 400; } .slot.song.is-new .play-count { color: var(--highlight); } .slot.expanded { background: var(--highlight-bg); border: 1px solid var(--highlight); font-weight: 500; z-index: 5; } /* === TAG mode: artist/stage list (LEVEL1) =============== */ .slot.tag-item { cursor: pointer; font-style: italic; } .slot.tag-item:hover { background: var(--hover-bg); } /* === TAG mode: drilled view header (LEVEL2) ============= */ .tag-level2-header { display: flex; align-items: baseline; gap: 1rem; padding: 0.5rem 0.4rem 0.85rem; border-bottom: 1px solid var(--border); margin-bottom: 0.6rem; } .tag-level2-header .tag-back-link { background: transparent; border: none; font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 3px; } .tag-level2-header .tag-back-link:hover { color: var(--fg); background: var(--hover-bg); } .tag-level2-header .tag-current { flex: 1; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.03em; color: var(--fg); font-style: italic; } .tag-level2-header .tag-count { font-family: var(--font-display); color: var(--muted); font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; } /* === Variant popover (multi-variant inline picker) ====== */ .variant-popover { position: absolute; top: calc(100% + 2px); left: -1px; min-width: calc(100% + 2px); max-width: 360px; background: var(--card-bg-elev); border: 1px solid var(--border-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); padding: 0.4rem; z-index: 30; font-style: normal; font-weight: 400; } .variant-popover .vp-title { font-family: var(--font-display); font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); padding: 0.2rem 0.5rem 0.4rem; } .variant-popover .vp-row { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; border-radius: 3px; cursor: pointer; font-size: 0.88rem; } .variant-popover .vp-row:hover { background: var(--hover-bg); } .variant-popover .vp-row.added { background: rgba(212, 172, 86, 0.18); box-shadow: inset 2px 0 0 var(--gold-soft); } .variant-popover .vp-row.added:hover { background: rgba(212, 172, 86, 0.28); } .variant-popover .vp-row .vp-stage { color: var(--accent); } .variant-popover .vp-row .vp-trackid { font-style: italic; font-size: 0.85em; color: var(--muted); margin-left: 0.4em; } .variant-popover .vp-row .vp-action { font-size: 0.78em; color: var(--link); letter-spacing: 0.04em; } /* === Pagination (TAG mode) =============================== */ .pagination { margin-top: 1rem; padding-top: 0.6rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-style: italic; font-size: 1rem; letter-spacing: 0.05em; } .pagination button { background: transparent; border: none; font: inherit; text-transform: uppercase; cursor: pointer; color: var(--muted); padding: 0.3rem 0.6rem; border-radius: 3px; } .pagination button:hover { color: var(--fg); background: var(--hover-bg); } .pagination button:disabled { color: var(--soft); cursor: default; background: transparent; } .pagination .page-info { color: var(--muted); font-style: normal; font-size: 0.9rem; letter-spacing: 0.06em; } /* === Misc =============================================== */ .placeholder-msg { padding: 2rem; text-align: center; color: var(--muted); font-size: 0.9rem; } .empty-state { padding: 3rem 1.5rem; text-align: center; } .empty-state-title { margin: 0 0 0.6rem; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; color: var(--accent); letter-spacing: 0.05em; text-transform: uppercase; } .empty-state-body { margin: 0 auto; max-width: 32rem; font-size: 0.88rem; color: var(--muted); line-height: 1.55; } footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; text-align: center; } /* === Export modal ======================================== */ .modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(2px); } .modal-card { position: relative; background: var(--card-bg-elev); border: 1px solid var(--border); padding: 1.5rem 2rem; border-radius: 8px; max-width: 520px; width: 100%; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6); font-size: 0.92rem; line-height: 1.55; } .modal-card h2 { margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 600; } .modal-card p { margin: 0 0 0.75rem; } .modal-card p:last-of-type { margin-bottom: 0; } .modal-card .branch { margin-top: 0.75rem; padding: 0.7rem 0.95rem; background: var(--bg); border: 0; border-left: 3px solid var(--border); border-radius: 0 4px 4px 0; font-family: inherit; font-size: 0.88rem; color: inherit; line-height: 1.5; display: block; width: 100%; text-align: left; } .modal-card .branch.warn { border-left-color: var(--highlight); } .modal-card .branch.safe { border-left-color: var(--success); } .modal-card .branch strong { display: block; margin-bottom: 0.2rem; font-size: 0.95rem; } .modal-card .branch .branch-desc { display: block; color: var(--accent); } .modal-card button.branch { cursor: pointer; transition: background 0.12s, transform 0.05s, box-shadow 0.12s; } .modal-card button.branch:hover { background: var(--hover-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .modal-card button.branch.warn:hover { background: rgba(255, 225, 74, 0.08); } .modal-card button.branch.safe:hover { background: rgba(109, 207, 128, 0.08); } .modal-card button.branch:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .modal-card button.branch:active { transform: translateY(1px); } .modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; flex-wrap: wrap; } .modal-actions button { font: inherit; font-size: 0.9rem; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; border: none; } .modal-actions .primary { background: var(--gold); color: #1a1018; } .modal-actions .primary:hover { background: #e0bb6c; } .modal-actions .secondary { background: transparent; color: var(--accent); border: 1px solid var(--border-strong); } .modal-actions .secondary:hover { background: var(--hover-bg); color: var(--fg); border-color: var(--gold-soft); } .modal-actions .text-btn { color: var(--muted); } .modal-actions .text-btn:hover { background: var(--hover-bg); color: var(--fg); }