/* The Inkypaint launcher's look (src/launcher-qt/qml/Theme.qml): a quiet
   night-purple app with the three inks as accents, splats for headings and
   avatars, see-through cards and pill buttons. */
:root{
  --lime:#ccf233;--purple:#5c3df5;--magenta:#ed38c7;--orange:#ff9f43;
  --night:#120a2b;--dusk:#2b146b;--side:#1a0f38;
  --text:#f4f1ff;--sec:rgba(244,241,255,.62);--ter:rgba(244,241,255,.4);
  --glass:rgba(255,255,255,.07);--gb:rgba(255,255,255,.13);--field:rgba(0,0,0,.28);--bad:#ff8a8a
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;color:var(--text);font:14px/1.5 "Segoe UI",system-ui,sans-serif;background:linear-gradient(90deg,var(--night),var(--dusk)) fixed;min-height:100vh}
a{color:var(--text)}
.sp{display:inline-block;flex:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;background:var(--c,var(--purple))}
.burst{--m:url(/assets/splat-burst.png)}.drip{--m:url(/assets/splat-drip.png)}.streak{--m:url(/assets/splat-streak.png)}
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg .sp{position:absolute}
.bg .a{--c:rgba(92,61,245,.35);width:70vh;height:70vh;right:-14vh;top:-12vh;transform:rotate(-14deg)}
.bg .b{--c:rgba(204,242,51,.18);width:44vh;height:44vh;right:-10vh;bottom:-10vh;transform:rotate(18deg)}
.bg .d{--c:rgba(237,56,199,.28);width:20vh;height:20vh;left:40%;top:-4vh;transform:rotate(8deg)}

.app{position:relative;z-index:1;display:grid;grid-template-columns:220px minmax(0,1fr) 260px;min-height:100vh}
.app.bare{grid-template-columns:220px minmax(0,1fr)}
.side{background:var(--side);border-right:1px solid rgba(255,255,255,.06);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow:auto}
.me{display:flex;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border-radius:14px;background:var(--glass);border:1px solid rgba(204,242,51,.45);margin-bottom:8px;text-decoration:none}
.me b{display:block;font-size:16px;font-weight:600}.me small{color:var(--sec);font-size:12px;font-family:monospace}
.side a.nav{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;border-radius:12px;color:var(--sec);font-weight:600;text-decoration:none}
.side a.nav i{font-style:normal;width:18px;text-align:center}
.side a.nav:hover{background:var(--glass);color:var(--text)}
.side a.nav.on{background:rgba(92,61,245,.35);color:var(--text)}
.side a.nav.ext::after{content:"↗";margin-left:auto;color:var(--ter)}
.side .gap{height:8px}
.side .grow{flex:1}
.logo{font-weight:900;font-style:italic;font-size:18px;padding:8px 12px;color:var(--sec);text-decoration:none}.logo span{color:var(--lime)}
.side form{margin:0}
.side .link{background:none;border:0;color:var(--ter);font:inherit;padding:6px 12px;cursor:pointer;text-align:left}
.side .link:hover{color:var(--text)}

main{padding:30px 36px 60px;max-width:920px;min-width:0}
.hero{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hero .ico{position:relative;width:74px;height:74px;flex:none}.hero .ico .sp{width:74px;height:74px}
.hero .ico span{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:#fff}
h1{font-weight:900;font-style:italic;font-size:30px;margin:0;line-height:1.1}
h2{font-size:20px;font-weight:700;margin:0 0 10px}
p{margin:4px 0;color:var(--sec)}
.card{background:var(--glass);border:1px solid var(--gb);border-radius:22px;padding:20px;margin-bottom:16px}
.rows .r{display:flex;align-items:center;gap:12px;padding:9px 0;flex-wrap:wrap}.rows .r+.r{border-top:1px solid rgba(255,255,255,.06)}
.r .grow{flex:1;min-width:150px}.r small{display:block;color:var(--sec);font-size:12px}
.r form{margin:0}
.code{font-family:monospace}
input,select{font:inherit;font-size:15px;color:var(--text);background:var(--field);border:1px solid var(--gb);border-radius:12px;padding:9px 14px}
input::placeholder{color:var(--ter)}input:focus,select:focus{outline:0;border:2px solid var(--purple)}
input[type=checkbox]{accent-color:var(--lime);width:auto}
input[type=file]{padding:6px}
button.b,button.q,button.x{font:inherit;font-weight:600;border-radius:999px;padding:8px 16px;cursor:pointer;border:1px solid var(--gb);background:rgba(255,255,255,.09);color:var(--text);text-decoration:none;display:inline-block}
a.b,a.q{font-weight:600;border-radius:999px;padding:8px 16px;border:1px solid var(--gb);background:rgba(255,255,255,.09);text-decoration:none;display:inline-block}
button.b,a.b{background:var(--purple);border-color:#7d66f7;font-weight:700}
button.b.l,a.b.l{background:var(--lime);color:#111;border-color:#dcf766}
button.x{color:var(--bad)}button:hover,a.b:hover,a.q:hover{filter:brightness(1.1)}
:focus-visible{outline:3px solid var(--lime);outline-offset:2px}
form.f{display:grid;gap:12px;max-width:420px}
form.f label{display:grid;gap:5px;color:var(--sec);font-size:13px}
form.f label.check{display:flex;gap:8px;align-items:center}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline form{margin:0}
.av{position:relative;width:38px;height:38px;flex:none}.av .sp{width:100%;height:100%}
.av b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-style:italic;color:#fff;font-size:16px}
.av i{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:#3b82f6;border:2px solid var(--night)}
.av i.playing{background:var(--lime)}.av i.off{background:rgba(153,153,153,.6)}
.av.big{width:56px;height:56px}.av.big b{font-size:22px}
.playing{color:var(--lime)}
.banner{display:flex;gap:10px;align-items:center;padding:12px 16px;border-radius:16px;margin-bottom:16px;background:rgba(255,159,67,.16);border:1px solid rgba(255,159,67,.4)}
.banner b{color:var(--orange)}
.banner.ok{background:rgba(204,242,51,.12);border-color:rgba(204,242,51,.4)}.banner.ok b{color:var(--lime)}
.big{font-weight:900;font-style:italic;font-size:44px;line-height:1}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stats div small{display:block;color:var(--sec)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--lime);flex:none}.dot.down{background:var(--bad)}.dot.slow{background:var(--orange)}
.secret{font-family:monospace;font-size:22px;letter-spacing:.06em;color:var(--lime)}

aside{position:sticky;top:0;height:100vh;overflow:auto;padding:24px 16px;border-left:1px solid rgba(255,255,255,.06);background:rgba(18,10,43,.5)}
aside h3{font-size:16px;font-weight:600;margin:18px 0 8px}
aside .p{display:flex;gap:10px;align-items:center;padding:5px 0}aside .p small{display:block;font-size:12px;color:var(--sec)}

.solo{position:relative;z-index:1;max-width:440px;margin:0 auto;padding:70px 20px}
.solo .logo{display:block;padding:0 0 18px;font-size:22px}
.solo .alt{margin-top:16px;color:var(--sec)}

@media(max-width:1050px){.app{grid-template-columns:200px minmax(0,1fr)}aside{display:none}}
@media(max-width:640px){
  .app,.app.bare{display:block}
  .side{position:sticky;height:auto;flex-direction:row;overflow-x:auto;z-index:2;padding:8px}
  .me,.logo,.side .grow,.side .gap,.side form{display:none}
  .side a.nav{white-space:nowrap}
  main{padding:20px 14px}
}
.card .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.card h3{font-size:15px;font-weight:600;margin:12px 0 4px}