:root{
  --bg:#0b1220;
  --bg2:#0a0f1a;
  --panel:#0f1923;
  --panel-2:#0c1622;
  --line:#1b2a3b;
  --text:#eaf1ff;
  --muted:#9bb3cf;
  --chip:#122233;
  --chipOn:#1a2f4a;
  --b1:#6FE3FF; --b2:#8B5CFF; --b3:#00E1C6; --b4:#6DE37C;
  --focus-ring: 0 0 0 4px rgba(111,227,255,.10), 0 10px 24px rgba(0,0,0,.25);
  --header-h:64px;
  --tabbar-h:64px;
}

html,body {
  height:100%;
  margin:0;
  overflow-x:hidden;
}

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

img {
  display:block;
  max-width:100%;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
}

/* Fix für Grid/Card Overflow */
.grid, .card, .card * {
  min-width:0;
}


body{
  min-height:100vh;
  background:
    radial-gradient(900px 600px at -10% -10%, rgba(111,227,255,.14), transparent 60%),
    radial-gradient(800px 500px at 110% 0%, rgba(139,92,255,.12), transparent 60%),
    radial-gradient(700px 500px at 40% 120%, rgba(0,225,198,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:15px;
}

.layout{
  display:grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns:260px 1fr;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
  transition:grid-template-columns .3s ease;
  padding-top: var(--header-h);
}
.sidebar{grid-area:sidebar}
.main-container{grid-area:main}
.footer{grid-area:footer}

@media (max-width:820px){
  .layout{
    grid-template-columns:1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }
  .sidebar{display:none !important;position:fixed !important;left:-9999px}
}

.sidebar{
  width:260px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-right:1px solid var(--line);
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
  z-index:10;              /* normaler Layer */
  transition:width .3s ease;
  position:relative;       /* NICHT sticky */
  top:auto;
}

.sidebar-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:50px;
  cursor:pointer;
  font-size:20px;
  color:#c6d4ea;
  border-bottom:1px solid var(--line);
}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:6px}
.nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#c6d4ea;border:1px solid transparent}
.nav a:hover{background:linear-gradient(90deg,rgba(111,227,255,.12),rgba(139,92,255,.12));border-color:var(--line);color:#fff}
.nav a.active{background:linear-gradient(90deg,rgba(111,227,255,.18),rgba(139,92,255,.18));color:#fff}
.sidebar.minimized{width:60px}
.sidebar.minimized .nav a span:not(.icon){display:none}
.layout.sidebar-minimized{grid-template-columns:60px 1fr}

.main-container{display:flex;flex-direction:column}

.footer{
  background:#101b29;
  padding:40px 20px;
  position:relative;
  z-index:0;
}

.footer .columns{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:30px;
}
.footer h4{margin:0 0 12px;font-weight:800;color:#fff}
.footer ul{list-style:none}
.footer ul li{margin:6px 0}
.footer a{color:#aab6c8}
.footer a:hover{color:#fff}
.footer .bottom{text-align:center;margin-top:30px;color:#667b92;font-size:12px}

.lang-footer.horizontal{display:flex;gap:10px}
.lang-footer.horizontal li{margin:0}
.lang-footer.horizontal li a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--chip);
  color:#c6d4ea;
  border:1px solid var(--line)
}
.lang-footer.horizontal li a:hover{background:var(--chipOn);color:#fff}
.lang-footer.horizontal li.active a{
  background:linear-gradient(135deg,var(--b1),var(--b2));
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 22px rgba(139,92,255,.25), 0 4px 12px rgba(111,227,255,.18);
}

.topbar{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  padding:6px 12px;
}
.brand{display:flex;align-items:center;justify-content:flex-start;height:44px}
.brand a{display:flex;align-items:center;justify-content:center;line-height:0}
.brand svg{display:block;max-height:36px}
.center{justify-self:center}
.brand a:focus{outline:2px solid rgba(111,227,255,.4);outline-offset:4px}

.wallet-pill{
  display:flex;
  align-items:center;
  overflow:visible;
  background:#142635;
  border:1px solid #1e3347;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
  position:relative;
}
.balance-btn{
  display:flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 12px;
  background:#13212e;
  border:none;
  color:#fff;
  cursor:pointer;
  outline:none;
}
.balance-btn .prefix{opacity:.9;font-weight:800}
.balance-btn .amount{font-weight:800}
.balance-btn:focus{box-shadow:var(--focus-ring)}
.balance-btn .caret{transition:transform .15s ease}
.balance-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.wallet-cta{
  display:inline-flex;
  align-items:center;
  height:42px;
  padding:0 14px;
  background:#2f80ff;
  color:#fff;
  font-weight:800;
  border-left:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  border-radius:0 12px 12px 0;
}
.wallet-cta:hover{filter:brightness(1.05)}

.tools{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.icon-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 10px;
  border-radius:10px;
  background:transparent;
  border:1px solid transparent;
  color:#fff;
  cursor:pointer;
  position:relative;
}
.icon-btn:hover{background:#13212e;border-color:#1e3347}
.icon-btn .dot{width:8px;height:8px;background:#18ff6d;border-radius:999px;display:inline-block;margin-left:-6px}
.icon-btn svg{width:18px;height:18px;display:block}

.pop{
  position:absolute;
  top:56px;
  right:0;
  min-width:240px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 24px 50px rgba(0,0,0,.45);
  opacity:0;
  transform:scale(.96) translateY(-6px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:12000;
}
.pop.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.pop::after{content:"";position:absolute;top:-8px;right:28px;border:8px solid transparent;border-bottom-color:var(--panel)}
.user-menu{padding:8px}
.user-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;color:#d9e6ff}
.user-menu a:hover{background:#13212e;border-color:#1e3347;color:#fff}

.currency-pop{min-width:280px}
.currency-pop .opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid transparent;background:transparent;color:#d9e6ff;width:100%}
.currency-pop .opt:hover{background:#13212e;border-color:#1e3347;color:#fff}
.currency-pop .left{display:flex;align-items:center;gap:10px;font-weight:800}
.currency-pop .amt{opacity:.85}

.notif{width:380px;max-width:92vw}
.notif .head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 6px}
.notif .head h4{margin:0;font-size:16px}
.notif .mark{font-size:12px;color:#bcd8ff;cursor:pointer}
.notif .section-title{padding:8px 14px;color:#9bb3cf;text-transform:uppercase;font-size:11px;letter-spacing:.6px}
.notif-list{display:grid;gap:10px;padding:0 10px 12px}
.notif-card{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;
  align-items:center;
  background:#152636;
  border:1px solid #1e3347;
  border-radius:10px;
  padding:10px;
}
.notif-icon{width:46px;height:46px;border-radius:10px;background:#15384d;display:flex;align-items:center;justify-content:center}
.notif-body b{display:block;margin-bottom:2px}
.notif .dot-live{width:8px;height:8px;background:#18ff6d;border-radius:999px;display:inline-block;margin-left:6px}

.btn{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
.btn-grad{background:linear-gradient(90deg,#2a6cf6,#8b5cff);color:#fff}
.btn-outline{background:transparent;border-color:var(--line);color:#eaf1ff}
.btn:hover{filter:brightness(1.06)}
.btn:focus{outline:none;box-shadow:var(--focus-ring)}

.balance{background:linear-gradient(135deg,var(--b1),var(--b2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}

.panel{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  padding:20px;
}
.form-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.form-head h1{margin:0;font-size:20px;font-weight:900}
.form-sub{color:var(--muted);font-size:14px}

.field{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.label{font-weight:800}
.input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--bg2);
  color:#fff;
  outline:none;
}
.input:focus{box-shadow:0 0 0 2px rgba(111,227,255,.25)}

.consent-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--line);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.consent-card input{position:absolute;opacity:0;width:1px;height:1px}
.consent-check{width:22px;height:22px;border-radius:7px;border:1px solid var(--chipOn);background:var(--chip);display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px;transition:all .2s ease}
.consent-card input:checked + .consent-check{background:linear-gradient(135deg,var(--b1),var(--b2));border-color:transparent;box-shadow:0 8px 20px rgba(139,92,255,.22),0 4px 12px rgba(111,227,255,.15)}
.consent-check svg{opacity:0;transform:scale(.8);transition:.2s ease}
.consent-card input:checked + .consent-check svg{opacity:1;transform:scale(1)}
.consent-text{line-height:1.45}
.consent-text a{text-decoration:underline;color:#cfe9ff}

.checkbox{display:flex;gap:10px;align-items:flex-start;background:var(--chip);border:1px solid var(--line);padding:12px 14px;border-radius:12px;color:#c6d4ea}
.checkbox input{accent-color:#6FE3FF;margin-top:2px}

.actions{display:flex;gap:10px;align-items:center;margin-top:14px}
.error{border:1px solid rgba(255,100,100,.3);background:linear-gradient(180deg,rgba(255,60,60,.08),rgba(255,60,60,.04));color:#ffdada;border-radius:14px;padding:12px 14px;margin-bottom:14px}
.error ul{margin:6px 0 0 18px}

.wrap{padding:18px 18px 40px;display:flex;justify-content:center;align-items:flex-start;background:var(--bg)}
.form-wrap{max-width:560px;margin:24px auto;width:100%}

.toolbar{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:center;
  margin:16px 0 18px 0;
  position:sticky;
  top:var(--header-h);
  z-index:900;
  background:linear-gradient(180deg,rgba(11,18,32,.96),rgba(11,18,32,.92) 40%,rgba(11,18,32,0));
  backdrop-filter:saturate(110%) blur(6px);
  padding:8px 4px 10px 4px;
  border-bottom:1px solid rgba(27,42,59,.35);
}
.select{display:none}
.select .icon{display:inline-flex;opacity:.8}
.select span{font-weight:700;letter-spacing:.2px}

.search{display:none}
.search .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55}
.search input{
  width:100%;
  height:44px;
  padding:0 14px 0 42px;
  border-radius:14px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  color:var(--text);
  outline:none;
  transition:border .2s,box-shadow .2s;
}
.search input::placeholder{color:#7e94ae}
.search input:focus{border-color:#2c4f7a;box-shadow:var(--focus-ring)}

.header-search{
  position:fixed;
  top:calc(var(--header-h) - 6px);
  left:50%;
  transform:translateX(-50%) scale(.98);
  width:min(720px,92vw);
  opacity:0;
  pointer-events:none;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 20px 40px rgba(0,0,0,.45);
  transition:opacity .18s ease, transform .18s ease;
  padding:8px 10px;
  z-index:13000;
}
.header-search.open{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.header-search .row{position:relative}
.header-search .row .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55}
.header-search input{
  width:100%;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:#fff;
  padding:0 12px 0 42px;outline:none;
}
.header-search input:focus{box-shadow:var(--focus-ring)}

.chips{display:flex;flex-wrap:wrap;gap:10px 10px;margin-bottom:6px}
.chips a{
  display:inline-flex;
  align-items:center;
  height:36px;
  padding:0 16px;
  border-radius:9999px;
  background:var(--chip);
  border:1px solid var(--chipOn);
  color:#cfe3ff;
  font-weight:700;
  letter-spacing:.2px;
  transition:all .2s ease;
}
.chips a:hover{border-color:#2e4a70;transform:translateY(-1px)}
.chips a.active{
  background:linear-gradient(135deg,var(--b1),var(--b2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(139,92,255,.25),0 6px 14px rgba(111,227,255,.18);
}

.grid{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.card{
  display:flex;
  flex-direction:column;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  border:1px solid var(--line);
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.35);border-color:#2b4566}
.card .thumb{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid var(--line)}
.card .title{padding:12px 12px 14px 12px;font-weight:800;letter-spacing:.2px}

@media (min-width:414px) and (max-width:820px) and (hover:none) and (pointer:coarse){
  .grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

.header{
  grid-area: header;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  height: var(--header-h);
  background:#10202e;
  border-bottom:1px solid rgba(27,42,59,.65);
  backdrop-filter: blur(8px);
}

/* ===== Fix: doppelte Sidebar unter dem Footer verstecken ===== */
.layout > .sidebar ~ .sidebar { display: none !important; }
.layout ~ .sidebar { display: none !important; }

/* MOBILE NAV BAR */
.mobile-tabbar{display:none;}

@media (max-width:640px) and (hover:none) and (pointer:coarse){
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .mobile-tabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-top:1px solid var(--line);
    backdrop-filter:blur(8px);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    z-index:11000;
  }
  .mobile-tabbar .tab{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#cfe3ff;
    text-align:center;
    font-weight:800;
    font-size:11px;
    letter-spacing:.2px;
  }
  .mobile-tabbar .tab svg{width:20px;height:20px;opacity:.9}
  .mobile-tabbar .tab:active{filter:brightness(1.08)}
  .mobile-tabbar .tab.active{color:#fff}
  .mobile-tabbar .tab.active .ico-grad{
    position:relative;
    background:linear-gradient(135deg,var(--b1),var(--b2));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .mobile-tabbar .tab.active::before{
    content:"";
    position:absolute;inset:auto 18% 0 18%;
    height:3px;border-radius:999px;
    background:linear-gradient(135deg,var(--b1),var(--b2));
  }
}

/* Fallback: auf Desktop immer aus */
@media (min-width:641px), (hover:hover), (pointer:fine){
  .mobile-tabbar{display:none !important;}
  body{padding-bottom:0 !important;}
}

/* MOBILE SHEET (Search menu) */
.sheet .searchbar{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,18,32,.96),rgba(11,18,32,.88));
  padding:8px 10px 10px;border-bottom:1px solid var(--line);
}
.sheet .searchbar .row{position:relative}
.sheet .searchbar .row .icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55}
.sheet .searchbar input{
  width:100%;height:44px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);color:#fff;padding:0 12px 0 42px;outline:none;
}
.sheet .searchbar input:focus{box-shadow:var(--focus-ring)}

.sheet .item{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid #1e3347;
}
.sheet .item .badge{
  background:#0f2436;border:1px solid #1e3347;
}

.sheet{
  position:fixed;
  left:0; right:0; bottom:0;
  height:86vh;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-top-left-radius:18px;
  border-top-right-radius:18px;
  border:1px solid var(--line);
  transform:translateY(100%);
  transition:transform .24s ease;
  box-shadow:0 -18px 40px rgba(0,0,0,.45);
  z-index:14000;
  display:flex;
  flex-direction:column;
}
.sheet.open{ transform:translateY(0) }
.sheet .handle{height:22px;display:flex;align-items:center;justify-content:center}
.sheet .handle span{width:44px;height:4px;border-radius:999px;background:#2a3c50;display:inline-block}
.sheet .content{padding:10px 14px 18px;overflow:auto}
.sheet .category{border-top:1px solid rgba(27,42,59,.5);padding:14px 0}
.sheet .category:first-child{border-top:none;padding-top:6px}
.sheet .cat-title{color:#9bb3cf;text-transform:uppercase;font-size:11px;letter-spacing:.6px;margin-bottom:10px}
.sheet .list{display:flex;flex-direction:column;gap:8px}


/* AUTH BUTTONS (logged out header) */
.auth-actions{display:flex;gap:8px}
.auth-actions .btn{height:38px;padding:0 12px}
.auth-actions .btn-primary{background:#2f80ff;color:#fff;border-color:transparent}
.auth-actions .btn-ghost{background:transparent;border:1px solid var(--line);color:#eaf1ff}

/* RESPONSIVE TUNING */
@media (max-width:920px){
  .topbar{grid-template-columns:auto 1fr}
  .center{display:none}
  .toolbar{top:58px}
}
@media (max-width:720px){
  :root{--header-h:56px;--tabbar-h:62px}
  .topbar{gap:10px;padding:6px 10px}
  .brand svg{max-height:28px}
  .tools{gap:8px;min-width:0;overflow:hidden}
  .wallet-pill{border-radius:10px}
  .balance-btn,.wallet-cta{height:38px}
  .icon-btn{height:36px}
  .toolbar{grid-template-columns:1fr;gap:10px;padding:10px 0 12px}
  .panel{padding:16px;border-radius:16px}

  /* enger, damit 3 Spalten bei ~430px sicher passen */
  .wrap{padding:14px 8px calc(14px + var(--tabbar-h));max-width:100%;min-width:0}
  .content{max-width:100%;min-width:0}

  /* WICHTIG: echte Auto-Spalten für Phones */
  .grid{
    width:100%;
    max-width:100%;
    grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
    gap:8px;
  }
  .card{min-width:0}
  .card .thumb{aspect-ratio:16/9}   /* flacher = wirkt kleiner wie bei Stake */
  .card .title{font-size:12px}
}
@media (max-width:720px){
  .header-search{ display:none !important; }
}

/* UTIL */
.hidden{display:none!important}
.only-desktop{display:block}
.only-mobile{display:none}
@media (max-width:820px){
  .only-desktop{display:none}
  .only-mobile{display:block}
}

@media (max-width: 820px){
  .footer{
    padding-bottom: 96px; /* Höhe der Bottom-Bar einkalkulieren */
  }
}

.tools .wallet-pill.only-mobile{display:none}

/* Mobile: Wallet-Pill sichtbar; Such-Icon oben raus */
@media (max-width:720px){
  .tools .wallet-pill.only-mobile{display:flex}
  .tools .icon-btn.search-trigger{display:none !important}
}


*{ scrollbar-width: none; }          /* Firefox */
*::-webkit-scrollbar{ display: none; } /* Chrome/Edge/Safari */