:root{
  --bg:#0e1726; --card:#152238; --ink:#e8eefc; --muted:#9fb0cc;
  --line:#26364f; --accent:#2f81f7; --ok:#1f7a4d; --okbg:#12301f;
  --err:#8a2b2b; --errbg:#2c1414; --field:#0e1a2c;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#0b1220,#0e1726); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; padding:20px;
}
.card{
  width:100%; max-width:440px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:28px 26px; box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.brand{font-size:26px; font-weight:800; letter-spacing:.5px; margin:0}
.brand span{color:var(--accent)}
.brand small{font-size:14px; font-weight:600; color:var(--muted); letter-spacing:2px}
.site{color:var(--muted); margin:4px 0 20px; font-size:14px}
h2{font-size:18px; margin:18px 0 6px}
.hint{color:var(--muted); font-size:14px; margin:0 0 16px}
.hint.small{font-size:12px; margin-top:14px}
code{background:var(--field); padding:1px 6px; border-radius:5px; font-size:13px}
label{display:block; margin:0 0 14px; font-size:13px; color:var(--muted)}
input[type=text],input[type=password],input[type=file]{
  display:block; width:100%; margin-top:6px; padding:11px 12px; font-size:15px;
  background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:9px;
}
input:focus{outline:2px solid var(--accent); outline-offset:1px}
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:44px}
.pw-toggle{
  position:absolute; top:6px; right:6px; width:34px; height:34px; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;
  background:transparent; border:0; border-radius:7px; cursor:pointer; opacity:.6;
}
.pw-toggle:hover{opacity:1; background:var(--line)}
.pw-toggle.is-on{opacity:1}
button{
  width:100%; padding:12px; font-size:15px; font-weight:700; color:#fff; cursor:pointer;
  background:var(--accent); border:0; border-radius:9px; margin-top:4px;
}
button:hover{filter:brightness(1.08)}
.flash{padding:12px 14px; border-radius:9px; margin:0 0 18px; font-size:14px; border:1px solid}
.flash.ok{background:var(--okbg); border-color:var(--ok); color:#bff0d4}
.flash.err{background:var(--errbg); border-color:var(--err); color:#ffc9c9}
.filelist{margin:8px 0 0; padding-left:18px; font-size:12px; color:var(--muted); max-height:160px; overflow:auto}
.browser{background:var(--field); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 16px}
.crumbs{font-size:13px; margin-bottom:10px; word-break:break-word}
.crumbs a{color:var(--accent); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{color:var(--muted); margin:0 2px}
.folders{list-style:none; margin:0 0 12px; padding:0; max-height:220px; overflow:auto}
.folders li{margin:0}
.folder{display:block; padding:8px 10px; border-radius:7px; color:var(--ink); text-decoration:none; font-size:14px}
.folder:hover{background:var(--line)}
.folder.up{color:var(--muted)}
.folders .empty{padding:8px 10px; color:var(--muted); font-size:13px}
.newfolder{display:flex; gap:8px; align-items:stretch}
.newfolder input{margin-top:0}
.newfolder button{width:auto; white-space:nowrap; margin-top:0; padding:10px 14px}
button.ghost{background:transparent; border:1px solid var(--accent); color:var(--accent)}
button.ghost:hover{background:var(--accent); color:#fff; filter:none}
.target{font-size:14px; color:var(--muted); margin:0 0 12px}
.target code{color:var(--ink)}
.target em{color:var(--muted); font-style:normal}
.topbar{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--muted)}
.logout{color:var(--accent); text-decoration:none}
.logout:hover{text-decoration:underline}
footer{margin-top:22px; text-align:center; font-size:11px; color:var(--muted); opacity:.7}