:root{
    --bg:#f4f6fb;
    --card:#ffffff;
    --line:#e5e7eb;
    --muted:#6b7280;
    --accent:#2563eb;
    --accent-2:#1d4ed8;
    --ok:#16a34a;
    --warn:#ef4444;
    --shadow:0 24px 60px rgba(15,23,42,.08);
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:radial-gradient(1200px 400px at 10% 0%, #eef2ff 0%, #f8fafc 45%, #f4f6fb 100%);
    color:#0f172a;
    font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  }
  .wrap{max-width:1040px;margin:0 auto;padding:24px;}
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    padding:14px 16px;
    border-radius:16px;
    background:#fff;
    border:1px solid rgba(148,163,184,.25);
    box-shadow:var(--shadow);
    margin-bottom:12px;
  }
  @media(max-width:640px){
    .topbar{flex-wrap:nowrap;overflow-x:auto;gap:10px;}
    .topbar::-webkit-scrollbar{display:none;}
    .top-actions{flex-wrap:nowrap;gap:8px;}
    .top-actions .member-menu button,
    .top-actions .auth-widget,
    .top-actions .nav-btn{
      min-width:110px;
      height:46px;
      padding:8px 12px;
    }
    .brand{min-width:200px;}
  }
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
  .brand-logo{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;border:1px solid #e2e8f0;box-shadow:0 8px 20px rgba(15,23,42,.08);overflow:hidden;}
  .brand-logo img{width:70%;height:70%;object-fit:contain;}
  .brand-text{display:flex;flex-direction:column;gap:2px;}
  .brand-name{font-weight:800;font-size:16px;letter-spacing:.3px;}
  .brand-sub{font-size:12px;color:#64748b;}
  .top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .top-actions .member-menu button,
  .top-actions .auth-widget,
  .top-actions .nav-btn{
    min-height:52px;
    height:52px;
    padding:10px 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .top-actions .auth-widget{
    gap:8px;
  }
  .top-actions .member-menu button{
    font-size:13px;
    min-width:120px;
  }
  .member-menu{position:relative;}
  .member-menu button{
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(15,23,42,.08);
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:center;
  }
  .member-menu button:hover{border-color:rgba(24,161,104,.35);}
  .member-menu button .member-menu-badge{
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:none;
    align-items:center;
    justify-content:center;
  }
  .member-menu button .member-menu-badge.show{display:inline-flex;}
  .member-menu-panel{
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 14px 40px rgba(15,23,42,.18);
    padding:8px;
    display:none;
    min-width:180px;
    z-index:30;
  }
  .member-menu-panel a{
    display:block;
    padding:12px 14px;
    border-radius:12px;
    color:#0f172a;
    text-decoration:none;
    font-weight:800;
    font-size:14px;
  }
  .member-menu-panel a.qna-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .member-menu-panel a:hover{background:linear-gradient(135deg, rgba(24,161,104,.08), rgba(16,149,214,.08));}
  .member-menu-panel .qna-badge{
    min-width:18px;
    height:18px;
    padding:0 6px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:none;
    align-items:center;
    justify-content:center;
  }
  .member-menu-panel .qna-badge.show{display:inline-flex;}
  .member-menu-panel .lang-menu-btn{
    width:100%;
    border:none;
    background:#f8fafc;
    border-radius:10px;
    padding:8px 10px;
    font-weight:800;
    cursor:pointer;
    margin-bottom:6px;
  }
  .nav-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:#0f172a;
    font-weight:800;
    text-decoration:none;
    box-shadow:0 8px 18px rgba(15,23,42,.08);
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    font-size:13px;
  }
  .nav-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(15,23,42,.12);border-color:rgba(24,161,104,.35);}
  .nav-btn.ghost{
    background:#fff;
    color:#0f172a;
    border:1px solid var(--line);
  }
  h1{margin:18px 0 14px;font-size:26px;font-weight:800;}
  .card{
    background:var(--card);
    border:1px solid rgba(148,163,184,.25);
    border-radius:18px;
    padding:18px;
    box-shadow:var(--shadow);
  }
  .controls{display:grid;gap:12px;margin-bottom:14px;}
  @media(min-width:720px){
    .controls{grid-template-columns:2fr 1.6fr auto auto;align-items:center;}
  }
  .controls input{
    padding:12px 14px;
    border:1px solid #e2e8f0;
    border-radius:12px;
    font-size:14px;
    background:#f8fafc;
    transition:border .2s, box-shadow .2s;
  }
  .controls input:focus{
    outline:none;
    border-color:#c7d2fe;
    box-shadow:0 0 0 4px rgba(99,102,241,.12);
    background:#fff;
  }
  .controls button{
    padding:10px 14px;
    border-radius:999px;
    border:1px solid #c7d2fe;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(37,99,235,.18);
  }
  .controls #btnReload{
    background:#fff;
    color:#1d4ed8;
    border:1px solid #c7d2fe;
    box-shadow:none;
  }
  .tabs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px;}
  .tab-btn{
    border:1px solid #e2e8f0;
    background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
    color:#0f172a;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 8px 18px rgba(15,23,42,.12);
  }
  .tab-btn.active{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border-color:#1d4ed8;
    color:#fff;
  }
  .tab-hint{font-size:12px;color:var(--muted);margin-top:4px;}
  .list{display:grid;gap:12px;}
  .coupon{
    border:1px solid #e2e8f0;
    border-radius:16px;
    padding:14px;
    background:#fff;
    display:grid;
    gap:8px;
    grid-template-columns:1fr;
    box-shadow:0 10px 24px rgba(15,23,42,.06);
  }
  .coupon:hover{border-color:#c7d2fe;box-shadow:0 18px 40px rgba(37,99,235,.12);}
  @media(min-width:640px){.coupon{grid-template-columns:1fr auto;align-items:center;}}
  .coupon h3{margin:0;font-size:16px;font-weight:800;}
  .muted{color:var(--muted);font-size:13px;}
  .chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    background:#eef2ff;
    border:1px solid #c7d2fe;
    font-size:12px;
    color:#1d4ed8;
    font-weight:700;
  }
  .chip.ok{background:#dcfce7;border-color:#16a34a;color:#166534;}
  .chip.warn{background:#fee2e2;border-color:#fca5a5;color:#b91c1c;}
  .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
  .btn{
    border:1px solid #e2e8f0;
    background:#fff;
    color:#0f172a;
    padding:8px 12px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
  }
  .btn.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);border-color:#1d4ed8;color:#fff;}