@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&display=swap');
:root{
  --coral:#f4e04d; --coral-d:#d9c22e; --coral-l:#f7e968;   /* put.io yellow accent */
  --green:#1aa257; --green-l:#2fd07a;
  --bg:#14171c; --card:#1d222a; --line:#2c333d;
  --txt:#f2f4f7; --muted:#9aa4b2; --danger:#ef4444; --binline:#e9edf2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% -10%,#222a35,var(--bg));
  color:var(--txt); font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
#app{min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px;}
.wordmark{font-family:'Fredoka','Baloo 2','Segoe UI',system-ui,sans-serif; font-weight:600; color:var(--coral); letter-spacing:-1px; line-height:1}
.brand{display:flex; align-items:center; gap:11px; position:fixed; top:16px; left:18px; opacity:.92; text-decoration:none}
.brand svg{width:38px; height:38px; color:var(--binline)}
.brand .wordmark{font-size:24px}
.brand small{color:var(--muted); font-size:12px; align-self:flex-end; margin-bottom:3px}
.card{width:100%; max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,.35)}
h1{font-size:22px; margin:0 0 6px} h2{font-size:17px; margin:0 0 4px}
p.sub{color:var(--muted); margin:0 0 20px}
label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px}
input[type=text],input[type=password],textarea{
  width:100%; background:#12161c; border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:12px 14px; font-size:15px; outline:none}
input:focus,textarea:focus{border-color:var(--coral)}
.row{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
button{font:inherit; cursor:pointer; border:0; border-radius:10px; padding:12px 18px; font-weight:600}
.btn{background:var(--coral); color:#1a1d22}
.btn:hover{background:var(--coral-l)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.ghost:hover{color:var(--txt); border-color:var(--muted)}
.danger{background:var(--danger); color:#fff}
.note{font-size:13px; color:var(--muted); margin-top:10px}
.err{color:#fca5a5; font-size:13px; margin-top:10px; min-height:18px}
a{color:var(--coral-l)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; background:#12161c; border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--coral-l)}
/* admin sections */
.section{border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-top:14px}
.section h2{display:flex; align-items:center; gap:8px}
.badge{font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px}
.badge.on{background:var(--green-l); color:#04150b} .badge.off{background:#3a4150; color:var(--muted)}
.kvline{color:var(--muted); font-size:14px; margin:6px 0}
.kvline b{color:var(--txt)}
/* folder picker */
.crumbs{display:flex; flex-wrap:wrap; gap:4px; font-size:13px; color:var(--muted); margin:10px 0}
.crumbs button{background:none; color:var(--coral-l); padding:2px 4px; font-weight:600}
.list{border:1px solid var(--line); border-radius:12px; max-height:280px; overflow:auto}
.item{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line)}
.item:last-child{border-bottom:0}
.item .name{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.item .name:hover{color:var(--coral-l)}
.item small{color:var(--muted)}
.pick{padding:7px 12px; font-size:13px}
.empty{padding:22px; text-align:center; color:var(--muted)}
/* kiosk */
.stage{display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center}
.caption{font-size:clamp(20px,4vw,34px); font-weight:700; margin:0 0 4px; max-width:90vw}
.binwrap{cursor:pointer; user-select:none; line-height:0; transition:transform .12s; color:var(--binline)}
.binwrap:hover{transform:translateY(-4px) scale(1.02); color:var(--coral)}
.binwrap:active{transform:scale(.97)}
.bin{width:min(58vw,58vh); height:auto; max-width:460px; filter:drop-shadow(0 22px 34px rgba(0,0,0,.45))}
#glid{transform-box:fill-box; transform-origin:left bottom; transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.emptying #glid{transform:rotate(-42deg)}
.binwrap.emptying{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.trashbit{opacity:0}
.emptying .trashbit{animation:fall .9s ease-in forwards}
@keyframes fall{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(240px) rotate(140deg)}}
.foot{position:fixed; bottom:14px; left:0; right:0; text-align:center; color:var(--muted); font-size:12.5px}
.foot a{color:var(--muted)}
.status{min-height:24px; font-size:15px; color:var(--muted)}
.status.ok{color:var(--green-l)} .status.bad{color:#fca5a5}
/* modal + spinner */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
.modal{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; max-width:440px; width:100%}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:var(--coral);border-radius:50%;display:inline-block;animation:sp .8s linear infinite;vertical-align:-3px}
@keyframes sp{to{transform:rotate(360deg)}}