:root{
  --bg:#091018;
  --panel:#171c24;
  --muted:#9db2bf;
  --text:#f4f7fb;
  --green:#22c55e;
  --red:#ef4444;
  --accent:#dc2626;   /* julröd stark */
  --accent2:#16a34a;  /* julgrön */
  --gold:#fbbf24;
  --snow:#e5f2ff;
  --shadow: 0 8px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Nunito,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell;color:var(--text);background:var(--bg)}

/* Bakgrund + två snölager */
.bg{
  background:
    radial-gradient(1200px 600px at 10% -10%, #1c2532 0, transparent 60%),
    radial-gradient(1000px 500px at 90% -20%, #12202e 0, transparent 60%),
    linear-gradient(180deg, #0b0f14 0%, #0e141d 60%, #0b0f14 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="1" fill="%23ffffff22"/></svg>') repeat;
}
.snow-layer,.snow-layer2{pointer-events:none; position:fixed; inset:0; background-repeat:repeat; opacity:.52}
.snow-layer{
  background-image:
    radial-gradient(2px 2px at 20% 10%, var(--snow) 40%, transparent 40%),
    radial-gradient(2px 2px at 80% 20%, var(--snow) 40%, transparent 40%),
    radial-gradient(3px 3px at 60% 0%, var(--snow) 40%, transparent 40%),
    radial-gradient(2px 2px at 30% 30%, var(--snow) 40%, transparent 40%),
    radial-gradient(3px 3px at 70% 40%, var(--snow) 40%, transparent 40%),
    radial-gradient(2px 2px at 50% 70%, var(--snow) 40%, transparent 40%);
  animation: snow 18s linear infinite;
}
.snow-layer2{
  background-image:
    radial-gradient(2px 2px at 15% 5%, var(--snow) 40%, transparent 40%),
    radial-gradient(2px 2px at 75% 30%, var(--snow) 40%, transparent 40%),
    radial-gradient(3px 3px at 40% 15%, var(--snow) 40%, transparent 40%),
    radial-gradient(3px 3px at 55% 55%, var(--snow) 40%, transparent 40%);
  animation: snow2 30s linear infinite; opacity:.36;
}
@keyframes snow{0%{transform:translateY(-10vh)}100%{transform:translateY(110vh)}}
@keyframes snow2{0%{transform:translateY(-10vh)}100%{transform:translateY(110vh)}}

/* Marquee-känsla */
.marq{overflow:hidden; white-space:nowrap; margin:8px 0 14px; opacity:.85}
.marq span{display:inline-block; padding-left:100%; animation:marq 15s linear infinite}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Topbar med blinkande lampor */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:linear-gradient(90deg, #18202b, #1e2734);
  border-bottom:1px solid #222; box-shadow: var(--shadow);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.brand .tree{font-size:24px}
.brand-text{letter-spacing:.5px}
.lights{margin-left:8px; filter:drop-shadow(0 0 6px #fff);}
.lights-anim .lights{animation: twinkle 1.8s infinite ease-in-out}
@keyframes twinkle{0%,100%{opacity:.6}50%{opacity:1}}

.actions .btn{margin-left:8px}

/* Jelanger / girland under headern */
.garland{
  position:sticky; top:54px; z-index:19; height:42px;
  background:
    url('data:image/svg+xml;utf8,\
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="42">\
      <path d="M0,10 Q75,30 150,10 T300,10" fill="none" stroke="%23eab308" stroke-width="4"/>\
      <circle cx="30" cy="14" r="6" fill="%23ef4444"/>\
      <circle cx="60" cy="20" r="5" fill="%2316a34a"/>\
      <circle cx="90" cy="14" r="6" fill="%23ef4444"/>\
      <circle cx="120" cy="20" r="5" fill="%2316a34a"/>\
      <circle cx="150" cy="14" r="6" fill="%23ef4444"/>\
      <circle cx="180" cy="20" r="5" fill="%2316a34a"/>\
      <circle cx="210" cy="14" r="6" fill="%23ef4444"/>\
      <circle cx="240" cy="20" r="5" fill="%2316a34a"/>\
      <circle cx="270" cy="14" r="6" fill="%23ef4444"/>\
    </svg>') repeat-x center/300px 42px;
  transform-origin: top center;
  animation: sway 3.6s ease-in-out infinite;
}
@keyframes sway{0%,100%{transform:rotate(-0.8deg)}50%{transform:rotate(0.8deg)}}

/* Dekor i kanter */
.santa-left,.tree-right{
  position:fixed; bottom:18px; font-size:40px; z-index:5; opacity:.9; user-select:none; pointer-events:none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}
.santa-left{left:12px; animation: bob 3s ease-in-out infinite}
.tree-right{right:12px; animation: bob 3.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.container{max-width:1100px;margin:12px auto 20px;padding:0 12px}
.panel{
  background:linear-gradient(180deg, #151a22 0%, #131a23 100%);border:1px solid #263142;border-radius:18px;padding:16px;box-shadow:var(--shadow);margin-bottom:16px;
  position:relative;
}
.panel.festive{border-image: linear-gradient(90deg, var(--accent), var(--gold), var(--accent2)) 1; border-width:3px;}
.twinkle{box-shadow:0 0 0 2px #ffffff12, inset 0 0 24px #ffffff0c}

/* Glitter-effekt rubriker */
.glitter{
  background: linear-gradient(90deg,#fff,#ffdca8,#fff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 12px #fff4, 0 0 24px #ffd8;
  animation:glow 2.8s ease-in-out infinite;
}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}

/* “Jingle” kant på kort */
.jingle{border:1px dashed #335; border-radius:16px}

/* UI generellt */
.row{display:flex;gap:10px;align-items:center}
.row.between{justify-content:space-between}
.hint{color:var(--muted);margin:8px 0 12px}

.user-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.user-card{border:1px solid #2a2f39;border-radius:14px;padding:12px;background:#121621}
.user-name{font-weight:700;margin-bottom:10px}
.user-actions{display:flex;gap:8px}
.btn{background:linear-gradient(180deg, #e11d48, #b91c1c);border:none;color:white;padding:9px 12px;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:800}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--text)}
.msg{margin-top:8px;color:var(--muted)}
.msg.error{color:var(--red)}

.add-form input[type="url"]{flex:1;min-width:220px}
.add-form .btn{white-space:nowrap}
.scrape{margin-left:10px;min-width:80px}
.scrape.loading::after{content:" ⏳ Skrapar…";}

/* Kanban */
.kanban{display:grid;grid-template-columns:1fr 220px;gap:12px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

.card{
  background:linear-gradient(180deg, #0f141d, #0d131b);border:1px solid #2a2f39;border-radius:16px;overflow:hidden;display:flex;gap:0;flex-direction:column;
  transition:transform .06s ease, box-shadow .06s ease; box-shadow:var(--shadow); position:relative;
}
.card:hover{transform:translateY(-1px); box-shadow:0 10px 28px rgba(0,0,0,.35)}
.drag-ghost{opacity:.6}

/* Rank-badge */
.rank-badge{
  position:absolute; top:8px; left:8px;
  background:linear-gradient(180deg, #14532d, #166534);
  border:1px solid #1f3d2b; color:#eaffea;
  font-weight:900; padding:4px 8px; border-radius:999px; z-index:2;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.thumb{position:relative;background:#0c1017;min-height:150px;display:flex;align-items:center;justify-content:center}
.thumb img{width:100%;height:190px;object-fit:cover;display:block}
.noimg{color:var(--muted)}
.upload-btn{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.45);border:1px solid #333;padding:4px 8px;border-radius:10px;cursor:pointer}

.fields{padding:12px;display:flex;flex-direction:column;gap:8px}
.fields input, .fields textarea{width:100%;background:#0e1420;border:1px solid #273043;color:var(--text);border-radius:10px;padding:8px}
.fields .row{display:flex;align-items:center;gap:8px}
.fields .kr{color:var(--gold);font-weight:900}
.fields .title{font-weight:900}
.fields .note{min-height:60px;resize:vertical}

/* Papperskorg */
.trash{border:2px dashed #344050;border-radius:16px;background:#0e131b;display:flex;align-items:center;justify-content:center;font-weight:900;color:#8da2b5}
.trash:hover{border-color:var(--red);color:var(--red)}

.card.ro .fields{gap:6px}
.url.ro{display:inline-block;color:#93c5fd}
.price.ro{font-weight:800;color:var(--gold)}
.note.ro{color:var(--muted)}
.footer{opacity:.7;text-align:center;margin:18px 0}

/* Admin-tabell */
.admin-table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th, .admin-table td{border-bottom:1px solid #2b3442;padding:10px 8px;font-size:15px}
.admin-table thead th{background:#121a24;position:sticky;top:0}
.admin-table .right{text-align:right}
.admin-table .thumb-td img{width:52px;height:52px;object-fit:cover;border-radius:10px;border:1px solid #273043}

/* Admin-indikator & banner */
.admin-badge{
  display:inline-block;margin-right:8px;padding:6px 10px;border-radius:999px;
  background:linear-gradient(180deg,#fde68a,#f59e0b);color:#3b2f00;font-weight:900;border:1px solid #b45309
}
.admin-banner{
  background:#1e293b;border:1px solid #334155;border-radius:12px;padding:8px 10px;margin-bottom:12px;
  color:#e0e7ff;font-weight:700
}

/* PIN-overlay */
.pin-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:30}
.pin-modal{background:#121826;border:2px solid #324052;border-radius:18px;box-shadow:var(--shadow);padding:16px 18px;max-width:360px;width:92%}
.pin-form{display:flex;flex-direction:column;gap:10px}
.pin-inputs{display:flex;gap:8px;justify-content:center;margin:8px 0}
.pin-inputs input{width:42px;height:48px;text-align:center;font-size:20px;background:#0f141d;border:1px solid #273043;border-radius:10px;color:var(--text)}


/* Extra 90-tals glow */
.panel.festive.twinkle { box-shadow: 0 0 24px #ffffff22, inset 0 0 18px #ffffff12; }
.brand-text { text-shadow: 0 0 8px #fff3; }