:root{
  --bg:#060710;
  --card:#0b0d1b;
  --text:rgba(255,255,255,.94);
  --muted:rgba(255,255,255,.70);
  --cyan:#3bf7ff;
  --mag:#ff2bd6;
  --green:#43ff8f;
  --red:#ff3b5f;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}

.bg{
  position:fixed; inset:0;
  background:
    radial-gradient(900px 500px at 10% 10%, rgba(59,247,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(255,43,214,.16), transparent 60%),
    radial-gradient(900px 500px at 40% 90%, rgba(67,255,143,.10), transparent 60%);
  pointer-events:none;
}

.wrap{max-width:1180px;margin:0 auto;padding:14px 12px 24px;position:relative}
@media (max-width: 980px){ .wrap{padding:8px 10px 16px;} }

.title{margin:0;font-size:30px;line-height:1.05;letter-spacing:.3px;text-shadow:0 0 22px rgba(59,247,255,.18)}
.muted{color:var(--muted);margin:6px 0 0;font-size:14px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.row{display:flex;gap:10px;align-items:center}
.between{justify-content:space-between}

.btn{
  appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text);
  border-radius:12px;padding:10px 14px;font-weight:800;cursor:pointer;
  transition:transform .05s ease,box-shadow .15s ease,border-color .15s ease;
}
.btn:hover{border-color:rgba(255,255,255,.28)}
.btn:active{transform:translateY(1px) scale(.995)}
.btn.primary{background:linear-gradient(90deg, rgba(59,247,255,.18), rgba(255,43,214,.18));border-color:rgba(59,247,255,.35);box-shadow:0 0 0 1px rgba(59,247,255,.12),0 14px 30px rgba(59,247,255,.08)}
.btn.ghost{background:transparent}
.btn.good{border-color:rgba(67,255,143,.35);box-shadow:0 0 18px rgba(67,255,143,.12)}
.btn.bad{border-color:rgba(255,59,95,.35);box-shadow:0 0 18px rgba(255,59,95,.12)}

.menuBtn{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px}

input,textarea{
  padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.24);color:var(--text);outline:none;width:100%
}
input:focus,textarea:focus{border-color:rgba(59,247,255,.45);box-shadow:0 0 0 4px rgba(59,247,255,.10)}

.pill{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.22);font-size:13px;color:var(--text)}

.layout{display:grid;grid-template-columns: 300px 1fr;gap:12px;align-items:start}

.drawerBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.56);display:none;z-index:20}
.sidebar{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;z-index:25}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:min(86vw,360px);
    max-height:none;transform:translateX(-110%);transition:transform .18s ease;
    border-radius:0 16px 16px 0;
  }
  .sidebar.show{transform:translateX(0)}
  .drawerBackdrop.show{display:block}
}

.menuBlock{margin-top:10px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14)}
.menuTitle{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}

.history{display:flex;flex-direction:column;gap:10px}
.hitem{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18);cursor:pointer}
.hitem:hover{border-color:rgba(255,255,255,.24)}
.thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.10)}
.hmeta{flex:1;min-width:0}
.hmeta .line1{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmeta .line2{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hstatus{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;border:1px solid rgba(255,255,255,.16)}
.hstatus.ok{border-color:rgba(67,255,143,.35)}
.hstatus.no{border-color:rgba(255,59,95,.35)}
.hstatus.na{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6)}

.mainCard{min-height:72vh}
.section{display:none}
.section.active{display:block}

.suggest{position:relative}
.suggestBox{position:absolute;z-index:14;left:0;right:0;top:calc(100% + 8px);background:rgba(5,6,14,.98);border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.suggestItem{padding:10px 12px;display:flex;justify-content:space-between;gap:10px;cursor:pointer}
.suggestItem:hover{background:rgba(255,255,255,.06)}
.suggestItem .t{font-weight:800}
.suggestItem .c{color:var(--muted);font-size:12px}

.saved{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.savedTag{display:flex;align-items:center;gap:6px}
.savedTag .x{padding:6px 8px}

.gridBox{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.tile{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);cursor:pointer;position:relative}
.tile:hover{border-color:rgba(255,255,255,.28)}
.tile img{width:100%;height:170px;object-fit:cover;display:block}
.tileBar{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;display:flex;justify-content:space-between;gap:10px;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));font-size:12px;color:rgba(255,255,255,.9)}

.empty{margin-top:14px;border-color:rgba(255,255,255,.10);background:rgba(0,0,0,.12)}

.modalBackdrop{position:fixed;inset:0;background:rgba(0,0,0,.70);display:none;z-index:40}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(980px,96vw);max-height:92vh;overflow:auto;display:none;z-index:45; padding-top:8px}
.modal.show,.modalBackdrop.show{display:block}
.modalHead{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:0;background:rgba(6,7,16,.85);backdrop-filter:blur(10px);padding:12px;border-bottom:1px solid rgba(255,255,255,.10)}
.modalX{position:absolute; top:10px; right:10px; z-index:60; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px}
.modalBody{padding:12px}
@media (max-width: 980px){ .modal{left:0;right:0;bottom:0;top:auto;transform:none;width:100%;border-radius:16px 16px 0 0;max-height:92vh} }

.imgwrap{display:flex;justify-content:center;align-items:center;padding:8px 0;position:relative}
.imgwrap img,.imgwrap video{max-width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.55)}

.comment{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.16)}

.swipeOverlay{position:absolute;inset:0;border-radius:18px;pointer-events:none;opacity:0;transition:opacity .12s ease}
.swipeOverlay.left{background:rgba(255,59,95,.22)}
.swipeOverlay.right{background:rgba(67,255,143,.18)}
.swipeHint{position:absolute;left:12px;bottom:12px;font-size:12px;color:rgba(255,255,255,.78);background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;backdrop-filter:blur(6px)}

.fadeDown{animation:fadeDown .18s ease-out}
@keyframes fadeDown{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}