:root { color-scheme: dark light; --bg: #0b1020; --card: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.12); --border-soft: rgba(255,255,255,0.14); --border-strong: rgba(255,255,255,0.22); --text: rgba(255, 255, 255, 0.92); --muted: rgba(255, 255, 255, 0.68); --accent: #7c5cff; --accent2: #3ddc97; --danger: #ff5c7c; --surface-soft: rgba(0,0,0,0.18); --surface: rgba(0,0,0,0.25); --surface-strong: rgba(0,0,0,0.28); --thumb-empty: rgba(0,0,0,0.22); --shadow: 0 8px 30px rgba(0,0,0,0.25); --toast-bg: rgba(0,0,0,0.70); --toast-border: rgba(255,255,255,0.14); --toast-text: rgba(255,255,255,0.92); } /* Manual theme override (set on ) */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #f6f7fb; --card: rgba(255,255,255,0.82); --border: rgba(15,23,42,0.12); --border-soft: rgba(15,23,42,0.12); --border-strong: rgba(15,23,42,0.18); --text: rgba(15,23,42,0.92); --muted: rgba(15,23,42,0.62); --surface-soft: rgba(15,23,42,0.04); --surface: rgba(15,23,42,0.06); --surface-strong: rgba(15,23,42,0.08); --thumb-empty: rgba(15,23,42,0.06); --shadow: 0 10px 30px rgba(15,23,42,0.10); --toast-bg: rgba(15,23,42,0.80); --toast-border: rgba(15,23,42,0.16); --toast-text: rgba(255,255,255,0.96); } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f6f7fb; --card: rgba(255,255,255,0.82); --border: rgba(15,23,42,0.12); --border-soft: rgba(15,23,42,0.12); --border-strong: rgba(15,23,42,0.18); --text: rgba(15,23,42,0.92); --muted: rgba(15,23,42,0.62); --surface-soft: rgba(15,23,42,0.04); --surface: rgba(15,23,42,0.06); --surface-strong: rgba(15,23,42,0.08); --thumb-empty: rgba(15,23,42,0.06); --shadow: 0 10px 30px rgba(15,23,42,0.10); } } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--text); } .wrap { max-width: 980px; margin: 0 auto; padding: 28px 16px 40px; } .header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } h1 { font-size: 28px; margin: 0 0 4px; letter-spacing: 0.2px; } h2 { font-size: 16px; margin: 18px 0 10px; color: var(--muted); font-weight: 600; } .muted { color: var(--muted); font-size: 13px; } .card { border: 1px solid var(--border); background: var(--card); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); } .form { display: grid; gap: 12px; } .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .label { display: grid; gap: 6px; flex: 1; min-width: 240px; } .input { width: 100%; border-radius: 12px; border: 1px solid var(--border); padding: 12px 12px; background: var(--surface); color: var(--text); outline: none; } .input:focus { border-color: rgba(124,92,255,0.8); box-shadow: 0 0 0 4px rgba(124,92,255,0.18); } .check { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--border); color: var(--muted); } .actions { display: flex; gap: 10px; } .btn { border-radius: 12px; border: 1px solid rgba(124,92,255,0.6); background: linear-gradient(180deg, rgba(124,92,255,0.95), rgba(124,92,255,0.75)); color: white; padding: 10px 12px; cursor: pointer; font-weight: 600; } .btn.secondary { border-color: var(--border); background: var(--surface); color: var(--text); } .btn:disabled { opacity: 0.65; cursor: not-allowed; } .status { margin: 14px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); } .status.error { border-color: rgba(255,92,124,0.55); color: rgba(255,92,124,0.95); } .result-head { display: flex; gap: 12px; align-items: center; } .thumb { width: 64px; height: 64px; border-radius: 12px; border: 1px solid var(--border); object-fit: cover; background: var(--surface); } .title { font-size: 16px; font-weight: 700; } .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .badge { font-size: 12px; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .badge.good { border-color: rgba(61,220,151,0.55); color: rgba(61,220,151,0.95); } .badge.warn { border-color: rgba(255,196,61,0.55); color: rgba(255,196,61,0.95); } .grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; } @media (max-width: 880px) { .grid { grid-template-columns: 1fr; } } .links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-soft); } .link a { color: var(--text); text-decoration: none; } .link a:hover { text-decoration: underline; } .platform { color: var(--muted); font-size: 12px; } .code { white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; border-radius: 12px; padding: 12px; border: 1px solid var(--border); background: var(--surface-strong); margin: 0; } html.share-mode .header p.muted { display: none; } html.share-mode #input { display: none; } html.share-mode #share_wrap { display: none; } .share { display: grid; gap: 10px; margin-bottom: 12px; } .share-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } /* Share page (server-rendered) */ html.share-page .wrap { max-width: 760px; padding-top: 22px; } html.share-page body { background: var(--bg); } .share-card { padding: 18px; } .share-hero { display: flex; gap: 16px; align-items: flex-start; } .share-thumb { width: 120px; height: 120px; border-radius: 16px; } .thumb-empty { background: var(--thumb-empty); } .share-title { font-size: 22px; font-weight: 800; line-height: 1.2; } .share-artist { color: var(--muted); font-size: 14px; margin-top: 4px; } .details { margin-top: 12px; } .details-summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-soft); color: var(--text); font-weight: 650; font-size: 12px; } .details-summary::-webkit-details-marker { display: none; } .details-summary::after { content: "▾"; display: inline-block; color: var(--muted); font-size: 12px; transition: transform 120ms ease; } details[open] .details-summary::after { transform: rotate(180deg); } .details-summary:focus-visible { outline: none; border-color: rgba(124,92,255,0.8); box-shadow: 0 0 0 4px rgba(124,92,255,0.18); } .meta-grid { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 10px; } .meta-row { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin: 0; } .meta-row dt { margin: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .meta-row dd { margin: 0; font-size: 13px; } .share-links { margin-top: 18px; } .link-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .linkbtn { display: flex; align-items: stretch; gap: 0; border-radius: 16px; border: 1px solid var(--border-soft); background: var(--surface-soft); overflow: hidden; color: var(--text); text-decoration: none; transition: transform 120ms ease, background 120ms ease, border-color 120ms ease; } .linkbtn:hover { transform: translateY(-1px); background: var(--surface); border-color: var(--border-strong); } .linkbtn:active { transform: translateY(0); } .linkbtn-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .linkbtn-icon { width: 34px; height: 34px; border-radius: 14px; border: 1px solid var(--border-soft); background: var(--surface-strong); display: grid; place-items: center; color: var(--text); flex: 0 0 auto; } .linkbtn-icon svg { width: 18px; height: 18px; display: block; } .linkbtn-text { min-width: 0; } .linkbtn-title { font-weight: 700; } .linkbtn-arrow { color: var(--muted); font-size: 18px; } .linkbtn-open { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; color: inherit; text-decoration: none; min-width: 0; } .linkbtn-open:hover { background: var(--surface-soft); } .linkbtn-copy { flex: 0 0 auto; min-width: 52px; display: grid; place-items: center; padding: 0 14px; background: transparent; border: 0; border-left: 1px solid var(--border-soft); color: var(--muted); font: inherit; cursor: pointer; } .linkbtn-copy:hover { background: var(--surface-soft); color: var(--text); } .copy-icon { width: 18px; height: 18px; display: block; } .copy-icon-check { display: none; } .linkbtn-copy.is-copied { color: rgba(61,220,151,0.95); } .linkbtn-copy.is-copied .copy-icon-copy { display: none; } .linkbtn-copy.is-copied .copy-icon-check { display: block; } .linkbtn:focus-within { outline: none; box-shadow: 0 0 0 4px rgba(124,92,255,0.18); } .linkbtn-open:focus-visible, .linkbtn-copy:focus-visible { outline: none; } .share-footer { margin-top: 16px; text-align: center; font-size: 12px; } .toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 10px 12px; border-radius: 999px; border: 1px solid var(--toast-border); background: var(--toast-bg); backdrop-filter: blur(8px); color: var(--toast-text); font-size: 12px; max-width: min(520px, calc(100vw - 28px)); text-align: center; z-index: 100; } .theme-switcher { max-width: 980px; margin: 16px auto 0; padding: 0 calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px; display: flex; justify-content: flex-end; z-index: 120; } html.share-page .theme-switcher { max-width: 760px; } .theme-toggle { border-radius: 999px; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow); backdrop-filter: blur(10px); color: var(--text); padding: 9px 12px; font-size: 12px; font-weight: 650; letter-spacing: 0.01em; cursor: pointer; } .theme-toggle:hover { border-color: rgba(124,92,255,0.55); } .theme-toggle:focus-visible { outline: none; border-color: rgba(124,92,255,0.8); box-shadow: 0 0 0 4px rgba(124,92,255,0.18); } @media (max-width: 540px) { .share-hero { flex-direction: column; } .share-thumb { width: 100%; height: auto; max-width: 320px; aspect-ratio: 1 / 1; } .meta-row { grid-template-columns: 1fr; gap: 4px; } .meta-row dt { font-size: 10px; } }