@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
:root { color-scheme: dark; --bg:#080a0e; --panel:#10141b; --panel2:#151a22; --line:#252c36; --muted:#818b99; --text:#f5f7fa; --cyan:#7df5ed; --yellow:#e9ff58; --danger:#ff6a77; }
* { box-sizing:border-box; }
html { background:var(--bg); font-family:'Noto Sans JP',sans-serif; color:var(--text); }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 88% 8%,rgba(125,245,237,.08),transparent 25%),linear-gradient(135deg,rgba(255,255,255,.018) 25%,transparent 25%) 0 0/18px 18px,var(--bg); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.hidden { display:none!important; }
.auth-shell { width:min(680px,calc(100% - 40px)); min-height:100vh; margin:auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:70px 0; position:relative; }
.auth-shell:after { content:""; position:fixed; right:5vw; top:10vh; width:32vw; height:70vh; border-right:1px solid #20262f; border-top:1px solid #20262f; transform:skewX(-8deg); pointer-events:none; }
.brand-mark,.mini-mark { display:grid; place-items:center; background:var(--yellow); color:#090b0e; font:800 32px/1 'DM Mono'; clip-path:polygon(16% 0,100% 0,84% 100%,0 100%); }
.brand-mark { width:62px; height:54px; margin-bottom:38px; }
.eyebrow,.section-label { font:500 .75rem/1.3 'DM Mono'; color:var(--cyan); letter-spacing:.16em; margin:0 0 12px; }
h1 { font-size:clamp(3rem,10vw,6.8rem); line-height:.87; letter-spacing:-.07em; text-transform:uppercase; margin:0; max-width:900px; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px var(--text); }
.lede { color:var(--muted); font-size:1.05rem; margin:26px 0 38px; }
.primary,.secondary,.input-row button { border:0; cursor:pointer; font-weight:700; min-height:52px; padding:0 24px; background:var(--yellow); color:#080a0e; }
.primary:hover,.input-row button:hover { filter:brightness(1.08); transform:translateY(-1px); }
.primary span { margin-right:8px; }
.login-actions { display:flex; flex-wrap:wrap; gap:10px; }
.viewer-login { background:var(--cyan); }
.auth-card { width:min(520px,100%); border:1px solid var(--line); background:rgba(16,20,27,.92); padding:24px; }
.auth-card label { font-size:.9rem; display:block; margin-bottom:10px; }
.auth-card p { font-size:.78rem; line-height:1.7; color:var(--muted); margin:12px 0 0; }
.auth-card .section-label { color:var(--cyan); font:500 .7rem/1.3 'DM Mono'; margin:0 0 18px; }
.viewer-register-card { margin-top:16px; }
.input-row { display:flex; }
.input-row input { min-width:0; flex:1; border:1px solid var(--line); background:#080a0e; color:var(--text); padding:0 14px; outline:0; }
.input-row input:focus { border-color:var(--cyan); }
.message { min-height:24px; color:var(--danger); font-size:.85rem; }
.dashboard { min-height:100vh; }
header { height:74px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,4vw); background:rgba(8,10,14,.82); backdrop-filter:blur(18px); position:sticky; top:0; z-index:5; }
.wordmark { display:flex; gap:12px; align-items:center; color:var(--text); text-decoration:none; font:500 .66rem/1.1 'DM Mono'; letter-spacing:.08em; }
.wordmark b { color:var(--cyan); }
.mini-mark { width:34px; height:30px; font-size:16px; }
.header-actions { display:flex; align-items:center; gap:18px; }
.role-badge { color:var(--yellow); border:1px solid rgba(233,255,88,.35); padding:6px 9px; font:500 .66rem 'DM Mono'; letter-spacing:.06em; }
.role-badge.viewer { color:var(--cyan); border-color:rgba(125,245,237,.35); }
.sync-dot { color:var(--muted); font:500 .7rem 'DM Mono'; }
.sync-dot i { display:inline-block; width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-right:8px; }
.icon-button { width:36px;height:36px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(310px,.7fr); max-width:1500px; margin:auto; }
.overview { min-height:420px; padding:68px max(28px,5vw) 36px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.score-line { display:flex; align-items:baseline; gap:14px; }
.score-line strong { font:500 clamp(4.3rem,10vw,9rem)/1 'DM Mono'; letter-spacing:-.08em; }
.score-line span { font:500 1.1rem 'DM Mono'; color:var(--yellow); }
.score-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.82rem; margin-top:22px; position:relative; z-index:2; }
.sparkline { height:115px; display:flex; align-items:flex-end; gap:5px; position:absolute; inset:auto 0 0; opacity:.6; }
.sparkline i { flex:1; min-width:3px; background:linear-gradient(var(--cyan),rgba(125,245,237,.04)); border-top:1px solid var(--cyan); }
.capture-card { padding:68px 34px 36px; border-bottom:1px solid var(--line); background:linear-gradient(160deg,#131820,#0d1117); }
h2 { margin:0; font-size:1.3rem; letter-spacing:-.03em; }
.capture-card>p:not(.section-label) { color:var(--muted); font-size:.83rem; line-height:1.8; }
.secondary { background:transparent;color:var(--text);border:1px solid var(--line);width:100%;margin:14px 0 10px; }
.secondary:hover { border-color:var(--cyan); }
.bookmarklet { width:100%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;background:var(--yellow);color:#090b0e;text-decoration:none;font-weight:800; }
.bookmarklet.disabled { opacity:.35; pointer-events:none; }
.capture-status { font-size:.7rem!important; }
.viewer-access { border-top:1px solid var(--line); margin-top:28px; padding-top:27px; }
.viewer-access>p:not(.section-label) { color:var(--muted); font-size:.78rem; line-height:1.7; }
.viewer-code-panel { display:flex; align-items:stretch; border:1px solid var(--line); background:#080a0e; }
.viewer-code-panel code { flex:1; min-width:0; padding:14px; color:var(--cyan); font:500 clamp(.9rem,2vw,1.05rem) 'DM Mono'; letter-spacing:.08em; text-align:center; user-select:all; }
.viewer-code-panel button { border:0; border-left:1px solid var(--line); background:var(--panel2); color:var(--text); padding:0 14px; cursor:pointer; font-size:.76rem; }
.dashboard-grid.viewer-mode .overview { grid-column:1/-1; border-right:0; }
.ranking-panel,.history-panel { padding:42px max(28px,4vw) 54px; }
.ranking-panel { border-right:1px solid var(--line); }
.panel-head { display:flex;align-items:end;justify-content:space-between;margin-bottom:28px; }
.count-badge { font:500 .66rem 'DM Mono'; color:var(--muted); border:1px solid var(--line); padding:7px 10px; }
.ranking-list { display:grid; gap:2px; }
.rank-row { display:grid;grid-template-columns:48px 1fr auto;align-items:center;min-height:65px;padding:0 18px;background:var(--panel);border-left:2px solid transparent; }
.rank-row:first-child { border-left-color:var(--yellow); background:linear-gradient(90deg,rgba(233,255,88,.08),var(--panel)); }
.rank { font:500 .8rem 'DM Mono';color:var(--muted); }
.member-name { font-weight:600; }
.member-points { font:500 1rem 'DM Mono'; }
.member-points small { color:var(--muted);font-size:.65rem;margin-left:5px; }
.empty { min-height:210px;border:1px dashed var(--line);display:grid;place-items:center;text-align:center;color:var(--muted);padding:30px; }
.empty span { font-size:2rem;color:var(--cyan); }
.empty p { max-width:380px;line-height:1.8;font-size:.85rem;margin:0; }
.table-wrap { overflow:auto; }
table { width:100%;border-collapse:collapse;font-size:.82rem; }
th { color:var(--muted);font:500 .65rem 'DM Mono';letter-spacing:.08em;text-align:left;padding:0 12px 13px;border-bottom:1px solid var(--line); }
td { padding:15px 12px;border-bottom:1px solid #1b2028;white-space:nowrap; }
td:last-child,th:last-child { text-align:right; }
.empty-row { text-align:center!important;color:var(--muted);padding:52px; }
#toast { position:fixed;right:24px;bottom:24px;background:var(--text);color:#090b0e;padding:13px 18px;font-size:.82rem;font-weight:600;transform:translateY(30px);opacity:0;transition:.25s;z-index:10; }
#toast.show { transform:none;opacity:1; }
@media(max-width:860px){.dashboard-grid{grid-template-columns:1fr}.overview,.ranking-panel{border-right:0}.overview{min-height:370px}.capture-card{padding-top:38px}.history-panel{border-top:1px solid var(--line)}.auth-shell:after{display:none}}
@media(max-width:520px){.auth-shell{width:calc(100% - 28px)}.login-actions{display:grid;width:100%}.input-row{display:grid;gap:8px}.input-row input{min-height:50px}.sync-dot{display:none}.header-actions{gap:9px}.overview{padding-top:48px}.score-meta{align-items:flex-start;gap:10px;flex-direction:column}.rank-row{grid-template-columns:35px 1fr auto;padding:0 12px}.score-line strong{font-size:3.5rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}