*{box-sizing:border-box}
:root{--bg:#0f0f0f;--panel:#1a1a1a;--line:#2a2a2a;--text:#f0f0f0;--muted:#8a8a8a}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.35 Inter,system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.top{position:sticky;top:0;z-index:20;background:#0b0b0b;border-bottom:2px solid #222}
.top-inner{max-width:1320px;margin:0 auto;padding:10px 14px;display:flex;align-items:center;gap:12px}
.logo{font-weight:900;letter-spacing:.06em;font-size:18px}
.logo span{font-weight:700;color:#ff5a3c}
.sub{color:var(--muted);font-size:12px}
.top-actions{margin-left:auto}
.btn{border:1px solid #2a2a2a;background:#1f1f1f;color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:700;font-size:13px}
.btn.primary{background:#5865f2;border-color:#5865f2;color:#fff}
.btn.small{padding:6px 10px;font-size:12px}
.btn.danger{color:#ff7a85;border-color:#3a1f27;background:#1e1215}
#app{max-width:1320px;margin:0 auto;padding:18px 14px 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden;cursor:pointer}
.card:hover{border-color:#3a3a3a}
.card-head{padding:12px 14px 0}
.card-title{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-desc{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;min-height:16px}
.card-preview{height:148px;display:flex;gap:4px;padding:10px 14px;overflow:hidden;align-items:stretch}
.mini{flex:0 0 92px;width:92px;border-radius:6px;overflow:hidden;background:#0f0f0f;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center}
.mini img{width:100%;height:100%;object-fit:cover}
.mini .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:10px;text-align:center;padding:4px;line-height:1.1}
.mini .ph small{font-size:8px;opacity:.8;font-weight:600}
.card-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid #2a2a2a;color:var(--muted);font-size:12px}
.empty{padding:36px;text-align:center;color:var(--muted);border:1px dashed #2a2a2a;border-radius:12px;margin-top:16px}
.empty h3{color:var(--text);margin:0 0 6px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);margin:4px 0 10px;cursor:pointer;font-size:13px}
.back:hover{color:var(--text)}
.tier-head{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.tier-title{font-size:28px;font-weight:900;letter-spacing:-.02em;line-height:1.1}
.tier-meta{color:var(--muted);font-size:12px;margin-top:4px}
.tier-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.search{width:320px;max-width:100%;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:999px;padding:9px 14px;color:var(--text);outline:none}
.search:focus{border-color:#3a3a3a}
.search::placeholder{color:#6a6a6a}
.board{background:#000;border:2px solid #000;overflow:hidden}
.row{display:flex;min-height:100px;border-bottom:1px solid #000;background:#1a1a1e}
.row:last-child{border-bottom:none}
.row-label{width:96px;min-width:96px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:28px;letter-spacing:.02em;color:#000;flex-shrink:0}
.row[data-tier="S"] .row-label{background:#ff7f7f}
.row[data-tier="A"] .row-label{background:#ffbf7f}
.row[data-tier="B"] .row-label{background:#ffdf7f}
.row[data-tier="C"] .row-label{background:#ffff7f}
.row[data-tier="D"] .row-label{background:#bfff7f}
.row[data-tier="F"] .row-label{background:#7fffff}
.row-drop{flex:1;display:flex;flex-wrap:wrap;gap:0;padding:0;align-content:flex-start;background:#1a1a1e;min-height:100px}
.row-drop.drag-over{background:#222230;outline:2px dashed #5865f2;outline-offset:-2px}
/* board cards - compact 96x100 like TierMaker rows */
.board .item{width:96px;height:100px;flex-shrink:0;background:#111;border-right:1px solid #000;border-bottom:1px solid #000;cursor:grab;display:flex;flex-direction:column;position:relative;user-select:none;overflow:hidden}
/* pool cards - 2x bigger: 192x200 */
.pool .item{width:192px;height:220px;flex-shrink:0;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;cursor:grab;display:flex;flex-direction:column;position:relative;user-select:none;overflow:hidden}
.item:active{cursor:grabbing}
.item.dragging{opacity:.35}
.item .poster{width:100%;height:100%;object-fit:cover;display:block;background:#111}
.board .item .poster{height:100px}
.pool .item .poster{height:220px}
.item .fallback{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:8px;line-height:1.1}
.board .item .fallback{height:100px}
.pool .item .fallback{height:220px}
.board .item .fallback .fname{font-weight:900;font-size:11px;word-break:break-word}
.pool .item .fallback .fname{font-weight:900;font-size:16px;word-break:break-word}
.board .item .fallback .fsub{font-size:9px;opacity:.85;margin-top:3px;word-break:break-word}
.pool .item .fallback .fsub{font-size:11px;opacity:.85;margin-top:6px;word-break:break-word}
/* board caption small, pool caption bigger - no clamp truncation that cuts half letter */
.board .item .caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent, rgba(0,0,0,.94) 38%);color:#fff;font-size:9px;font-weight:800;line-height:1.2;padding:18px 5px 5px;text-align:center;word-break:break-word;white-space:normal;overflow:hidden;display:block;min-height:28px}
.board .item .caption span{display:block;font-size:7px;font-weight:500;color:#ccc;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pool .item .caption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent, rgba(0,0,0,.94) 32%);color:#fff;font-size:13px;font-weight:800;line-height:1.2;padding:28px 8px 8px;text-align:center;word-break:break-word;white-space:normal;overflow:hidden;display:block;min-height:42px}
.pool .item .caption span{display:block;font-size:10px;font-weight:500;color:#ddd;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:999px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.35);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;opacity:0;z-index:2}
.item:hover .x{opacity:1}
.pool{margin-top:12px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:14px}
.pool-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pool-drop{display:flex;flex-wrap:wrap;gap:12px;min-height:120px;align-content:flex-start}
.pool-drop.drag-over{outline:2px dashed #5865f2;outline-offset:2px;border-radius:6px}
.hint{font-size:12px;color:var(--muted);margin-top:8px}
.muted{font-size:12px;color:var(--muted)}
dialog{border:1px solid #2a2a2a;background:#141414;color:var(--text);border-radius:12px;padding:18px;max-width:420px;width:calc(100% - 24px)}
dialog::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
dialog h3{margin:0 0 12px;font-size:15px}
dialog label{display:flex;flex-direction:column;gap:6px;margin:10px 0;font-size:12px;color:var(--muted)}
dialog input{background:#0f0f0f;border:1px solid #2a2a2a;border-radius:10px;padding:10px 12px;color:var(--text);outline:none}
dialog menu{display:flex;justify-content:flex-end;gap:8px;margin:14px 0 0;padding:0}
@media(max-width:640px){
  .row-label{width:64px;min-width:64px;font-size:20px}
  .board .item{width:84px;height:88px}
  .board .item .poster,.board .item .fallback{height:88px}
  .pool .item{width:140px;height:170px}
  .pool .item .poster,.pool .item .fallback{height:170px}
  .pool .item .caption{font-size:11px}
  .tier-title{font-size:22px}
}