/* =========================================================
   Theme variables (dark + light)
   ========================================================= */

:root{
  --bg:#0b0f14;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --muted2:rgba(255,255,255,.45);

  --primary:#60a5fa;
  --danger:#ef4444;
  --ok:#22c55e;

  --border:rgba(255,255,255,.12);
  --outline-accent:rgba(96,165,250,.65);

  --surface-1:rgba(17,24,39,.70);
  --surface-2:rgba(15,23,42,.75);
  --surface-3:rgba(15,23,42,.70);
  --surface-modal:rgba(17,24,39,.92);

  --btn-bg:rgba(255,255,255,.06);
  --btn-bg-hover:rgba(255,255,255,.10);
  --btn-primary-bg:rgba(96,165,250,.15);
  --btn-primary-bg-hover:rgba(96,165,250,.22);
  --btn-danger-bg:rgba(239,68,68,.12);
  --btn-danger-bg-hover:rgba(239,68,68,.18);

  --topbar-bg:rgba(11,15,20,.72);
  --modal-backdrop:rgba(0,0,0,.55);

  --radius:16px;
  --radius-sm:12px;
  --control-h:40px;
  --gap:12px;
}

:root[data-theme="light"]{
  --bg:#f6f7fb;
  --text:rgba(15,23,42,.92);
  --muted:rgba(15,23,42,.68);
  --muted2:rgba(15,23,42,.52);

  --primary:#2563eb;
  --danger:#dc2626;
  --ok:#16a34a;

  --border:rgba(15,23,42,.12);
  --outline-accent:rgba(37,99,235,.55);

  --surface-1:rgba(255,255,255,.86);
  --surface-2:rgba(255,255,255,.94);
  --surface-3:rgba(255,255,255,.90);
  --surface-modal:rgba(255,255,255,.96);

  --btn-bg:rgba(15,23,42,.04);
  --btn-bg-hover:rgba(15,23,42,.08);
  --btn-primary-bg:rgba(37,99,235,.12);
  --btn-primary-bg-hover:rgba(37,99,235,.18);
  --btn-danger-bg:rgba(220,38,38,.12);
  --btn-danger-bg-hover:rgba(220,38,38,.18);

  --topbar-bg:rgba(246,247,251,.88);
  --modal-backdrop:rgba(15,23,42,.35);
}

/* =========================================================
   Base
   ========================================================= */

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:14px;
}

.container{ max-width:1100px; margin:0 auto; padding:16px; }
.container.narrow{ max-width:520px; padding-top:48px; }
.bg{ background-color:var(--bg); }

/* =========================================================
   Topbar
   ========================================================= */

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

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

.brand{ font-weight:800; letter-spacing:.2px; font-size:18px; }
.topbar-actions{ display:flex; gap:8px; align-items:center; }
.inline{ display:inline; }

/* =========================================================
   Search
   ========================================================= */

.searchbar{ display:flex; align-items:center; gap:12px; padding:10px 0 16px; }
.searchbar input[type="search"]{
  width:100%;
  height:var(--control-h);
  padding:0 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  outline:none;
}
.searchbar input::placeholder{ color:var(--muted2); }

/* =========================================================
   Panels / cards
   ========================================================= */

.panel{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
}

.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.panel-header h2{ margin:0; font-size:16px; }

.panel-header-actions{ display:inline-flex; gap:8px; align-items:center; }

.card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}

.card-header h1{ margin:0; font-size:22px; }
.card-header p{ margin:6px 0 0; }

/* =========================================================
   Text helpers
   ========================================================= */

.muted{ color:var(--muted); }
.small{ font-size:12px; }
.hint{ margin-top:6px; }
code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* =========================================================
   Buttons / inputs
   ========================================================= */

.btn{
  height:var(--control-h);
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text);
  cursor:pointer;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn:hover{ background:var(--btn-bg-hover); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.btn.primary{
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background:var(--btn-primary-bg);
}
.btn.primary:hover{ background:var(--btn-primary-bg-hover); }

.btn.danger{
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  background:var(--btn-danger-bg);
}
.btn.danger:hover{ background:var(--btn-danger-bg-hover); }

input,select,textarea{
  width:100%;
  min-height:var(--control-h);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  outline:none;
  font-size:14px;
}
textarea{ resize:vertical; }

/* =========================================================
   Flash / alerts
   ========================================================= */

.flash{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
}
.flash.ok{
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}
.flash.err{
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.alert{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.hidden{ display:none; }

/* =========================================================
   Sections within Links pane
   ========================================================= */

.sections-links{ display:grid; gap:14px; margin-top:14px; }

.section-block{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  background:var(--surface-2);
}

.section-block-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-radius:14px;
  background:var(--surface-3);
}
.section-block-header.drag-over{
  outline:2px dashed var(--outline-accent);
  outline-offset:3px;
}

.section-title-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
}
.grab{
  cursor:grab;
  user-select:none;
  opacity:.8;
}
.pill{
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--muted);
}

.section-actions{
  display:inline-flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* =========================================================
   Links list
   ========================================================= */

.link-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:grid;
  gap:12px;
}

.link-item{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
  background:var(--surface-3);
}
.link-item.drag-over{
  outline:2px dashed var(--outline-accent);
  outline-offset:3px;
}

.link-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.handle{
  width:20px;
  text-align:center;
  padding-top:6px;
  opacity:0;
  transition: opacity .12s ease;
}
.link-item:hover .handle{ opacity:.7; }

.icon{
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--btn-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.grow{ flex:1; min-width:0; }

.link-title a{
  font-size:16px;
  font-weight:750;
  letter-spacing:.1px;
  color:var(--text);
  text-decoration:none;
}
.link-title a:hover{ color:var(--primary); }

.meta{ margin-top:2px; }
.desc{ margin-top:8px; color:var(--muted); font-size:13px; line-height:1.35; }
.url{ margin-top:8px; color:var(--muted2); font-size:12px; word-break:break-all; }

.link-actions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.mini-select{
  height:var(--control-h);
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:14px;
}

/* =========================================================
   Modal
   ========================================================= */

.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  z-index:50;
}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:var(--modal-backdrop);
}
.modal-card{
  position:relative;
  width:min(560px, 100%);
  background:var(--surface-modal);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.modal-header h3{ margin:0; font-size:16px; }
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

/* =========================================================
   Spinner
   ========================================================= */

.spinner{
  display:none;
  width:14px;
  height:14px;
  border-radius:999px;
  border:2px solid var(--muted2);
  border-top-color:var(--text);
  animation:spin .8s linear infinite;
}
.btn.loading .spinner{ display:inline-block; }

@keyframes spin{ to{ transform:rotate(360deg); } }