*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:'Inter',sans-serif;}
html.dark,html.dark body{background:#141824;}
html.light,html.light body{background:#e8e3f0;}
html.theme-transitioning,html.theme-transitioning body{transition:background 2s ease!important;}
:root{
  --gold:#C7AE6A;
  --gold-dark:#b99a45;
  --gold-light:#d5c28f;
}
.app{display:flex;min-height:100vh;}

/* SIDEBAR */
.sidebar{
  width:230px;flex-shrink:0;display:flex;flex-direction:column;min-height:100vh;
  background:linear-gradient(180deg,#3A415C 0%,#373e58 35%,#303650 65%,#262b3d 100%);
}
.logo-area{
  padding:22px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;justify-content:center;
}
.logo-img{width:160px;display:block;}
.nav-group-label{
  font-size:9px;letter-spacing:0.13em;text-transform:uppercase;
  padding:14px 18px 4px;color:rgba(199,174,106,0.75);font-weight:500;
}
.nav-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px;font-size:14px;
  color:rgba(255,255,255,0.7);
  cursor:pointer;transition:color 0.12s,background 0.12s;
}
.nav-item:hover{color:#ffffff;background:rgba(255,255,255,0.1);}
.nav-item.active{color:var(--gold);background:rgba(0,0,0,0.22);}
.nav-left{display:flex;align-items:center;gap:9px;}
.nav-left svg{width:16.9px;height:16.9px;flex-shrink:0;}
.nav-num{font-size:10px;color:rgba(255,255,255,0.15);}
.nav-badge{margin-left:auto;background:rgba(199,174,106,0.12);color:var(--gold);font-size:9px;padding:1px 6px;border-radius:10px;}
.sidebar-footer{margin-top:auto;padding:14px 18px;border-top:1px solid rgba(255,255,255,0.06);}
.user-name{font-size:12px;font-weight:500;color:rgba(213,194,143,0.6);}
.user-email{font-size:10px;color:rgba(255,255,255,0.2);margin-top:2px;}
.logout{font-size:10.5px;color:rgba(255,255,255,0.2);margin-top:8px;cursor:pointer;transition:color 0.12s;}
.logout:hover{color:var(--gold);}
.theme-toggle{display:flex;border-radius:6px;padding:2px;margin-top:12px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.07);}
.theme-btn{flex:1;text-align:center;padding:5px 0;font-size:10px;border-radius:5px;cursor:pointer;transition:all 0.15s;border:none;background:transparent;color:rgba(255,255,255,0.25);font-family:'Inter',sans-serif;}
.theme-btn.active{background:rgba(199,174,106,0.18);color:var(--gold);}
/* Smooth theme transition */
.app,.content,.main,.sidebar,.topbar,.page-footer{transition:background 2s ease,color 2s ease,border-color 1.5s ease;}

.page-footer{padding:18px 32px;border-top:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;}
.app.light .page-footer{border-top:1px solid rgba(58,65,92,0.08);}
.page-footer-copy{font-size:11px;color:rgba(255,255,255,0.2);}
.app.light .page-footer-copy{color:rgba(38,43,61,0.35);}
.page-footer-tag{font-size:10px;color:rgba(199,174,106,0.35);letter-spacing:0.06em;font-style:italic;text-transform:uppercase;}
.app.light .page-footer-tag{color:rgba(58,65,92,0.3);}

/* MAIN — Option C: vignette fra venstre, mørkest ved sidebar, lysner mot høyre */
.main{flex:1;display:flex;flex-direction:column;background:linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%);transition:background 0.3s;}
.app.light .main{background:linear-gradient(135deg,#e8e3f0 0%,#f0ece4 50%,#f8f4ec 100%);}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;border-bottom:1px solid rgba(255,255,255,0.06);}
.app.light .topbar{border-bottom:1px solid rgba(58,65,92,0.08);}
.topbar-title{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;color:var(--gold-light);}
.app.light .topbar-title{color:#2a2218;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.tb-btn{font-size:12px;padding:7px 14px;border-radius:6px;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.12s;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(213,194,143,0.6);}
.app.light .tb-btn{background:rgba(58,65,92,0.06);border:1px solid rgba(58,65,92,0.15);color:#5a4e30;}
.tb-btn:hover{border-color:var(--gold);color:var(--gold);}
.tb-btn.gold{background:var(--gold);border-color:var(--gold);color:#1a1200 !important;}
.tb-btn.gold:hover{background:var(--gold-dark);}
.tb-btn.slate{background:rgba(38,43,61,0.5);border-color:rgba(199,174,106,0.25);color:var(--gold-light) !important;}
.app.light .tb-btn.slate{background:rgba(58,65,92,0.12);border-color:rgba(58,65,92,0.25);color:#3A415C !important;}

.content{padding:28px 32px;flex:1;position:relative;}

@media (min-width:769px){
  .content::before{
    content:'';
    position:fixed;
    top:0;
    left:230px;
    width:15px;
    height:100vh;
    background:linear-gradient(90deg,rgba(38,43,61,0.7) 0%,transparent 100%);
    pointer-events:none;
    z-index:5;
  }
}

.image-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px;}
.img-card{border-radius:10px;padding:28px 24px;cursor:pointer;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;align-items:flex-start;gap:16px;}
.app.light .img-card{background:rgba(255,255,255,0.6);border:1px solid rgba(58,65,92,0.12);}
.img-card:hover{border-color:rgba(199,174,106,0.45) !important;background:rgba(255,255,255,0.09);}
.img-icon{width:48px;height:48px;border:1.5px solid rgba(199,174,106,0.28);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.img-icon svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;}
.img-card-body{padding:0;}
.img-card-title{font-size:14px;font-weight:500;margin-bottom:5px;color:var(--gold-light);}
.app.light .img-card-title{color:#262b3d;}
.img-card-sub{font-size:12px;line-height:1.6;color:rgba(255,255,255,0.3);}
.app.light .img-card-sub{color:rgba(38,43,61,0.45);}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px;}
.stat{border-radius:8px;padding:16px 18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);}
.app.light .stat{background:rgba(255,255,255,0.6);border:1px solid rgba(58,65,92,0.12);}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;margin-bottom:6px;color:rgba(255,255,255,0.28);}
.app.light .stat-label{color:rgba(38,43,61,0.38);}
.stat-val{font-size:26px;font-weight:500;letter-spacing:-0.5px;color:var(--gold-light);}
.app.light .stat-val{color:#262b3d;}
.stat-val.gold{color:var(--gold) !important;}
.stat-sub{font-size:10px;margin-top:3px;color:rgba(255,255,255,0.18);}
.app.light .stat-sub{color:rgba(38,43,61,0.3);}

.section-label{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;text-align:left;margin-bottom:8px;font-weight:500;color:var(--gold);}
.section-headline{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:600;text-align:center;margin-bottom:22px;color:var(--gold-light);}
.app.light .section-headline{color:#262b3d;}

.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.feat-card{border-radius:10px;padding:26px 20px;text-align:center;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);}
.app.light .feat-card{background:rgba(255,255,255,0.6);border:1px solid rgba(58,65,92,0.12);}
.feat-icon{width:50px;height:50px;margin:0 auto 12px;border:1.5px solid rgba(199,174,106,0.28);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.feat-icon svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;}
.feat-title{font-size:13px;font-weight:600;margin-bottom:7px;color:var(--gold-light);}
.app.light .feat-title{color:#262b3d;}
.feat-body{font-size:11.5px;line-height:1.7;color:rgba(255,255,255,0.3);}
.app.light .feat-body{color:rgba(38,43,61,0.45);}

.cta-wrap{text-align:center;}
.cta-btn{background:var(--gold);color:#1a1200;border:none;padding:11px 28px;border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;cursor:pointer;transition:background 0.15s;}
.cta-btn:hover{background:var(--gold-dark);}

.app{display:flex;min-height:100vh;}
.app.dark .main{background:linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important;}
.app.light .main{background:linear-gradient(135deg,#e8e3f0 0%,#f0ece4 50%,#f8f4ec 100%) !important;}
.app.dark .topbar{background:linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important;border-bottom:1px solid rgba(255,255,255,0.07) !important;}
.app.light .topbar{background:linear-gradient(90deg,#e8e3f0 0%,#f0ece4 55%,#f8f4ec 100%) !important;border-bottom:1px solid rgba(58,65,92,0.1) !important;}

/* === THEME: APP LAYOUT & GRADIENTS === */
.app { display: flex; min-height: 100vh; }
.app.dark .main { background: linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important; }
.app.light .main { background: linear-gradient(135deg,#e8e3f0 0%,#f0ece4 50%,#f8f4ec 100%) !important; }
.app.dark .topbar { background: linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important; }
.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 230px;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  flex-shrink: 0;
}

.main {
  margin-left: 230px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: calc(100% - 230px);
}

.page-content, .content {
  flex: 1;
}

.page-footer {
  margin-top: auto;
  padding: 16px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px;
  color: rgba(232,224,208,0.3);
  text-align: center;
}

@media (min-width:769px) {
  .page-footer {
    margin-left: 0;
    padding-left: calc(230px + 24px);
  }
}

/* === USER INFO SECTION === */
.user-info-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-name {
  font-size: 15px;
  color: rgba(232,224,208,0.85);
}

.user-plan {
  font-size: 10px;
  color: rgba(199,168,76,0.6);
  letter-spacing: 0.04em;
}

.user-plan.starter {
  color: rgba(232,224,208,0.4);
}

.user-plan.standard {
  color: #7eb8f0;
}

.user-plan.premium {
  color: var(--gold);
}

.user-plan.pro {
  color: #c47ef0;
}

/* === HAMBURGER MENU === */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #c9a84c;
  border-radius: 2px;
  transition: all 0.3s;
}

/* === SIDEBAR TAB === */
.sidebar-tab {
  display: none;
}

@media (max-width: 768px) {
  .nav-item { font-size: 14.2px; }

  .logo-area {
    padding: 4px 20px;
    margin-bottom: 0;
  }

  .hamburger { display: flex; }

  .sidebar-overlay {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .sidebar.open ~ .sidebar-overlay,
  .sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .sidebar-tab {
    display: flex;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 52px;
    background: linear-gradient(180deg,#3A415C,#262b3d);
    border-radius: 0 8px 8px 0;
    align-items: center;
    justify-content: center;
    color: #c9a84c;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    z-index: 201;
    border: 1px solid rgba(199,168,76,0.5);
    border-left: none;
    box-shadow: 3px 0 8px rgba(0,0,0,0.3);
  }

  .sidebar.open .sidebar-tab {
    content: '';
  }

  .sidebar {
    position: fixed !important;
    overflow: visible !important;
  }

  .sidebar {
    position: fixed !important;
    left: -230px !important;
    top: 0 !important;
    height: 100dvh !important;
    z-index: 200 !important;
    transition: left 0.3s ease !important;
  }
  .sidebar.open {
    left: 0 !important;
  }

  .main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .topbar {
    padding: 10px 16px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .topbar-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .topbar-actions .btn, .topbar-actions button {
    font-size: 12px;
    padding: 6px 10px;
  }

  .stats-grid, .cards-grid, .quick-actions {
    grid-template-columns: 1fr !important;
  }

  .content-area {
    padding: 16px !important;
  }
}

/* === SVG SIZING REFINEMENT === */
.page-content svg:not([width]):not([height]):not(.power-icon):not(.theme-icon):not(.search-icon) {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

svg:not([width]):not([height]) {
  max-width: 24px !important;
  max-height: 24px !important;
}

/* === THEME TOGGLE VISIBILITY === */
.theme-toggle-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 10px 18px 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.theme-track {
  width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  background: rgba(199,168,76,0.15) !important;
  border: 1px solid rgba(199,168,76,0.3) !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.theme-thumb {
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: rgba(199,168,76,0.9) !important;
  transition: transform 0.3s !important;
}

.theme-track.is-light .theme-thumb {
  transform: translateX(0px) !important;
}
.theme-track .theme-thumb {
  transform: translateX(20px) !important;
}

/* === HAMBURGER MENU === */

/* === MOBILE: OVERFLOW & RESPONSIVE GRIDS === */
.main, .content-area, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 768px) {
  .image-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .stat-row {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .feature-cards {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Theme buttons - mobile icons only */
  .theme-btn {
    font-size: 0 !important;
    min-width: 32px;
    min-height: 32px;
    padding: 6px !important;
  }

  .theme-btn::before {
    font-size: 16px;
    content: '☀️';
  }

  .theme-btn[onclick*="dark"]::before {
    content: '🌙';
  }

  .theme-btn[onclick*="auto"]::before {
    content: '🔄';
  }

  .sidebar {
    position: fixed;
    left: -230px;
    top: 0;
    height: 100vh;
    min-height: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    z-index: 200;
    transition: left 0.3s ease;
  }

  .sidebar.open {
    left: 0;
    height: 100dvh;
  }

  .theme-toggle {
    position: sticky !important;
    bottom: 0 !important;
    background: inherit !important;
    padding: 10px 16px !important;
    margin-top: auto !important;
  }

  .sidebar .logo, .sidebar .logo-wrap, .sidebar > a:first-child, .sidebar > div:first-child {
    flex-shrink: 1 !important;
  }

}

/* Sidebar user info */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  color: rgba(199,174,106,0.8);
  font-size: 13px;
  border-top: 1px solid rgba(199,174,106,0.1);
}

.sidebar-user span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-power {
  color: rgba(199,174,106,0.85);
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.sidebar-power:hover .power-icon {
  color: #e05555;
}

.sidebar-power .power-icon {
  width: 18px;
  height: 18px;
}

/* Help button */
.help-btn {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  font-weight: 700;
  font-size: 15px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.help-btn:hover {
  background: rgba(199,174,106,0.25) !important;
  color: var(--gold) !important;
}

  .sidebar {
    border-right: none !important;
    scrollbar-width: none !important;
  }

  .sidebar::-webkit-scrollbar {
    display: none !important;
  }
}

.user-plan.starter { color: rgba(232,224,208,0.4); }
.user-plan.standard { color: #7eb8f0; }
.user-plan.premium { color: #c9a84c; }
.user-plan.pro { color: #c47ef0; }

/* Plan Badge System */
.plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
}
.plan-badge svg { flex-shrink: 0; }
.plan-badge.starter { background: rgba(180,178,169,0.08); color: rgba(180,178,169,0.6); border: 1px solid rgba(180,178,169,0.2); }
.plan-badge.standard { background: rgba(126,184,240,0.1); color: #7eb8f0; border: 1px solid rgba(126,184,240,0.3); }
.plan-badge.premium { background: rgba(199,168,76,0.12); color: #c9a84c; border: 1px solid rgba(199,168,76,0.4); box-shadow: 0 0 8px rgba(199,168,76,0.15); }
.plan-badge.pro { background: rgba(196,126,240,0.1); color: #c47ef0; border: 1px solid rgba(196,126,240,0.35); box-shadow: 0 0 8px rgba(196,126,240,0.12); }

/* ── VALG DROPDOWN ── */
.valg-wrap { position:relative; display:inline-block; }
.valg-btn { display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.05); color:rgba(213,194,143,0.8); font-size:12px; font-family:'Inter',sans-serif; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.valg-btn:hover { border-color:var(--gold); color:var(--gold); }
.valg-btn svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; transition:transform 0.2s; }
.valg-btn.open svg { transform:rotate(180deg); }
.valg-menu { position:absolute; right:0; top:calc(100% + 8px); background:rgba(28,33,50,0.98); border:1px solid rgba(201,168,76,0.15); border-radius:12px; min-width:200px; z-index:300; overflow:hidden; box-shadow:0 4px 6px -1px rgba(0,0,0,0.3), 0 10px 30px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04); display:none; backdrop-filter:blur(12px); }
.valg-menu.open { display:block; animation:fadeIn 0.12s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.valg-item { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:12px; color:rgba(213,194,143,0.75); cursor:pointer; transition:all 0.1s; border:none; background:transparent; width:100%; text-align:left; font-family:'Inter',sans-serif; }
.valg-item:first-child { margin-top:4px; }
.valg-item:last-child { margin-bottom:4px; }
.valg-item:hover { background:rgba(201,168,76,0.1); color:rgba(213,194,143,0.95); padding-left:20px; }
.valg-item svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; flex-shrink:0; opacity:0.55; }
.valg-item.danger { color:rgba(220,80,80,0.7); }
.valg-item.danger:hover { background:rgba(220,80,80,0.08); color:rgba(220,80,80,0.9); padding-left:20px; }
.valg-divider { height:1px; background:rgba(255,255,255,0.06); margin:4px 8px; }
.app.light .valg-menu { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.12); }
.app.light .valg-item { color:rgba(58,50,40,0.75); }
.app.light .valg-item:hover { background:rgba(201,168,76,0.06); color:#3a3228; }

/* CUSTOM SELECT */
.cs-wrap{position:relative;display:inline-block}
.cs-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:rgba(213,194,143,0.8);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap;min-width:130px;justify-content:space-between}
.cs-btn:hover{border-color:rgba(201,168,76,0.4)}
.cs-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;opacity:.5;transition:transform .2s;flex-shrink:0}
.cs-btn.open{border-color:rgba(201,168,76,0.4)}
.cs-btn.open svg{transform:rotate(180deg)}
.cs-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:rgba(22,27,42,0.98);border:1px solid rgba(201,168,76,0.15);border-radius:12px;z-index:500;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.4),0 10px 30px rgba(0,0,0,0.5);backdrop-filter:blur(16px);display:none;padding:4px 0}
.cs-menu.open{display:block;animation:csIn .12s ease}
@keyframes csIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.cs-opt{padding:9px 14px;font-size:12px;color:rgba(213,194,143,0.7);cursor:pointer;transition:all .1s;font-family:'Inter',sans-serif;white-space:nowrap}
.cs-opt:hover{background:rgba(201,168,76,0.1);color:rgba(213,194,143,0.95);padding-left:18px}
.cs-opt.sel{color:var(--gold)}

/* VALG DROPDOWN */
.valg-wrap{position:relative;display:inline-block}
.valg-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:rgba(213,194,143,0.8);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap}
.valg-btn:hover{border-color:var(--gold);color:var(--gold)}
.valg-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.valg-btn.open svg{transform:rotate(180deg)}
.valg-menu{position:absolute;right:0;top:calc(100% + 6px);background:rgba(22,27,42,0.98);border:1px solid rgba(201,168,76,0.15);border-radius:12px;min-width:200px;z-index:500;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.4),0 10px 30px rgba(0,0,0,0.5);backdrop-filter:blur(16px);display:none;padding:4px 0}
.valg-menu.open{display:block;animation:csIn .12s ease}
.valg-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12px;color:rgba(213,194,143,0.75);cursor:pointer;transition:all .1s;border:none;background:transparent;width:100%;text-align:left;font-family:'Inter',sans-serif}
.valg-item:hover{background:rgba(201,168,76,0.08);color:rgba(213,194,143,0.95);padding-left:20px}
.valg-item svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;opacity:.55}
.valg-item.danger{color:rgba(220,80,80,0.7)}
.valg-item.danger:hover{background:rgba(220,80,80,0.08);color:rgba(220,80,80,0.9);padding-left:20px}
.valg-divider{height:1px;background:rgba(255,255,255,0.06);margin:4px 0}

/* MOBIL */
@media(max-width:768px){
 .cs-menu{position:fixed;left:16px;right:16px;width:auto;top:auto;border-radius:16px}
 .valg-menu{position:fixed;right:16px;left:auto;min-width:200px;border-radius:16px}
 .search-row{flex-direction:column;align-items:stretch}
 .search-wrap{max-width:100%}
}

/* ════════════════════════════════════
 LEIELINK DROPDOWN KOMPONENTER
 Gjenbrukbar på alle sider
 ════════════════════════════════════ */

/* ── CUSTOM SELECT ── */
.cs-wrap{position:relative;display:inline-block;}
.cs-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:rgba(213,194,143,0.8);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap;min-width:130px;}
.cs-btn:hover,.cs-btn.open{border-color:rgba(201,168,76,0.4);color:rgba(213,194,143,0.95);}
.cs-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;opacity:.5;transition:transform .2s;flex-shrink:0;}
.cs-btn.open svg{transform:rotate(180deg);}
.cs-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:rgba(22,27,42,0.98);border:1px solid rgba(201,168,76,0.15);border-radius:12px;z-index:500;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.4),0 10px 30px rgba(0,0,0,0.5);backdrop-filter:blur(16px);display:none;padding:4px 0;}
.cs-menu.open{display:block;animation:llDropIn .12s ease;}
.cs-opt{padding:9px 14px;font-size:12px;color:rgba(213,194,143,0.7);cursor:pointer;transition:all .1s;font-family:'Inter',sans-serif;white-space:nowrap;user-select:none;}
.cs-opt:hover{background:rgba(201,168,76,0.1);color:rgba(213,194,143,0.95);padding-left:18px;}
.cs-opt.sel{color:var(--gold);}

/* ── VALG DROPDOWN ── */
.valg-wrap{position:relative;display:inline-block;}
.valg-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:rgba(213,194,143,0.8);font-size:12px;font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;white-space:nowrap;}
.valg-btn:hover,.valg-btn.open{border-color:var(--gold);color:var(--gold);}
.valg-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s;}
.valg-btn.open svg{transform:rotate(180deg);}
.valg-menu{position:absolute;right:0;top:calc(100% + 6px);background:rgba(22,27,42,0.98);border:1px solid rgba(201,168,76,0.15);border-radius:12px;min-width:210px;z-index:500;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.4),0 10px 30px rgba(0,0,0,0.5);backdrop-filter:blur(16px);display:none;padding:4px 0;}
.valg-menu.open{display:block;animation:llDropIn .12s ease;}
.valg-item{display:flex;align-items:center;gap:10px;padding:9px 16px;font-size:12px;color:rgba(213,194,143,0.75);cursor:pointer;transition:all .1s;border:none;background:transparent;width:100%;text-align:left;font-family:'Inter',sans-serif;user-select:none;}
.valg-item:hover{background:rgba(201,168,76,0.08);color:rgba(213,194,143,0.95);padding-left:20px;}
.valg-item svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0;opacity:.55;}
.valg-item.danger{color:rgba(220,80,80,0.7);}
.valg-item.danger:hover{background:rgba(220,80,80,0.08);color:rgba(220,80,80,0.9);padding-left:20px;}
.valg-divider{height:1px;background:rgba(255,255,255,0.06);margin:4px 0;}

/* ── ANIMASJON ── */
@keyframes llDropIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:translateY(0);}}

/* ── LIGHT MODE ── */
.app.light .cs-btn{background:rgba(0,0,0,0.04);color:#3a3228;border-color:rgba(0,0,0,0.1);}
.app.light .cs-btn:hover,.app.light .cs-btn.open{border-color:rgba(201,168,76,0.5);}
.app.light .cs-menu{background:rgba(255,255,255,0.98);border-color:rgba(0,0,0,0.08);box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12);}
.app.light .cs-opt{color:rgba(58,50,40,0.75);}
.app.light .cs-opt:hover{background:rgba(201,168,76,0.06);color:#3a3228;}
.app.light .valg-btn{background:rgba(0,0,0,0.04);color:#3a3228;border-color:rgba(0,0,0,0.1);}
.app.light .valg-btn:hover,.app.light .valg-btn.open{border-color:var(--gold);}
.app.light .valg-menu{background:rgba(255,255,255,0.98);border-color:rgba(0,0,0,0.08);box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12);}
.app.light .valg-item{color:rgba(58,50,40,0.75);}
.app.light .valg-item:hover{background:rgba(201,168,76,0.06);color:#3a3228;}

/* ── MOBIL ── */
@media(max-width:768px){
 .cs-menu{position:fixed;left:12px;right:12px;width:auto;top:auto;border-radius:16px;min-width:auto;}
 .valg-menu{position:fixed;right:12px;left:auto;min-width:220px;border-radius:16px;}
}

/* ════════════════════════════════════
 LIGHT MODE — CONTENT TEKSTFARGER
 Kun for .content området, ikke sidebar
 ════════════════════════════════════ */
.app.light .content { color: #1a1f2e; }
.app.light .content .result-count { color: rgba(26,31,46,0.45); }
.app.light .content .section-path { color: rgba(26,31,46,0.45); }
.app.light .content .section-path span { color: rgba(26,31,46,0.75); }
.app.light .content .hit-count { color: rgba(26,31,46,0.4); }
.app.light .content .chip { color: rgba(26,31,46,0.65); border-color: rgba(26,31,46,0.12); background: rgba(255,255,255,0.5); }
.app.light .content .chip.chip-active { color: #8a6c1a; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.08); }
.app.light .content .triple-toggle-btn { color: rgba(26,31,46,0.5); }
.app.light .content .triple-toggle-btn.active { color: #1a1200; }
.app.light .content .triple-toggle { background: rgba(255,255,255,0.5); border-color: rgba(201,168,76,0.2); }
.app.light .content .pag-btn { color: rgba(26,31,46,0.55); border-color: rgba(26,31,46,0.12); }
.app.light .content .pag-btn:hover, .app.light .content .pag-btn.active { color: #8a6c1a; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.06); }
.app.light .content .ann-link { color: #1a1f2e; }
.app.light .content .ann-link:hover { color: #c9a84c; }
.app.light .content .ann-table th { color: rgba(26,31,46,0.4); border-color: rgba(26,31,46,0.08); }
.app.light .content .ann-table td { color: #1a1f2e; border-color: rgba(26,31,46,0.05); }
.app.light .content .status-inaktiv { background: rgba(26,31,46,0.06); color: rgba(26,31,46,0.45); border-color: rgba(26,31,46,0.12); }
.app.light .content .status-aktiv { background: rgba(40,167,69,0.08); color: #1e6b33; border-color: rgba(40,167,69,0.18); }
.app.light .content .status-utgatt { background: rgba(220,53,69,0.06); color: #8b2020; border-color: rgba(220,53,69,0.15); }
.app.light .content .card-type { color: rgba(26,31,46,0.45); }
.app.light .content .card-title { color: #1a1f2e; }
.app.light .content .card-address { color: rgba(26,31,46,0.45); }
.app.light .content .obj-card-name { color: #1a1f2e; }
.app.light .content .obj-card-row { color: rgba(26,31,46,0.55); }
.app.light .content .form-label { color: rgba(26,31,46,0.5); }
.app.light .content .sub-tab { color: rgba(26,31,46,0.55); border-color: rgba(26,31,46,0.12); }
.app.light .content .sub-tab:hover { color: #8a6c1a; border-color: rgba(201,168,76,0.4); }
.app.light .content .sub-tab.active { color: #8a6c1a; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.08); }
.app.light .content .btn-sm { color: rgba(26,31,46,0.65); border-color: rgba(26,31,46,0.12); }
.app.light .content .btn-sm:hover { color: #8a6c1a; border-color: rgba(201,168,76,0.4); }
.app.light .content .obj-card { background: rgba(255,255,255,0.65); border-color: rgba(26,31,46,0.08); }
.app.light .content .listing-card { background: rgba(255,255,255,0.65); border-color: rgba(26,31,46,0.08); }
.app.light .content .info-banner { background: rgba(201,168,76,0.05); border-color: rgba(201,168,76,0.2); }
.app.light .content .info-banner-text { color: rgba(26,31,46,0.65); }
.app.light .content .valg-btn { color: rgba(26,31,46,0.7); border-color: rgba(26,31,46,0.12); background: rgba(255,255,255,0.5); }
.app.light .content .valg-btn:hover { color: #8a6c1a; border-color: rgba(201,168,76,0.4); }
.app.light .content .cs-btn { color: rgba(26,31,46,0.7); border-color: rgba(26,31,46,0.12); background: rgba(255,255,255,0.5); }
.app.light .content .search-input { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
.app.light .content .location-input { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
.app.light .content .filter-select { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
.app.light .content .sort-select { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }

/* ── LIGHT MODE FILTER PANEL ── */
.app.light .filter-panel { background:rgba(255,255,255,0.98); border-color:rgba(201,168,76,0.2); }
.app.light .filter-panel label { color:rgba(26,31,46,0.5); }
.app.light .pris-input { background:rgba(0,0,0,0.04); color:#1a1f2e; border-color:rgba(26,31,46,0.12); }
.app.light .pris-sep { color:rgba(26,31,46,0.3); }
.app.light .btn-filter-reset { color:rgba(26,31,46,0.55); border-color:rgba(26,31,46,0.12); background:transparent; }
.app.light .btn-filter-reset:hover { color:#1a1f2e; border-color:rgba(26,31,46,0.3); }

/* ── LIGHT MODE CS-MENU OG VALG-MENU ── */
.app.light .cs-menu { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12); }
.app.light .cs-opt { color:rgba(26,31,46,0.75); }
.app.light .cs-opt:hover { background:rgba(201,168,76,0.06); color:#1a1f2e; padding-left:18px; }
.app.light .cs-opt.sel { color:#8a6c1a; }
.app.light .cs-btn { background:rgba(255,255,255,0.7); color:#1a1f2e; border-color:rgba(26,31,46,0.12); }
.app.light .cs-btn:hover { border-color:rgba(201,168,76,0.4); }
.app.light .valg-menu { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12); }
.app.light .valg-item { color:rgba(26,31,46,0.75); }
.app.light .valg-item:hover { background:rgba(201,168,76,0.06); color:#1a1f2e; padding-left:20px; }
.app.light .valg-item.danger { color:rgba(180,40,40,0.7); }
.app.light .valg-item.danger:hover { background:rgba(220,53,69,0.06); color:rgba(180,40,40,0.9); }
.app.light .valg-divider { background:rgba(26,31,46,0.06); }
.app.light .valg-btn { background:rgba(255,255,255,0.7); color:#1a1f2e; border-color:rgba(26,31,46,0.12); }
.app.light .valg-btn:hover { border-color:rgba(201,168,76,0.4); color:#8a6c1a; }
/* ════════════════════════════════════════════════════
   THEME VIA <html> KLASSE — ingen flash
   Disse reglene speiler .app.light / .app.dark
   men trigges av html.light/html.dark som settes
   SYNKRONT av leielink.js IIFE før body rendres
   ════════════════════════════════════════════════════ */

html.light .main {
  background: linear-gradient(135deg, #e8e3f0 0%, #f0ece4 50%, #f8f4ec 100%);
}
html.dark .main {
  background: linear-gradient(90deg, #1a1f2e 0%, #262b3d 55%, #3A415C 100%);
}
html.light .topbar {
  border-bottom: 1px solid rgba(58,65,92,0.08);
}
html.dark .topbar {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
html.light .topbar-title { color: #2a2218; }
html.dark  .topbar-title { color: var(--gold-light); }

html.light .tb-btn {
  background: rgba(58,65,92,0.06);
  border: 1px solid rgba(58,65,92,0.15);
  color: #5a4e30;
}
html.light .tb-btn.gold { color: #1a1200 !important; }
html.light .tb-btn.slate {
  background: rgba(58,65,92,0.12);
  border-color: rgba(58,65,92,0.25);
  color: #3A415C !important;
}
html.light .content {
  /* light content bakgrunn arves fra .main */
}
html.light .page-footer {
  border-top: 1px solid rgba(58,65,92,0.08);
}
html.light .page-footer-copy { color: rgba(38,43,61,0.35); }
html.light .page-footer-tag  { color: rgba(58,65,92,0.3); }

/* AUTO-GENERATED html.light/dark aliases */
html.light .page-footer{border-top:1px solid rgba(58,65,92,0.08);}
html.light .page-footer-copy{color:rgba(38,43,61,0.35);}
html.light .page-footer-tag{color:rgba(58,65,92,0.3);}
html.light .main{background:linear-gradient(135deg,#e8e3f0 0%,#f0ece4 50%,#f8f4ec 100%);}
html.light .topbar{border-bottom:1px solid rgba(58,65,92,0.08);}
html.light .topbar-title{color:#2a2218;}
html.light .tb-btn{background:rgba(58,65,92,0.06);border:1px solid rgba(58,65,92,0.15);color:#5a4e30;}
html.light .tb-btn.slate{background:rgba(58,65,92,0.12);border-color:rgba(58,65,92,0.25);color:#3A415C !important;}
html.light .img-card{background:rgba(255,255,255,0.6);border:1px solid rgba(58,65,92,0.12);}
html.light .img-card-title{color:#262b3d;}
html.light .img-card-sub{color:rgba(38,43,61,0.45);}
html.light .stat{background:rgba(255,255,255,0.6);border:1px solid rgba(58,65,92,0.12);}
html.light .stat-label{color:rgba(38,43,61,0.38);}
html.light .stat-val{color:#262b3d;}
html.light .stat-sub{color:rgba(38,43,61,0.3);}
html.light .section-headline{color:#262b3d;}
html.light .feat-card{background:rgba(255,255,255,0.6);border:1px solid rgba(58,65,92,0.12);}
html.light .feat-title{color:#262b3d;}
html.light .feat-body{color:rgba(38,43,61,0.45);}
html.dark .main{background:linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important;}
html.light .main{background:linear-gradient(135deg,#e8e3f0 0%,#f0ece4 50%,#f8f4ec 100%) !important;}
html.dark .topbar{background:linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important;border-bottom:1px solid rgba(255,255,255,0.07) !important;}
html.light .topbar{background:linear-gradient(90deg,#e8e3f0 0%,#f0ece4 55%,#f8f4ec 100%) !important;border-bottom:1px solid rgba(58,65,92,0.1) !important;}
html.dark .main { background: linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important; }
html.light .main { background: linear-gradient(135deg,#e8e3f0 0%,#f0ece4 50%,#f8f4ec 100%) !important; }
html.dark .topbar { background: linear-gradient(90deg,#1a1f2e 0%,#262b3d 55%,#3A415C 100%) !important; }
html.light .valg-menu { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08), 0 10px 30px rgba(0,0,0,0.12); }
html.light .valg-item { color:rgba(58,50,40,0.75); }
html.light .valg-item:hover { background:rgba(201,168,76,0.06); color:#3a3228; }
html.light .cs-btn{background:rgba(0,0,0,0.04);color:#3a3228;border-color:rgba(0,0,0,0.1);}
html.light .cs-btn:hover,html.light .cs-btn.open{border-color:rgba(201,168,76,0.5);}
html.light .cs-menu{background:rgba(255,255,255,0.98);border-color:rgba(0,0,0,0.08);box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12);}
html.light .cs-opt{color:rgba(58,50,40,0.75);}
html.light .cs-opt:hover{background:rgba(201,168,76,0.06);color:#3a3228;}
html.light .valg-btn{background:rgba(0,0,0,0.04);color:#3a3228;border-color:rgba(0,0,0,0.1);}
html.light .valg-btn:hover,html.light .valg-btn.open{border-color:var(--gold);}
html.light .valg-menu{background:rgba(255,255,255,0.98);border-color:rgba(0,0,0,0.08);box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12);}
html.light .valg-item{color:rgba(58,50,40,0.75);}
html.light .valg-item:hover{background:rgba(201,168,76,0.06);color:#3a3228;}
html.light .content { color: #1a1f2e; }
html.light .content .result-count { color: rgba(26,31,46,0.45); }
html.light .content .section-path { color: rgba(26,31,46,0.45); }
html.light .content .section-path span { color: rgba(26,31,46,0.75); }
html.light .content .hit-count { color: rgba(26,31,46,0.4); }
html.light .content .chip { color: rgba(26,31,46,0.65); border-color: rgba(26,31,46,0.12); background: rgba(255,255,255,0.5); }
html.light .content .chip.chip-active { color: #8a6c1a; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.08); }
html.light .content .triple-toggle-btn { color: rgba(26,31,46,0.5); }
html.light .content .triple-toggle-btn.active { color: #1a1200; }
html.light .content .triple-toggle { background: rgba(255,255,255,0.5); border-color: rgba(201,168,76,0.2); }
html.light .content .pag-btn { color: rgba(26,31,46,0.55); border-color: rgba(26,31,46,0.12); }
html.light .content .pag-btn:hover, html.light .content .pag-btn.active { color: #8a6c1a; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.06); }
html.light .content .ann-link { color: #1a1f2e; }
html.light .content .ann-link:hover { color: #c9a84c; }
html.light .content .ann-table th { color: rgba(26,31,46,0.4); border-color: rgba(26,31,46,0.08); }
html.light .content .ann-table td { color: #1a1f2e; border-color: rgba(26,31,46,0.05); }
html.light .content .status-inaktiv { background: rgba(26,31,46,0.06); color: rgba(26,31,46,0.45); border-color: rgba(26,31,46,0.12); }
html.light .content .status-aktiv { background: rgba(40,167,69,0.08); color: #1e6b33; border-color: rgba(40,167,69,0.18); }
html.light .content .status-utgatt { background: rgba(220,53,69,0.06); color: #8b2020; border-color: rgba(220,53,69,0.15); }
html.light .content .card-type { color: rgba(26,31,46,0.45); }
html.light .content .card-title { color: #1a1f2e; }
html.light .content .card-address { color: rgba(26,31,46,0.45); }
html.light .content .obj-card-name { color: #1a1f2e; }
html.light .content .obj-card-row { color: rgba(26,31,46,0.55); }
html.light .content .form-label { color: rgba(26,31,46,0.5); }
html.light .content .sub-tab { color: rgba(26,31,46,0.55); border-color: rgba(26,31,46,0.12); }
html.light .content .sub-tab:hover { color: #8a6c1a; border-color: rgba(201,168,76,0.4); }
html.light .content .sub-tab.active { color: #8a6c1a; border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.08); }
html.light .content .btn-sm { color: rgba(26,31,46,0.65); border-color: rgba(26,31,46,0.12); }
html.light .content .btn-sm:hover { color: #8a6c1a; border-color: rgba(201,168,76,0.4); }
html.light .content .obj-card { background: rgba(255,255,255,0.65); border-color: rgba(26,31,46,0.08); }
html.light .content .listing-card { background: rgba(255,255,255,0.65); border-color: rgba(26,31,46,0.08); }
html.light .content .info-banner { background: rgba(201,168,76,0.05); border-color: rgba(201,168,76,0.2); }
html.light .content .info-banner-text { color: rgba(26,31,46,0.65); }
html.light .content .valg-btn { color: rgba(26,31,46,0.7); border-color: rgba(26,31,46,0.12); background: rgba(255,255,255,0.5); }
html.light .content .valg-btn:hover { color: #8a6c1a; border-color: rgba(201,168,76,0.4); }
html.light .content .cs-btn { color: rgba(26,31,46,0.7); border-color: rgba(26,31,46,0.12); background: rgba(255,255,255,0.5); }
html.light .content .search-input { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
html.light .content .location-input { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
html.light .content .filter-select { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
html.light .content .sort-select { background: rgba(255,255,255,0.6); color: #1a1f2e; border-color: rgba(26,31,46,0.12); }
html.light .filter-panel { background:rgba(255,255,255,0.98); border-color:rgba(201,168,76,0.2); }
html.light .filter-panel label { color:rgba(26,31,46,0.5); }
html.light .pris-input { background:rgba(0,0,0,0.04); color:#1a1f2e; border-color:rgba(26,31,46,0.12); }
html.light .pris-sep { color:rgba(26,31,46,0.3); }
html.light .btn-filter-reset { color:rgba(26,31,46,0.55); border-color:rgba(26,31,46,0.12); background:transparent; }
html.light .btn-filter-reset:hover { color:#1a1f2e; border-color:rgba(26,31,46,0.3); }
html.light .cs-menu { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12); }
html.light .cs-opt { color:rgba(26,31,46,0.75); }
html.light .cs-opt:hover { background:rgba(201,168,76,0.06); color:#1a1f2e; padding-left:18px; }
html.light .cs-opt.sel { color:#8a6c1a; }
html.light .cs-btn { background:rgba(255,255,255,0.7); color:#1a1f2e; border-color:rgba(26,31,46,0.12); }
html.light .cs-btn:hover { border-color:rgba(201,168,76,0.4); }
html.light .valg-menu { background:rgba(255,255,255,0.98); border-color:rgba(0,0,0,0.08); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12); }
html.light .valg-item { color:rgba(26,31,46,0.75); }
html.light .valg-item:hover { background:rgba(201,168,76,0.06); color:#1a1f2e; padding-left:20px; }
html.light .valg-item.danger { color:rgba(180,40,40,0.7); }
html.light .valg-item.danger:hover { background:rgba(220,53,69,0.06); color:rgba(180,40,40,0.9); }
html.light .valg-divider { background:rgba(26,31,46,0.06); }
html.light .valg-btn { background:rgba(255,255,255,0.7); color:#1a1f2e; border-color:rgba(26,31,46,0.12); }
html.light .valg-btn:hover { border-color:rgba(201,168,76,0.4); color:#8a6c1a; }
   Disse reglene speiler html.light / .app.dark
   Disse reglene speiler .app.light / html.dark
.app.light .theme-thumb { transform: translateX(0px) !important; }
.app.dark .theme-thumb { transform: translateX(20px) !important; }
html.light .theme-thumb { transform: translateX(0px) !important; }
html.dark .theme-thumb { transform: translateX(20px) !important; }

/* TRIPLE-TOGGLE OPPDATERT - større og penere */
.triple-toggle { display:inline-flex !important; position:relative !important; background:rgba(255,255,255,0.06) !important; border:1px solid rgba(201,168,76,0.25) !important; border-radius:24px !important; padding:4px !important; gap:2px !important; margin-bottom:20px !important; }
.triple-toggle-pill { position:absolute !important; top:4px !important; left:4px !important; height:calc(100% - 8px) !important; background:linear-gradient(135deg,#c9a84c,#e8c97a) !important; border-radius:20px !important; transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),width 0.3s cubic-bezier(0.4,0,0.2,1) !important; box-shadow:0 2px 10px rgba(201,168,76,0.4) !important; pointer-events:none !important; z-index:0 !important; }
.triple-toggle-btn { position:relative !important; z-index:1 !important; display:flex !important; align-items:center !important; gap:6px !important; padding:8px 18px !important; border-radius:20px !important; font-size:12px !important; font-weight:500 !important; font-family:'Inter',sans-serif !important; color:rgba(213,194,143,0.6) !important; cursor:pointer !important; white-space:nowrap !important; transition:color 0.2s !important; border:none !important; background:transparent !important; }
.triple-toggle-btn svg { width:13px !important; height:13px !important; }
.triple-toggle-btn.active { color:#1a1200 !important; }
.triple-toggle-btn:hover:not(.active) { color:var(--gold) !important; }
.app.light .triple-toggle { background:rgba(0,0,0,0.04) !important; border-color:rgba(201,168,76,0.3) !important; }
.app.light .triple-toggle-btn { color:rgba(26,31,46,0.5) !important; }
.app.light .triple-toggle-btn.active { color:#1a1200 !important; }
html.light .triple-toggle { background:rgba(0,0,0,0.04) !important; border-color:rgba(201,168,76,0.3) !important; }
html.light .triple-toggle-btn { color:rgba(26,31,46,0.5) !important; }
html.light .triple-toggle-btn.active { color:#1a1200 !important; }

/* ── PUB STICKY TOPBAR + FOOTER ── */
.shell { display: flex; min-height: 100vh; }
.shell .main { display: flex; flex-direction: column; flex: 1; min-height: 100vh; overflow: hidden; }
.shell .topbar { position: sticky; top: 0; z-index: 100; flex-shrink: 0; }
.shell .content, .shell .page-wrap { flex: 1; overflow-y: auto; }
.shell .pub-footer { position: sticky; bottom: 0; z-index: 100; flex-shrink: 0; }

/* ── LIGHT THEME — TABELLER OG NY TEKST ── */
.app.light table td { color: rgba(38,43,61,0.75); }
.app.light table th { color: rgba(38,43,61,0.4); border-bottom-color: rgba(38,43,61,0.1); }
.app.light table tr td { border-bottom-color: rgba(38,43,61,0.06); }
.app.light table tr:hover td { background: rgba(38,43,61,0.02); }
.app.light input[type=text], .app.light input[type=number], .app.light input[type=email], .app.light select { background: rgba(255,255,255,0.7); border-color: rgba(38,43,61,0.12); color: #2a2218; }
.app.light code { background: rgba(38,43,61,0.07); color: rgba(38,43,61,0.7); }
.app.light p { color: rgba(38,43,61,0.6); }

/* ── DARK THEME — TABELLER OG NY TEKST ── */
.dark table td, .app.dark table td { color: rgba(213,194,143,0.7); }
.dark table th, .app.dark table th { color: rgba(213,194,143,0.35); }
.dark table tr td, .app.dark table tr td { border-bottom-color: rgba(255,255,255,0.04); }
.dark table tr th, .app.dark table tr th { border-bottom-color: rgba(255,255,255,0.07); }
.dark p, .app.dark p { color: rgba(213,194,143,0.55); }
.dark code, .app.dark code { background: rgba(255,255,255,0.06); color: rgba(213,194,143,0.7); }

/* ── CHART LABELS ── */
.app.dark .chart-label { color: rgba(213,194,143,0.4); }
.app.light .chart-label { color: rgba(38,43,61,0.45); }

/* ── LIGHT THEME — SEKUNDÆR TEKST ── */
.dark .card-address, .dark .card-type { color: rgba(213,194,143,0.45); }
.light .card-address, .light .card-type { color: rgba(38,43,61,0.5); }
.dark .ann-card-address, .dark .ann-card-type { color: rgba(213,194,143,0.45); }
.light .ann-card-address, .light .ann-card-type { color: rgba(38,43,61,0.5); }

/* ══════════════════════════════════════════════
 LEIELINK LIGHT THEME — GLOBAL TEKSTFIKS
 ══════════════════════════════════════════════ */
.light p,.app.light p,.light td,.app.light td,.light li,.app.light li{color:rgba(38,43,61,0.72)!important;}
.light .feat-body,.app.light .feat-body,.light .stat-sub,.app.light .stat-sub,.light .card-type,.app.light .card-type,.light .card-address,.app.light .card-address,.light .ann-card-type,.app.light .ann-card-type,.light .ann-card-address,.app.light .ann-card-address,.light .hv-bio,.app.light .hv-bio,.light .hv-sub,.app.light .hv-sub,.light .ls-meta,.app.light .ls-meta{color:rgba(38,43,61,0.52)!important;}
.light table td,.app.light table td{color:rgba(38,43,61,0.72)!important;border-bottom-color:rgba(38,43,61,0.06)!important;}
.light table th,.app.light table th{color:rgba(38,43,61,0.4)!important;border-bottom-color:rgba(38,43,61,0.1)!important;}
.light .feat-card,.app.light .feat-card{background:rgba(255,255,255,0.75)!important;border-color:rgba(38,43,61,0.1)!important;}
.light .stat,.app.light .stat{background:rgba(255,255,255,0.75)!important;border-color:rgba(38,43,61,0.1)!important;}
.light input:not([type=checkbox]):not([type=radio]),.light select,.light textarea,.app.light input:not([type=checkbox]):not([type=radio]),.app.light select,.app.light textarea{background:rgba(255,255,255,0.8)!important;border-color:rgba(38,43,61,0.12)!important;color:#2a2218!important;}
.light code,.app.light code{background:rgba(38,43,61,0.07)!important;color:rgba(38,43,61,0.7)!important;}
.light [style*="rgba(213,194,143"],.app.light [style*="rgba(213,194,143"]{color:rgba(38,43,61,0.65)!important;}
.light .nav-badge,.light .ann-badge,.light .card-badge,.light .stat-val.gold,.light .user-plan,.app.light .nav-badge,.app.light .ann-badge,.app.light .card-badge,.app.light .stat-val.gold,.app.light .user-plan{color:unset!important;}
.light .ann-card-price,.light .hv-budget,.light .ls-budget,.light .card-price,.app.light .ann-card-price,.app.light .hv-budget,.app.light .ls-budget,.app.light .card-price{color:#8a6c1a!important;}

/* Fix hvite tekster på lys bakgrunn */
.light [style*="rgba(255,255,255,0.5)"],
.light [style*="rgba(255,255,255,0.4)"],
.light [style*="rgba(255,255,255,0.3)"],
.app.light [style*="rgba(255,255,255,0.5)"],
.app.light [style*="rgba(255,255,255,0.4)"],
.app.light [style*="rgba(255,255,255,0.3)"] {
 color: rgba(38,43,61,0.65) !important;
}

/* Form */
.app.light .form-label { color:rgba(38,43,61,0.5); }
.app.light .form-input,.app.light .form-textarea { background:rgba(255,255,255,0.8); color:#2a2218; border-color:rgba(38,43,61,0.12); }

/* Modal */
.app.light .modal { background:#f5f2ee; border-color:rgba(201,168,76,0.2); }
.app.light .modal-title { color:#2a2218; }
.app.light .modal-sub { color:rgba(38,43,61,0.5); }

/* Topbar-knapper i utleier */
.app.light .topbar .tb-btn { background:rgba(58,65,92,0.06); border-color:rgba(58,65,92,0.15); color:#5a4e30; }

/* Diverse tekst-elementer */
.app.light .hit-count,.app.light .section-path { color:rgba(38,43,61,0.45); }
.app.light .section-path span { color:rgba(38,43,61,0.75); }

/* ══════════════════════════════════════════════
   GLOBAL CHIP + FILTER-PANEL (dark base)
   Brukes overalt — pub, utleier, leietaker
   ══════════════════════════════════════════════ */

/* Chip — pill-knapp for filter */
.chip { padding:7px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04); color:rgba(213,194,143,0.65); font-size:12px; font-family:'Inter',sans-serif; cursor:pointer; transition:all .15s; white-space:nowrap; user-select:none; }
.chip:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,0.08); }
.chip.chip-active { border-color:var(--gold); background:rgba(201,168,76,0.12); color:var(--gold); }
.app.light .chip { background:rgba(26,31,46,0.04); border-color:rgba(26,31,46,0.1); color:rgba(26,31,46,0.65); }
.app.light .chip:hover { border-color:rgba(201,168,76,0.5); color:#8a6c1a; background:rgba(201,168,76,0.08); }
.app.light .chip.chip-active { border-color:rgba(201,168,76,0.4); background:rgba(201,168,76,0.1); color:#8a6c1a; }

/* Filter-panel — dropdown under chip */
.filter-panel { position:absolute; top:calc(100% + 6px); left:0; min-width:260px; background:rgba(22,27,42,0.98); border:1px solid rgba(201,168,76,0.15); border-radius:12px; padding:16px; z-index:500; box-shadow:0 4px 6px -1px rgba(0,0,0,0.4),0 10px 30px rgba(0,0,0,0.5); backdrop-filter:blur(16px); display:none; }
.filter-panel.open { display:block; animation:llDropIn .12s ease; }
.filter-panel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.app.light .filter-panel { background:rgba(255,255,255,0.98); border-color:rgba(201,168,76,0.2); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12); }

/* Filter-group label */
.filter-group { position:relative; }
.filter-group label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:rgba(213,194,143,0.4); margin-bottom:6px; font-family:'Inter',sans-serif; }
.app.light .filter-group label { color:rgba(26,31,46,0.5); }

/* Filter-actions */
.filter-actions { display:flex; gap:8px; margin-top:14px; justify-content:flex-end; }
.filter-btn-reset { padding:7px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); background:transparent; font-size:12px; cursor:pointer; color:rgba(213,194,143,0.6); font-family:'Inter',sans-serif; }
.filter-btn-apply { padding:7px 18px; border-radius:8px; border:none; background:linear-gradient(135deg,#c9a84c,#e8c97a); color:#1a1200; font-size:12px; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; }
.app.light .filter-btn-reset { border-color:rgba(26,31,46,0.12); color:rgba(26,31,46,0.6); }

/* html.light aliases */
html.light .chip { background:rgba(26,31,46,0.04); border-color:rgba(26,31,46,0.1); color:rgba(26,31,46,0.65); }
html.light .chip:hover { border-color:rgba(201,168,76,0.5); color:#8a6c1a; background:rgba(201,168,76,0.08); }
html.light .chip.chip-active { border-color:rgba(201,168,76,0.4); background:rgba(201,168,76,0.1); color:#8a6c1a; }
html.light .filter-panel { background:rgba(255,255,255,0.98); border-color:rgba(201,168,76,0.2); box-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 10px 30px rgba(0,0,0,0.12); }
html.light .filter-group label { color:rgba(26,31,46,0.5); }
html.light .filter-btn-reset { border-color:rgba(26,31,46,0.12); color:rgba(26,31,46,0.6); }

/* ══ TILGJENGELIGHET (Aa-knapp) ══ */
.a11y-wrap{position:fixed;bottom:24px;right:24px;z-index:800;}
.a11y-trigger{display:flex;align-items:center;gap:5px;padding:7px 13px;border-radius:20px;border:1px solid rgba(201,168,76,0.3);background:rgba(22,27,42,0.92);color:#c9a84c;font-size:13px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;backdrop-filter:blur(8px);transition:all .15s;box-shadow:0 4px 16px rgba(0,0,0,0.3);}
.a11y-trigger:hover{border-color:rgba(201,168,76,0.6);background:rgba(22,27,42,0.98);}
.a11y-trigger svg{width:12px;height:12px;transition:transform .2s;}
.a11y-trigger.open svg{transform:rotate(180deg);}
.app.light .a11y-trigger{background:rgba(255,255,255,0.95);color:#8a6c1a;border-color:rgba(201,168,76,0.3);box-shadow:0 4px 16px rgba(0,0,0,0.1);}
.a11y-tooltip{position:absolute;bottom:calc(100% + 8px);right:0;background:rgba(22,27,42,0.95);border:1px solid rgba(201,168,76,0.15);border-radius:8px;padding:7px 12px;font-size:10px;color:rgba(213,194,143,0.7);font-family:'Inter',sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;line-height:1.5;}
.a11y-wrap:hover .a11y-tooltip{opacity:1;}

/* ══ THEME TRANSITION (global smooth overgang) ══ */
html.dark,html.dark body{background:#141824;}
html.light,html.light body{background:#e8e3f0;}
html.theme-transitioning,html.theme-transitioning body{transition:background 4.5s ease!important;}
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
 transition:
 background 4.5s ease,
 background-color 4.5s ease,
 color 3.5s ease,
 border-color 3.5s ease,
 box-shadow 3.5s ease !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   START — i18n SPRÅKVELGER + ADMIN
   ══════════════════════════════════════════════════════════════════════════ */
/* ==========================================================================
   SPRÅKVELGER — to varianter (topbar + sidebar)
   Legges inn i public/css/leielink.css
   ========================================================================== */

/* ---- FELLES BASIS ---- */
.sprakvelger {
  position: relative;
  display: inline-block;
}

.sprakvelger-knapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-subtle, rgba(255, 255, 255, 0.05));
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}

.sprakvelger-knapp:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--border-hover, rgba(255, 255, 255, 0.2));
}

.sprakvelger-knapp:focus-visible {
  outline: 2px solid var(--accent, #4a90e2);
  outline-offset: 2px;
}

.sprakvelger-flagg {
  font-size: 16px;
  line-height: 1;
}

.sprakvelger-kode {
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 12px;
}

.sprakvelger-pil {
  font-size: 10px;
  opacity: 0.6;
  transition: transform 0.2s ease;
  margin-left: 2px;
}

.sprakvelger.open .sprakvelger-pil {
  transform: rotate(180deg);
}

/* ---- DROPDOWN-MENY (felles basis) ---- */
.sprakvelger-meny {
  position: absolute;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--bg-elevated, #1a1a1a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  max-height: 340px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.sprakvelger.open .sprakvelger-meny {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sprakvelger-meny[hidden] {
  display: none;
}

.sprakvelger-meny li {
  margin: 0;
  padding: 0;
}

.sprakvelger-element {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  color: var(--text-primary, #fff);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: inherit;
}

.sprakvelger-element:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.08));
}

.sprakvelger-element.aktiv {
  background: var(--bg-selected, rgba(74, 144, 226, 0.15));
  color: var(--accent, #4a90e2);
}

.sprakvelger-navn {
  flex: 1;
}

.sprakvelger-hake {
  color: var(--accent, #4a90e2);
  font-weight: 700;
}

/* ==========================================================================
   VARIANT A — TOPBAR (kompakt)
   Flagg + språk-kode (NO/EN/FR...). Meny åpner nedover, høyrejustert.
   ========================================================================== */
.sprakvelger--topbar .sprakvelger-meny {
  top: calc(100% + 6px);
  right: 0;
}

/* ==========================================================================
   VARIANT B — SIDEBAR (full bredde)
   Flagg + fullt navn. Meny åpner oppover, full bredde.
   ========================================================================== */
.sprakvelger--sidebar {
  width: 100%;
}

.sprakvelger--sidebar .sprakvelger-knapp--full {
  width: 100%;
  justify-content: flex-start;
}

.sprakvelger--sidebar .sprakvelger-knapp--full .sprakvelger-pil {
  margin-left: auto;
}

.sprakvelger--sidebar .sprakvelger-meny {
  bottom: calc(100% + 6px);
  left: 0;
  right: 0;
}

/* ==========================================================================
   LIGHT-TEMA VARIANTER
   ========================================================================== */
.app.light .sprakvelger-knapp,
html.light .sprakvelger-knapp {
  background: rgba(0, 0, 0, 0.04);
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.1);
}

.app.light .sprakvelger-knapp:hover,
html.light .sprakvelger-knapp:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
}

.app.light .sprakvelger-meny,
html.light .sprakvelger-meny {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.app.light .sprakvelger-element,
html.light .sprakvelger-element {
  color: #1a1a1a;
}

.app.light .sprakvelger-element:hover,
html.light .sprakvelger-element:hover {
  background: rgba(0, 0, 0, 0.05);
}

.app.light .sprakvelger-element.aktiv,
html.light .sprakvelger-element.aktiv {
  background: rgba(74, 144, 226, 0.1);
}

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media (max-width: 768px) {
  .sprakvelger-knapp {
    padding: 8px 12px;
  }
  .sprakvelger-meny {
    min-width: 220px;
  }
}

/* ==========================================================================
   ADMIN KONFIG — RADIO-KORT
   Legges inn i public/css/leielink.css eller egen admin.css
   ========================================================================== */

.konfig-seksjon {
  background: var(--bg-elevated, #13131a);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  padding: 28px;
  margin-bottom: 24px;
}

.konfig-seksjon-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.konfig-seksjon-header h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--text-primary, #fff);
}

.konfig-beskrivelse {
  font-size: 14px;
  color: var(--text-muted, #9ca3af);
  margin: 0;
}

/* Radio-gruppe: 3 kort side-ved-side */
.konfig-radio-gruppe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.konfig-radio-kort {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--bg-subtle, rgba(255, 255, 255, 0.03));
  border: 2px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.konfig-radio-kort:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--border-strong, rgba(255, 255, 255, 0.15));
}

.konfig-radio-kort.aktiv {
  background: var(--bg-selected, rgba(74, 144, 226, 0.1));
  border-color: var(--accent, #4a90e2);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

.konfig-radio-kort input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--accent, #4a90e2);
  cursor: pointer;
  flex-shrink: 0;
}

.konfig-radio-innhold {
  flex: 1;
  min-width: 0;
}

.konfig-radio-tittel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.konfig-radio-ikon {
  font-size: 18px;
}

.konfig-radio-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent, #4a90e2);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 12px;
}

.konfig-radio-badge--advarsel {
  background: #f59e0b;
  color: #000;
}

.konfig-radio-tekst {
  font-size: 13px;
  color: var(--text-muted, #9ca3af);
  line-height: 1.5;
}

/* Form-handling (submit-knapp + status) */
.konfig-form-handling {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.konfig-status {
  font-size: 13px;
  color: var(--text-muted, #9ca3af);
}
.konfig-status--laster { color: var(--text-muted, #9ca3af); }
.konfig-status--suksess { color: #10b981; font-weight: 500; }
.konfig-status--feil { color: #ef4444; font-weight: 500; }

/* Light-tema variant */
.app.light .konfig-seksjon,
html.light .konfig-seksjon {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}

.app.light .konfig-radio-kort,
html.light .konfig-radio-kort {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}

.app.light .konfig-radio-kort:hover,
html.light .konfig-radio-kort:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
}

.app.light .konfig-radio-kort.aktiv,
html.light .konfig-radio-kort.aktiv {
  background: rgba(74, 144, 226, 0.08);
  border-color: var(--accent, #4a90e2);
}

/* ==========================================================================
   ADMIN — SPRÅKHÅNDTERING
   Legges inn i public/css/leielink.css eller egen admin.css
   ========================================================================== */

.admin-hovedinnhold {
  min-height: 100vh;
}

.admin-innhold {
  padding: 32px;
  max-width: 1400px;
  margin: 0 auto;
}

.admin-seksjon-header {
  margin-bottom: 32px;
}

.admin-seksjon-header h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: var(--text-primary, #fff);
}

.admin-beskrivelse {
  color: var(--text-muted, #9ca3af);
  font-size: 15px;
}

/* ======================
   SPRÅK-TABELL
   ====================== */
.sprak-tabell-wrap {
  background: var(--bg-subtle, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  overflow-x: auto;
}

.sprak-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.sprak-tabell thead {
  background: var(--bg-elevated, rgba(255, 255, 255, 0.04));
}

.sprak-tabell th {
  text-align: left;
  padding: 14px 16px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #9ca3af);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.sprak-tabell td {
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.05));
  color: var(--text-primary, #fff);
  vertical-align: middle;
}

.sprak-tabell tr:last-child td { border-bottom: none; }

.sprak-tabell tr.rad-deaktivert {
  opacity: 0.45;
}

.sprak-tabell tr.rad-deaktivert:hover {
  opacity: 0.7;
}

.sprak-rekkefolge {
  font-family: 'SF Mono', Monaco, monospace;
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
  width: 40px;
}

.sprak-navn-celle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sprak-flagg {
  font-size: 20px;
  line-height: 1;
}

.sprak-navn {
  font-weight: 500;
}

.sprak-tabell code {
  background: var(--bg-subtle, rgba(255, 255, 255, 0.05));
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 12px;
  font-family: 'SF Mono', Monaco, monospace;
}

.tid-celle {
  color: var(--text-muted, #9ca3af);
  font-size: 13px;
}

.align-right { text-align: right; }

/* ======================
   BADGES
   ====================== */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
}
.badge--suksess { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.badge--info    { background: rgba(74, 144, 226, 0.15); color: var(--accent, #4a90e2); }
.badge--advarsel{ background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.badge--standard{ background: linear-gradient(135deg, #f59e0b, #f97316); color: #000; font-weight: 700; }

/* ======================
   TOGGLE-BRYTER
   ====================== */
.toggle-bryter {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.toggle-bryter.toggle-laast { cursor: not-allowed; opacity: 0.6; }

.toggle-bryter input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  transition: background 0.2s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-bryter input:checked + .toggle-slider {
  background: var(--accent, #4a90e2);
}

.toggle-bryter input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ======================
   MINI-KNAPPER
   ====================== */
.btn-mini {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-subtle, rgba(255, 255, 255, 0.05));
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.btn-mini:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--border-strong, rgba(255, 255, 255, 0.2));
}
.btn-mini.btn-fare {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
.btn-mini.btn-fare:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

.mester-markert {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  font-style: italic;
}

/* ======================
   OPPLASTING-SKJEMA
   ====================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.form-felt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-felt--bred { grid-column: 1 / -1; }

.form-felt label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.form-felt input[type="text"],
.form-felt input[type="file"],
.form-felt select {
  padding: 10px 12px;
  background: var(--bg-subtle, rgba(255, 255, 255, 0.04));
  color: var(--text-primary, #fff);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
}

.form-felt input:focus,
.form-felt select:focus {
  outline: none;
  border-color: var(--accent, #4a90e2);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
}

.form-felt small {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}
.form-felt small a {
  color: var(--accent, #4a90e2);
  text-decoration: none;
}
.form-felt small a:hover { text-decoration: underline; }

/* ======================
   VALIDERINGS-RESULTAT
   ====================== */
.validering-resultat {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.validering-resultat h3 {
  margin: 12px 0 6px 0;
  font-size: 14px;
  font-weight: 700;
}
.validering-resultat h3:first-child { margin-top: 0; }
.validering-resultat ul { margin: 0 0 8px 16px; padding: 0; }
.validering-resultat pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 12px;
  border-radius: 6px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--text-primary, #fff);
}
.validering-suksess {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.validering-feil {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ======================
   LIGHT-TEMA
   ====================== */
.app.light .sprak-tabell-wrap,
html.light .sprak-tabell-wrap {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.08);
}
.app.light .sprak-tabell thead,
html.light .sprak-tabell thead {
  background: rgba(0, 0, 0, 0.03);
}
.app.light .toggle-slider,
html.light .toggle-slider { background: rgba(0, 0, 0, 0.2); }
.app.light .form-felt input[type="text"],
.app.light .form-felt select,
html.light .form-felt input[type="text"],
html.light .form-felt select {
  background: #fff;
  color: #1a1a1a;
  border-color: rgba(0, 0, 0, 0.15);
}


/* ══════════════════════════════════════════════════════════════════════════
   TWEMOJI COUNTRY FLAGS — viser fargede flagg på Windows/Linux Chrome/Edge
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════════
   SPRÅKVELGER SIDEBAR — KOMPAKT: kun flagg + kode (NO/EN/FR)
   Full meny med navn åpnes ved klikk
   ══════════════════════════════════════════════════════════════════════════ */

.sprakvelger--sidebar {
  padding: 0 18px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: flex-start !important;
  position: relative !important;
}

/* ---- KOMPAKT KNAPP: flagg + språk-kode ---- */
.sprakvelger--sidebar .sprakvelger-knapp,
.sprakvelger--sidebar .sprakvelger-knapp--kompakt,
.sprakvelger--sidebar .sprakvelger-knapp--full {
  width: auto !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: rgba(199, 168, 76, 0.08) !important;
  color: rgba(213, 194, 143, 0.85) !important;
  border: 1px solid rgba(199, 168, 76, 0.2) !important;
  border-radius: 6px !important;
  min-height: 24px !important;
  line-height: 1 !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  letter-spacing: 0.05em !important;
}

.sprakvelger--sidebar .sprakvelger-knapp:hover {
  background: rgba(199, 168, 76, 0.15) !important;
  border-color: rgba(199, 168, 76, 0.35) !important;
  color: rgba(213, 194, 143, 1) !important;
}

/* ---- Flagg ---- */
.sprakvelger-flagg {
  font-family: "Twemoji Country Flags", "Apple Color Emoji",
               "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol",
               sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.sprakvelger--sidebar .sprakvelger-flagg {
  font-size: 12px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* ---- Språk-kode (NO, EN, FR, ...) ---- */
.sprakvelger--sidebar .sprakvelger-kode {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ---- Skjul navn-span i knappen hvis fortsatt finnes fra gammel template ---- */
.sprakvelger--sidebar .sprakvelger-knapp > .sprakvelger-navn {
  display: none !important;
}

/* ---- Pil ---- */
.sprakvelger--sidebar .sprakvelger-pil {
  font-size: 8px !important;
  opacity: 0.6 !important;
  margin-left: 1px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWN-MENY — full med flagg + navn
   ══════════════════════════════════════════════════════════════════════════ */

.sprakvelger--sidebar .sprakvelger-meny,
.sprakvelger--sidebar .sprakvelger-meny--sidebar {
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  left: 18px !important;
  right: auto !important;
  min-width: 130px !important;
  max-width: 160px !important;
  padding: 4px !important;
  margin: 0 !important;
  background: rgba(22, 27, 42, 0.98) !important;
  border: 1px solid rgba(199, 168, 76, 0.25) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  z-index: 500 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  list-style: none !important;
}

.sprakvelger--sidebar .sprakvelger-element {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
  color: rgba(213, 194, 143, 0.85) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: 'Inter', sans-serif !important;
  gap: 8px !important;
}

.sprakvelger--sidebar .sprakvelger-element:hover {
  background: rgba(199, 168, 76, 0.12) !important;
  color: rgba(213, 194, 143, 1) !important;
}

.sprakvelger--sidebar .sprakvelger-element.aktiv {
  background: rgba(199, 168, 76, 0.18) !important;
  color: #c9a84c !important;
  font-weight: 600 !important;
}

.sprakvelger--sidebar .sprakvelger-element .sprakvelger-flagg {
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.sprakvelger--sidebar .sprakvelger-element .sprakvelger-navn {
  flex: 1 !important;
  font-size: 11px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline !important;
}

.sprakvelger--sidebar .sprakvelger-hake {
  color: #c9a84c !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SLUTT — i18n SPRÅKVELGER + ADMIN
   ══════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   COOKIE PREFERENCE CENTER
   Opprettet: 22. april 2026
   Matcher Leielinks gull/mørk palett (#c9a84c, #1a1f2e)
   RTL-kompatibel via [dir="rtl"]-selektorer
   ════════════════════════════════════════════════════════════ */

/* Overlay bak panel */
.cookie-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  animation: cookiePanelFade 0.2s ease;
}

/* Slide-in panel (høyre side, LTR — venstre side for RTL) */
.cookie-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  max-width: 100vw;
  background: rgba(22, 27, 42, 0.98);
  border-left: 1px solid rgba(201, 168, 76, 0.2);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.4);
  animation: cookiePanelSlideIn 0.25s ease;
  font-family: 'Inter', sans-serif;
}

/* RTL — panelet kommer fra venstre */
[dir="rtl"] .cookie-panel {
  right: auto;
  left: 0;
  border-left: none;
  border-right: 1px solid rgba(201, 168, 76, 0.2);
  box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
  animation: cookiePanelSlideInRtl 0.25s ease;
}

/* Light mode */
html.light .cookie-panel {
  background: #fdf8ec;
  border-left-color: rgba(201, 168, 76, 0.3);
}
html.light[dir="rtl"] .cookie-panel {
  border-right-color: rgba(26, 31, 46, 0.1);
}

@keyframes cookiePanelSlideIn    { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes cookiePanelSlideInRtl { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes cookiePanelFade       { from { opacity: 0; } to { opacity: 1; } }

/* Header */
.cookie-panel-header {
  padding: 18px 22px;
  border-bottom: 1px solid rgba(201, 168, 76, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
html.light .cookie-panel-header {
  border-bottom-color: rgba(26, 31, 46, 0.08);
}
.cookie-panel-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(232, 224, 208, 0.95);
  font-family: 'Inter', sans-serif;
}
html.light .cookie-panel-header h2 {
  color: #2a2218;
  font-weight: 700;
}
.cookie-panel-lukk {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: rgba(213, 194, 143, 0.6);
  padding: 4px 10px;
  transition: color 0.15s;
}
.cookie-panel-lukk:hover {
  color: #c9a84c;
}
html.light .cookie-panel-lukk {
  color: rgba(26, 31, 46, 0.5);
}
html.light .cookie-panel-lukk:hover {
  color: #8a6c1a;
}

/* Body */
.cookie-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
}
.cookie-panel-intro {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: rgba(213, 194, 143, 0.65);
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}
html.light .cookie-panel-intro {
  color: #4a4035;
}

/* Kategori-kort */
.cookie-kategori {
  border: 1px solid rgba(201, 168, 76, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
}
html.light .cookie-kategori {
  border-color: rgba(201, 168, 76, 0.25);
  background: rgba(255, 255, 255, 0.6);
}
.cookie-kategori-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  gap: 12px;
}
.cookie-kategori-navn {
  font-size: 13px;
  font-weight: 600;
  color: rgba(232, 224, 208, 0.9);
  font-family: 'Inter', sans-serif;
}
html.light .cookie-kategori-navn {
  color: #1a1f2e;
  font-weight: 700;
}
.cookie-kategori-beskrivelse {
  margin: 0;
  font-size: 11.5px;
  color: rgba(213, 194, 143, 0.55);
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}
html.light .cookie-kategori-beskrivelse {
  color: #5a4f3f;
}

/* Badge for alltid aktiv */
.cookie-badge-laast {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(201, 168, 76, 0.7);
  background: rgba(201, 168, 76, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.2);
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
html.light .cookie-badge-laast {
  color: #8a6c1a;
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.3);
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cookie-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: 20px;
  transition: 0.2s;
}
html.light .cookie-toggle-slider {
  background: rgba(26, 31, 46, 0.08);
  border-color: rgba(26, 31, 46, 0.15);
}
.cookie-toggle-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background: rgba(213, 194, 143, 0.7);
  border-radius: 50%;
  transition: 0.2s;
}
[dir="rtl"] .cookie-toggle-slider::before {
  left: auto;
  right: 2px;
}
html.light .cookie-toggle-slider::before {
  background: rgba(26, 31, 46, 0.4);
}
.cookie-toggle input:checked + .cookie-toggle-slider {
  background: linear-gradient(135deg, #c9a84c, #e8c97a);
  border-color: #c9a84c;
}
.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(16px);
  background: #1a1200;
}
[dir="rtl"] .cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(-16px);
}

/* Meta-info (ID, tidspunkt) */
.cookie-panel-meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 168, 76, 0.1);
  font-size: 10.5px;
  color: rgba(213, 194, 143, 0.4);
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}
html.light .cookie-panel-meta {
  border-top-color: rgba(201, 168, 76, 0.3);
  color: #5a4f3f;
}
.cookie-panel-meta strong {
  font-weight: 600;
  color: rgba(213, 194, 143, 0.6);
}
html.light .cookie-panel-meta strong {
  color: #2a2218;
}
.cookie-panel-meta a {
  color: #c9a84c;
  text-decoration: none;
}
.cookie-panel-meta a:hover {
  text-decoration: underline;
}

/* Footer buttons */
.cookie-panel-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(201, 168, 76, 0.12);
  display: flex;
  gap: 8px;
}
html.light .cookie-panel-footer {
  border-top-color: rgba(26, 31, 46, 0.08);
}
.cookie-btn-sekundaer,
.cookie-btn-primaer {
  flex: 1;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(201, 168, 76, 0.3);
  background: transparent;
  color: rgba(232, 224, 208, 0.85);
}
.cookie-btn-sekundaer:hover {
  background: rgba(201, 168, 76, 0.08);
  border-color: rgba(201, 168, 76, 0.5);
}
html.light .cookie-btn-sekundaer {
  color: #2a2218;
  border-color: rgba(201, 168, 76, 0.4);
}
.cookie-btn-primaer {
  border: none;
  background: linear-gradient(135deg, #c9a84c, #e8c97a);
  color: #1a1200;
}
.cookie-btn-primaer:hover {
  filter: brightness(1.05);
}

/* Mobil */
@media (max-width: 600px) {
  .cookie-panel { width: 100vw; }
  .cookie-panel-footer { flex-wrap: wrap; }
  .cookie-panel-footer button { flex: 1 1 calc(50% - 4px); min-width: 0; }
}


/* [hidden]-attributtet må overstyre display: flex/etc */
.cookie-panel[hidden],
.cookie-panel-overlay[hidden] {
  display: none !important;
}