/* common styles */

*{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }
      :root{
      --bg:#F6F6F6;
      --card:#FFFFFF;
      --card-2:#F9FBFF;
      --text:#14171F;
      --muted:#7B8494;
      --line:#E8EDF5;
      --primary:#1F7CF5;
      --primary-2:#57A8FF;
      --primary-soft:#EAF3FF;
      --success:#22C55E;
      --warning:#F59E0B;
      --purple:#7C3AED;
      --pink:#EC4899;
      --orange:#F97316;
      --danger:#EF4444;
      --shadow:0 10px 30px rgba(18, 28, 45, 0.08);
      --radius:16px;
      --container:600px;
    }

    html {
  scrollbar-gutter: stable;
}

    body{
      font-family:Roboto, Arial, sans-serif;
      background:linear-gradient(180deg, #F7FAFF 0%, #F6F6F6 100%);
      color:var(--text);
      min-height:100vh;
       overflow-y: scroll;
    }

    body.dark_theme{
      --bg:#111315;
      --card:#191C20;
      --card-2:#1E2329;
      --text:#F3F5F7;
      --muted:#98A2B3;
      --line:#2A313A;
      --primary:#3B8CFF;
      --primary-2:#67B0FF;
      --primary-soft:#16263E;
      --shadow:none;
      background:linear-gradient(180deg, #111315 0%, #121518 100%);
    }

    .app{
      max-width:var(--container);
      margin:0 auto;
      min-height:100vh;
      background:transparent;
      position:relative;
    }

    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }

    .topbar{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:50;
      background:rgba(246,246,246,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(0,0,0,.04);
    }

    body.dark_theme .topbar{
      background:rgba(17,19,21,.8);
      border-bottom:1px solid rgba(255,255,255,.04);
    }

    .topbar-inner{
      max-width:var(--container);
      margin:0 auto;
      padding:14px 16px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .topbar-profile-side{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }

    .topbar-avatar{
      width:46px;
      height:46px;
      border-radius:15px;
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:20px;
      font-weight:800;
      box-shadow:0 12px 28px rgba(31,124,245,.28);
      flex-shrink:0;
    }

    .topbar-profile-text{
      min-width:0;
    }

    .topbar-profile-text h1{
      font-size:16px;
      font-weight:800;
      line-height:1.2;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .topbar-profile-text p{
      margin-top:4px;
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .page{
      padding:88px 16px 98px;
    }

    .section{
      margin-bottom:14px;
    }
    .bottom-nav{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:50;
      background:rgba(255,255,255,.88);
      backdrop-filter:blur(18px);
      border-top:1px solid rgba(0,0,0,.05);
    }

    body.dark_theme .bottom-nav{
      background:rgba(17,19,21,.88);
      border-top:1px solid rgba(255,255,255,.05);
    }

    .bottom-nav-inner{
      max-width:var(--container);
      margin:0 auto;
      padding:10px 10px calc(10px + env(safe-area-inset-bottom));
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:8px;
    }

    .nav-item{
      text-decoration:none;
      color:var(--muted);
      border-radius:14px;
      padding:10px 6px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:5px;
      font-size:11px;
      font-weight:800;
      transition:.2s ease;
    }

    .nav-item.active{
      color:var(--primary);
      background:var(--primary-soft);
    }

    .nav-item i{
      font-style:normal;
      font-size:18px;
      line-height:1;
    }

 .back-btn,.icon-btn{
      width:42px;
      height:42px;
      border:none;
      border-radius:14px;
      background:var(--card);
      border:1px solid var(--line);
      color:var(--text);
      box-shadow:var(--shadow);
      font-size:18px;
      cursor:pointer;
      flex-shrink:0;
    }
.back-btn.is-hidden{display:none}

.page-head-shell{
    display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      flex:1;
}

 .back-btn{
      width:42px;
      height:42px;
      border:none;
      border-radius:14px;
      background:var(--card);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      color:var(--text);
      font-size:18px;
      cursor:pointer;
      flex-shrink:0;
    }

    .page-head{
      min-width:0;
    }

    .page-head h1{
      font-size:18px;
      font-weight:900;
      line-height:1.15;
    }

    .page-head p{
      margin-top:4px;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

.loading-state,.empty-state-global{padding:36px 20px;text-align:center;color:var(--muted)}

[data-route]{cursor: pointer;}