:root{
  --bg-0: #0f1724;
  --bg-1: linear-gradient(135deg,#0b1220 0%,#071126 100%);
  --card-bg: rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.06);
  --muted: rgba(255,255,255,0.55);
  --accent: #7dd3fc; /* default accent */
  --glass-blur: 8px;
  --radius: 14px;
  color-scheme: dark;
  color: #e6f0ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.06), transparent), radial-gradient(900px 400px at 90% 90%, rgba(192,132,252,0.05), transparent), var(--bg-1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:28px;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1100px;margin:0 auto 20px;padding:8px 12px}
.brand{font-weight:700;letter-spacing:0.6px}
.icon-btn{background:transparent;border:0;color:inherit;font-size:18px;padding:6px;border-radius:8px;cursor:pointer}
.container{max-width:1100px;margin:0 auto}
.glass{background:var(--card-bg);border:1px solid var(--card-border);backdrop-filter:blur(var(--glass-blur)) saturate(120%);box-shadow:0 6px 30px rgba(2,6,23,0.6);border-radius:var(--radius);padding:18px}
.hero{padding:28px;margin-bottom:18px}
.hero h1{margin:0;font-size:clamp(20px,3vw,32px)}
.hero .muted{color:var(--muted);margin-top:6px}
.controls{display:flex;gap:12px;align-items:center;padding:12px;margin-bottom:18px}
.controls input[type="search"]{flex:1;padding:10px 12px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:inherit;border-radius:10px;outline:none}
.compact-toggle{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}
.links-grid{display:grid;grid-template-columns:1fr;gap:12px}
.link-card{display:flex;align-items:center;gap:12px;text-decoration:none;padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 4px 18px rgba(2,6,23,0.5);color:inherit}
.link-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(2,6,23,0.6);border-color:rgba(255,255,255,0.06)}
.link-card .favicon{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));object-fit:cover}
.link-card .info{flex:1;min-width:0}
.link-card .title{font-weight:600;line-height:1.15;overflow:hidden;text-overflow:ellipsis}
.link-card .url{font-size:12px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.link-card .chev{font-size:14px;opacity:0.8}
.links-grid.compact{grid-template-columns:1fr}
.links-grid.compact .favicon{width:28px;height:28px} 
.settings-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:320px;max-width:calc(100% - 40px);max-height:calc(100vh - 80px);overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;padding:12px;box-shadow:0 12px 50px rgba(2,6,23,0.6);display:none;flex-direction:column;gap:12px;z-index:60;transition:transform 160ms cubic-bezier(.2,.9,.2,1),opacity 160ms ease;}
.settings-panel header{display:flex;justify-content:space-between;align-items:center}
.settings-body{display:flex;flex-direction:column;gap:12px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.setting-row.small{font-size:13px}
.options{display:flex;gap:8px}
.theme-btn{padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.03);background:transparent;color:inherit;cursor:pointer}
.theme-btn.active{outline:2px solid rgba(255,255,255,0.04)}
.colors button{width:34px;height:34px;border-radius:8px;border:0;cursor:pointer;box-shadow:inset 0 -6px 18px rgba(0,0,0,0.2)}
.settings-footer{font-size:12px;color:var(--muted);padding-top:6px}
.footer{margin-top:26px;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:640px){.links-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.topbar{padding:6px}}
/* theme helpers */
[data-theme="light"]{
  /* cool, airy background layers */
  --bg-0: #f8fafc;
  --bg-1: radial-gradient(800px 400px at 10% 10%, rgba(96,165,250,0.06), transparent), radial-gradient(600px 300px at 90% 90%, rgba(125,211,252,0.03), transparent), linear-gradient(135deg,#fbfdff,#eef6ff);

  /* surfaces & borders */
  --card-bg: rgba(255,255,255,0.90);
  --card-border: rgba(2,6,23,0.06);
  --glass-blur: 6px;

  /* text & muted tones */
  --muted: rgba(2,6,23,0.56);
  color-scheme: light;
  color: #0b2440;

  /* subtle default accent for light theme (can still be overridden by user settings) */
  --accent: #60a5fa;

  /* page background uses the layered cool gradient */
  background: var(--bg-1);
}

/* light-specific surface tweaks */
[data-theme="light"] .glass{
  box-shadow: 0 8px 30px rgba(2,6,23,0.06);
  border-color: rgba(2,6,23,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(250,250,255,0.92));
}
[data-theme="light"] .link-card{
  box-shadow: 0 6px 20px rgba(2,6,23,0.04);
  border-color: rgba(2,6,23,0.03);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.94));
}
/* allow accent override */
:root{--accent: #7dd3fc}
:root[data-accent]{--accent: attr(data-accent color)}
/* small accent usage */
.link-card:focus{outline:2px solid rgba(125,211,252,0.12);outline-offset:3px}