:root{
  --bg:#0b0e13;
  --panel:#11161f;
  --panel-2:#0e131c;
  --text:#e8ecf3;
  --muted:#9aa3b2;
  --brand:#ffd400; /* yellow */
  --brand-weak:#ffd40026;
  --danger:#ff5d5d;
  --ring:#2a3242;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:radial-gradient(1200px 600px at 10% -10%, #141b29 0%, #0b0e13 40%),
             radial-gradient(1000px 500px at 100% 0%, #121826 0%, #0b0e13 60%);
  color:var(--text);
  font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
}
a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:28px 20px 80px}
header{display:flex; flex-direction:column; gap:6px; margin-bottom:18px}
.title{font-size:clamp(28px,7vw,54px);font-weight:900;letter-spacing:.3px}
.subtitle{font-size:clamp(14px,3.5vw,22px);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:3px}
.tagline{font-size:15px; color:var(--muted)}

.noscript{background:#ffefef;color:#400;padding:10px 14px;margin:0;text-align:center;font-weight:600}

.board{
  background:linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid var(--ring);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden
}

.board-head{
  position:sticky;top:0;z-index:2;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:16px;border-bottom:1px solid var(--ring)
}
.board-title{font-weight:800; letter-spacing:.2px}
.spacer{flex:1}
.badge{background:transparent; border:1px solid var(--ring); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)}

.btn{border:none;background:transparent;color:var(--text);padding:12px 14px;min-height:44px;border-radius:12px;cursor:pointer;border:1px solid var(--ring);transition:transform .04s ease,border-color .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.btn-primary{background:var(--brand); color:#121212; border-color:#0000; font-weight:800}
.btn-danger{border-color:var(--danger); color:var(--danger)}
.btn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.dropzone{margin:16px; padding:18px; border:1.5px dashed var(--ring); border-radius:14px; color:var(--muted); text-align:center;
          background:linear-gradient(180deg, #121722 0, #0f1420 100%)}
.dropzone.highlight{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-weak) inset}

.list{padding:16px;display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:12px;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.card{background:linear-gradient(180deg, #151b27 0, #141a26 100%); border:1px solid var(--ring); border-radius:16px; padding:12px; display:flex; align-items:center; gap:12px; position:relative; transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
.card.selected{ border-color:var(--brand); box-shadow:0 6px 24px var(--brand-weak); background:linear-gradient(180deg, rgba(255,212,0,0.08) 0, rgba(255,212,0,0.04) 100%) }
.card:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.favicon{width:20px; height:20px; border-radius:4px; background:#222}
.meta{display:flex; flex-direction:column; min-width:0}
.titleline{display:flex; align-items:center; gap:8px}
.card a{color:var(--text); text-decoration:none; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.url{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

.xbtn{margin-left:auto; background:transparent; border:none; cursor:pointer; font-size:18px; line-height:1; color:var(--brand); padding:6px; border-radius:10px}
.xbtn:hover{background:rgba(255,212,0,.1)}
.xbtn:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.footerhint{margin:12px 16px 18px; font-size:12px; color:var(--muted)}

.overlay{position:fixed; inset:0; display:none; align-items:center; justify-content:center; backdrop-filter:blur(8px); background:rgba(7,10,15,.55); z-index:50}
.overlay.show{display:flex}
.modal{width:min(560px, 92vw); background:linear-gradient(180deg, #141b28 0, #111824 100%); border:1px solid var(--ring); border-radius:16px; padding:18px; box-shadow:var(--shadow)}
.modal h3{margin:0 0 8px; font-size:20px}
.fields{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px}
.fields input{flex:1 1 260px; background:#0f1521; border:1px solid var(--ring); color:var(--text); padding:12px 14px; border-radius:12px; outline:none; box-shadow:inset 0 0 0 2px transparent; transition:box-shadow .15s ease, border-color .15s ease}
.fields input:focus{border-color:var(--brand); box-shadow:inset 0 0 0 2px var(--brand-weak)}
.modal .row{display:flex; gap:10px; justify-content:flex-end; margin-top:14px}
.hint{font-size:12px; color:var(--muted); margin-top:4px}

@media (max-width:900px){
  .container{padding:24px 14px 64px}
  .board-head{gap:8px}
  .board-head .btn{flex:1 1 160px}
  .badge{font-size:11px;padding:5px 8px}
  .list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media (max-width:560px){
  .container{padding:20px 12px 56px}
  .list{grid-template-columns:1fr}
  .dropzone{padding:14px;font-size:14px}
  .modal{width:96vw}
  .xbtn{min-width:40px;min-height:40px;padding:8px}
  .board-head .btn{flex:1 1 120px}
}