/* styles.css — v6.11 (themes + background controls + high-contrast fix) */

/* ===== Base (Cyberpunk) ===== */
:root{
  --bg:#05060a; --fg:#c8f7ff; --neon1:#00f5d4; --neon2:#8a2be2; --accent:#00d1ff; --header:#84ffe6;
  --glass:rgba(8,10,16,.55); --border:rgba(0,255,220,.35);
  --bg-grad: radial-gradient(1200px 600px at 50% 60%, #0b0f1a 0%, #06070c 40%, var(--bg) 100%);
  --card-bg: linear-gradient(180deg, rgba(10,14,20,.74), rgba(6,8,12,.68));
  --card-border: var(--border);
  --link-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --link-border: color-mix(in srgb, var(--accent) 35%, transparent);
  --link-hover-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --link-hover-border: var(--accent);
}
:root[data-theme="cyberpunk"]{
  --bg:#05060a; --fg:#c8f7ff; --neon1:#00f5d4; --neon2:#8a2be2; --accent:#00d1ff; --header:#84ffe6;
  --glass:rgba(8,10,16,.55); --border:rgba(0,255,220,.35);
  --bg-grad: radial-gradient(1200px 600px at 50% 60%, #0b0f1a 0%, #06070c 40%, var(--bg) 100%);
  --card-bg: linear-gradient(180deg, rgba(10,14,20,.74), rgba(6,8,12,.68));
  --card-border: var(--border);
  --link-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --link-border: color-mix(in srgb, var(--accent) 35%, transparent);
  --link-hover-bg: color-mix(in srgb, var(--accent) 18%, transparent);
  --link-hover-border: var(--accent);
}

/* ===== Dark theme variants ===== */
:root[data-theme="midnight"]{ --bg:#070b13; --fg:#e6f0ff; --neon1:#4fc3f7; --neon2:#1565c0; --accent:#64b5f6; --header:#b3e5fc; --glass:rgba(10,12,20,.5); --border:rgba(100,181,246,.35); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #0c1522 0%, #08101d 45%, var(--bg) 100%); }
:root[data-theme="solar"]{ --bg:#0a0906; --fg:#ffe8c8; --neon1:#ffcc00; --neon2:#ff6f00; --accent:#ffb300; --header:#ffe082; --glass:rgba(32,24,6,.5); --border:rgba(255,196,0,.35); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #1a1406 0%, #0e0b04 45%, var(--bg) 100%); }
:root[data-theme="ocean"]{ --bg:#051015; --fg:#dbfbff; --neon1:#00e5ff; --neon2:#00bfa5; --accent:#1de9b6; --header:#a7ffeb; --glass:rgba(6,18,22,.5); --border:rgba(0,229,255,.35); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #0b2029 0%, #08171e 45%, var(--bg) 100%); }
:root[data-theme="violet"]{ --bg:#0b0610; --fg:#f5e8ff; --neon1:#c77dff; --neon2:#7b2cbf; --accent:#ff6ad5; --header:#eabfff; --glass:rgba(16,8,24,.5); --border:rgba(199,125,255,.35); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #140a1e 0%, #0c0715 45%, var(--bg) 100%); }
:root[data-theme="contrast"]{ --bg:#000; --fg:#fff; --neon1:#00ffff; --neon2:#00ffff; --accent:#00ffff; --header:#fff; --glass:rgba(255,255,255,.08); --border:rgba(0,255,255,.7); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #101010 0%, #050505 45%, var(--bg) 100%); }
:root[data-theme="gruvbox-dark"]{ --bg:#1d2021; --fg:#ebdbb2; --neon1:#fabd2f; --neon2:#d3869b; --accent:#83a598; --header:#fbf1c7; --glass:rgba(10,12,16,.55); --border:rgba(250,189,47,.28); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #2b2f30 0%, #1e2223 45%, var(--bg) 100%); }
:root[data-theme="solarized-dark"]{ --bg:#002b36; --fg:#eee8d5; --neon1:#268bd2; --neon2:#6c71c4; --accent:#2aa198; --header:#93a1a1; --glass:rgba(0,20,24,.55); --border:rgba(38,139,210,.35); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #073642 0%, #01303a 45%, var(--bg) 100%); }
:root[data-theme="nord-dark"]{ --bg:#2e3440; --fg:#eceff4; --neon1:#88c0d0; --neon2:#b48ead; --accent:#5e81ac; --header:#d8dee9; --glass:rgba(23,27,35,.55); --border:rgba(94,129,172,.35); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #3b4252 0%, #2b313d 45%, var(--bg) 100%); }

/* Harmonize darks */
:root[data-theme="midnight"],
:root[data-theme="solar"],
:root[data-theme="ocean"],
:root[data-theme="violet"],
:root[data-theme="contrast"],
:root[data-theme="gruvbox-dark"],
:root[data-theme="solarized-dark"],
:root[data-theme="nord-dark"]{
  --card-bg: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, black),
                                   color-mix(in srgb, var(--bg) 40%, black));
  --card-border: color-mix(in srgb, var(--accent) 30%, transparent);
  --link-bg: color-mix(in srgb, var(--accent) 7%, transparent);
  --link-border: color-mix(in srgb, var(--accent) 45%, transparent);
  --link-hover-bg: color-mix(in srgb, var(--accent) 24%, transparent);
  --link-hover-border: color-mix(in srgb, var(--accent) 85%, white);
}

/* ===== Light theme variants ===== */
:root[data-theme="paper"]{ --bg:#f8f9fb; --fg:#1b2330; --neon1:#005dff; --neon2:#7a00ff; --accent:#0a66ff; --header:#0d47a1; --glass:rgba(255,255,255,.72); --border:rgba(0,0,0,.15); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #ffffff 0%, #eef3fb 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="sand"]{ --bg:#fff7ed; --fg:#2c1a07; --neon1:#ff8a00; --neon2:#ff3d00; --accent:#ff6d00; --header:#8a3d00; --glass:rgba(255,255,255,.72); --border:rgba(255,140,0,.25); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #fffaf2 0%, #fff1dc 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="mint"]{ --bg:#effcfb; --fg:#0b2d2a; --neon1:#00b8a9; --neon2:#12c2e9; --accent:#00bcd4; --header:#006064; --glass:rgba(255,255,255,.72); --border:rgba(0,188,212,.28); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #ffffff 0%, #e6fbfa 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.1); --link-bg: rgba(0,0,0,.03); --link-border: rgba(0,0,0,.16); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="slate-light"]{ --bg:#f2f5f9; --fg:#0b1526; --neon1:#1976d2; --neon2:#651fff; --accent:#0d6efd; --header:#0d6efd; --glass:rgba(255,255,255,.72); --border:rgba(13,110,253,.22); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #ffffff 0%, #eef3fa 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="rose-light"]{ --bg:#fff1f4; --fg:#3d1020; --neon1:#ff5c93; --neon2:#c2185b; --accent:#ff77a9; --header:#b0003a; --glass:rgba(255,255,255,.72); --border:rgba(255,119,169,.28); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #ffffff 0%, #ffe7ee 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="solarized-light"]{ --bg:#fdf6e3; --fg:#073642; --neon1:#268bd2; --neon2:#6c71c4; --accent:#859900; --header:#586e75; --glass:rgba(255,255,255,.72); --border:rgba(38,139,210,.28); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #fffdf6 0%, #f6efd9 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="nord-light"]{ --bg:#eceff4; --fg:#2e3440; --neon1:#5e81ac; --neon2:#b48ead; --accent:#88c0d0; --header:#4c566a; --glass:rgba(255,255,255,.72); --border:rgba(136,192,208,.28); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #ffffff 0%, #e9eef7 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }
:root[data-theme="gruvbox-light"]{ --bg:#fbf1c7; --fg:#3c3836; --neon1:#b57614; --neon2:#8f3f71; --accent:#98971a; --header:#7c6f64; --glass:rgba(255,255,255,.72); --border:rgba(152,151,26,.28); --bg-grad: radial-gradient(1200px 600px at 50% 60%, #fff7d6 0%, #f3e7b4 45%, var(--bg) 100%); --card-bg: rgba(255,255,255,.96); --card-border: rgba(0,0,0,.12); --link-bg: rgba(0,0,0,.035); --link-border: rgba(0,0,0,.18); --link-hover-bg: color-mix(in srgb, var(--accent) 8%, white); --link-hover-border: color-mix(in srgb, var(--accent) 70%, black); }

/* ===== Layout & components ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg-grad);color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow:auto;
}
.scanlines::before,.scanlines::after{content:"";position:fixed;inset:0;pointer-events:none;mix-blend-mode:overlay}
.scanlines::before{background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.06) 0 1px, rgba(0,0,0,0) 2px 3px);opacity:.05}
.scanlines::after{background:radial-gradient(ellipse at 50% 10%, rgba(0,255,255,.08), rgba(0,0,0,0) 40%),radial-gradient(ellipse at 50% 90%, rgba(138,43,226,.07), rgba(0,0,0,0) 40%);opacity:.45;filter:contrast(110%)}
.hidden{display:none !important}

/* Background canvas */
#bg{position:fixed;inset:0;z-index:0;opacity:.18;display:block;pointer-events:none}
#bg.off{display:none}

.container{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0) + .5rem) clamp(.75rem,2.5vw,2rem) calc(env(safe-area-inset-bottom,0) + 1rem)}
.header{position:sticky;top:.25rem;z-index:2;display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;backdrop-filter:blur(8px);background:color-mix(in srgb, var(--bg) 65%, transparent);padding:.5rem;border:1px solid color-mix(in srgb, var(--border) 80%, transparent);border-radius:12px}
.title{
  font-size:clamp(18px,3.6vw,32px);letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(90deg,var(--neon1),var(--accent),var(--neon2));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 8px color-mix(in srgb, var(--accent) 35%, transparent),0 0 24px color-mix(in srgb, var(--neon2) 25%, transparent);
}
.controls{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
button,.pill, select{
  background:var(--glass);border:1.5px solid var(--border);color:var(--fg);
  -webkit-text-fill-color: currentColor; /* iOS Safari visibility */
  padding:.55rem .85rem;border-radius:999px;cursor:pointer;backdrop-filter:blur(6px);
  transition:transform .08s ease,box-shadow .2s ease,border-color .2s ease;
  font-weight:700;letter-spacing:.06em
}
select{appearance:none;padding-right:2rem;background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%),linear-gradient(to right,transparent,transparent);background-position:calc(100% - 18px) calc(1em - 2px),calc(100% - 13px) calc(1em - 2px),100% 0;background-size:5px 5px,5px 5px,2.5em 2.5em;background-repeat:no-repeat}
button:hover,select:hover{transform:translateY(-1px);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 25%, transparent);border-color:var(--accent)}
input[type="search"]{
  background:var(--glass);border:1.5px solid var(--border);color:var(--fg);outline:none;
  padding:.6rem .9rem;border-radius:12px;width:min(100%,420px);flex:1 1 240px;min-width:200px
}
.toggle{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:999px; border:1.5px solid var(--border); background:var(--glass);}
.toggle input{accent-color:var(--accent)}

.grid{margin-top:.75rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;padding-bottom:1rem;}
.card{display:flex;flex-direction:column;min-width:0;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:16px;padding:1rem;min-height:120px;box-shadow:0 0 10px color-mix(in srgb, var(--accent) 12%, transparent)}
.card.drop-hover{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:16px; }
.card h3{color:var(--header);margin:0 0 .6rem; font-size:clamp(.95rem,1.8vw,1.1rem); letter-spacing:.16em; text-transform:uppercase;text-shadow:0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);border-bottom:1px dashed color-mix(in srgb, var(--accent) 35%, transparent);padding-bottom:.4rem}

.list{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.row{display:flex;gap:.5rem;align-items:stretch}
.link{flex:1 1 auto;min-width:0;text-decoration:none;color:var(--fg);padding:.5rem .6rem;border-radius:10px;border:1.5px solid var(--link-border); background:var(--link-bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.link:hover{background:var(--link-hover-bg);border-color:var(--link-hover-border);box-shadow:0 0 0 2px color-mix(in srgb, var(--link-hover-border) 30%, transparent)}
.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link-title{overflow-wrap:anywhere;word-break:break-word;white-space:normal;display:block}
.badge{opacity:.75;font-size:.8em;letter-spacing:.1em;float:right;margin-left:.6rem;mix-blend-mode:normal}
.no-details .badge{display:none}

.tools{display:flex;gap:.35rem;flex:0 0 auto}
.icon-btn{background:transparent;border:1px solid var(--border);border-radius:8px;padding:.35rem .5rem;cursor:pointer;color:var(--fg)}
.icon-btn.handle{ cursor:grab; } .icon-btn.handle:active{ cursor:grabbing; }
.row-handle{ cursor:grab; } .row-handle:active{ cursor:grabbing; }
.row.drop-hover .link{ outline:2px dashed var(--accent); outline-offset:2px; }
.list.drop-hover{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:12px; padding:.8rem; }

.toast{position:fixed;top:.75rem;left:50%;transform:translateX(-50%);z-index:9999;background:var(--glass);border:1px solid var(--border);padding:.6rem .9rem;border-radius:10px;backdrop-filter:blur(6px)}

footer{opacity:.6;padding:.6rem .25rem;font-size:.78rem;text-align:center}
@media (max-width:520px){ .grid{grid-template-columns:1fr} }



/* High-contrast select visibility (quick fix) */
:root[data-theme="contrast"] select {
  color:#fff; -webkit-text-fill-color:#fff; border-color:rgba(0,255,255,.7);
}
:root[data-theme="contrast"] select option {
  color:#000; background:#fff; /* improves dropdown list readability */
}