@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#27312d; --muted:#6f7973; --paper:#f4f0e8; --card:#fffdf8; --line:#d9d7cf; --green:#5c806b; --red:#a66760; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 15% 10%, #fffaf0 0, transparent 31%), radial-gradient(circle at 85% 88%, #dfe8df 0, transparent 30%), var(--paper); font-family:'DM Sans',sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1080px, calc(100% - 32px)); min-height:100vh; margin:auto; padding:34px 0 54px; display:flex; flex-direction:column; }
.eyebrow { color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:600; }
.center { flex:1; display:grid; place-items:center; }
.login { width:min(430px,100%); }
h1 { margin:0 0 10px; font:400 clamp(46px,7vw,74px)/.98 'Instrument Serif',serif; letter-spacing:-.025em; }
.login h1 { margin-bottom:38px; }
label { display:block; font-size:13px; font-weight:600; margin-bottom:9px; }
.input-row { display:flex; gap:10px; }
input,textarea { width:100%; border:1px solid var(--line); color:var(--ink); background:rgba(255,253,248,.8); border-radius:12px; outline:none; transition:.2s; }
input { height:54px; padding:0 17px; }
input:focus,textarea:focus { border-color:#86988d; box-shadow:0 0 0 4px rgba(92,128,107,.1); }
.primary { border:0; border-radius:12px; min-height:54px; padding:0 24px; background:var(--ink); color:#fff; font-weight:600; transition:.2s; }
.primary:hover { transform:translateY(-1px); background:#111815; }
.error { min-height:22px; color:var(--red); font-size:13px; margin-top:10px; }
.edit { width:min(680px,100%); padding:55px 0; }
.edit h1 { font-size:clamp(42px,7vw,66px); }
.toggle-wrap { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:25px 0 30px; border-top:1px solid var(--line); margin-top:32px; }
.toggle-label { margin:0; font:400 clamp(24px,4vw,34px)/1.15 'Instrument Serif',serif; }
.switch { position:relative; width:82px; height:44px; flex:0 0 auto; }
.switch input { position:absolute; opacity:0; }
.slider { position:absolute; inset:0; border-radius:99px; background:var(--red); transition:.25s; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.slider::after { content:""; position:absolute; width:34px; height:34px; left:5px; top:5px; border-radius:50%; background:#fff; box-shadow:0 2px 7px rgba(0,0,0,.18); transition:.25s; }
.switch input:checked + .slider { background:var(--green); }
.switch input:checked + .slider::after { transform:translateX(38px); }
.status-word { font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--red); margin-top:6px; }
.status-word.ready { color:var(--green); }
textarea { min-height:170px; resize:vertical; padding:17px; line-height:1.55; }
.edit-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:16px; }
.secondary { border:1px solid var(--line); background:transparent; border-radius:12px; min-height:54px; padding:0 22px; color:var(--ink); }
.dashboard-head { padding:80px 0 38px; }
.dashboard-head h1 { font-size:clamp(43px,7vw,70px); }
.dashboard-head p { color:var(--muted); margin:0; }
.cards { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.card { position:relative; min-height:330px; padding:30px; border:1px solid transparent; border-radius:20px; background:rgba(255,253,248,.68); box-shadow:0 15px 50px rgba(48,54,49,.05); overflow:hidden; transition:.25s; }
.card:hover { border-color:#aeb8b1; transform:translateY(-2px); }
.card-top { display:flex; justify-content:space-between; align-items:center; }
.player { font:400 26px 'Instrument Serif',serif; }
.badge { display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.11em; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(166,103,96,.12); }
.ready .dot { background:var(--green); box-shadow:0 0 0 4px rgba(92,128,107,.12); }
.message { margin:68px 0 10px; white-space:pre-wrap; font:400 25px/1.35 'Instrument Serif',serif; }
.empty { color:#969d98; font-style:italic; }
.date { position:absolute; bottom:25px; left:30px; color:var(--muted); font-size:11px; }
.overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(39,49,45,.9); color:#fff; opacity:0; transition:.2s; border:0; width:100%; font-weight:600; letter-spacing:.02em; }
.own:hover .overlay,.own:focus-within .overlay { opacity:1; }
.fade { animation:fade .35s ease both; }
@keyframes fade { from { opacity:0; transform:translateY(8px); } }
@media (max-width:700px) { .shell{padding-top:22px}.dashboard-head{padding:55px 0 28px}.cards{grid-template-columns:1fr}.card{min-height:275px}.input-row{display:block}.input-row .primary{width:100%;margin-top:10px}.message{margin-top:48px}.toggle-wrap{align-items:flex-start}.edit-actions{flex-direction:column-reverse}.edit-actions button{width:100%} }
@media (prefers-reduced-motion:reduce) { * { animation:none!important; transition:none!important; } }