@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap");
    @import url("https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

    /* =========================
       THEME TOKENS
    ========================= */
    :root{
      --text:#0B1220;
      --muted:#5B6B86;
      --muted2:#7A8AA6;
      --line:rgba(12,18,32,.10);

      --green:#0AA36C;
      --blue:#2F6BFF;
      --violet:#7C3AED;

      --btn:#032254;
      --btnText:#FFFFFF;
      --btnHover:#0B1438;

      --card:#FFFFFF;

      --radius: 16px;
      --radius2: 22px;

      --container: 1260px;
      --ease: cubic-bezier(.2,.8,.2,1);

      --bgTop:#F2F8FF;
      --bgMid:#F7FBFF;
      --bgBottom:#FFFFFF;

      --bgRad1: rgba(56,189,248,.16);
      --bgRad2: rgba(59,130,246,.14);
      --bgRad3: rgba(14,165,233,.12);

      --surfaceSoft: rgba(246,248,252,.85);
      --surfaceSoft2: rgba(246,248,252,.75);

      --danger:#EF4444;
      --warn:#F59E0B;
      --ok:#16A34A;
      --info:#0EA5E9;

      --headerBg: rgba(255,255,255,.82);
      --thBg: rgba(246,248,252,.75);
      --tdBorder: rgba(12,18,32,.08);
      --focus: rgba(59,130,246,.42);

      --sidebarBg: #fff;
    }

    html[data-theme="dark"]{
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.62);
      --muted2: rgba(255,255,255,.52);
      --line: rgba(255,255,255,.10);

      --card: rgba(15,18,28,1);

      --bgTop:#070A14;
      --bgMid:#0B1023;
      --bgBottom:#070A14;

      --bgRad1: rgba(56,189,248,.10);
      --bgRad2: rgba(59,130,246,.10);
      --bgRad3: rgba(124,58,237,.10);

      --surfaceSoft: rgba(255,255,255,.05);
      --surfaceSoft2: rgba(255,255,255,.04);

      --headerBg: rgba(10,12,22,.72);
      --thBg: rgba(255,255,255,.06);
      --tdBorder: rgba(255,255,255,.08);

      --focus: rgba(59,130,246,.55);

      --sidebarBg: rgba(15,18,28,1);
      --btnHover:#111b40;
      
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: 'Inter Tight', 'PT Sans', Arial, sans-serif;
      color:var(--text);
      font-size: 13px;

      background:
        radial-gradient(1100px 700px at 10% 0%, var(--bgRad1), transparent 60%),
        radial-gradient(1100px 700px at 92% 8%, var(--bgRad2), transparent 60%),
        radial-gradient(900px 600px at 55% 105%, var(--bgRad3), transparent 55%),
        linear-gradient(180deg, var(--bgTop) 0%, var(--bgMid) 55%, var(--bgBottom) 100%);

      overflow-x:hidden;
      min-height:100vh;
    }
    a{ color:inherit; text-decoration:none; }
    button, input{ font-family:inherit; }

    .container{
      width:min(var(--container), calc(100% - 48px));
      margin-inline:auto;
    }

    /* =========================
       TOPBAR (mobile-first)
    ========================= */
    header{
      position:sticky;
      top:0;
      z-index:80;
      background: var(--headerBg);
      backdrop-filter: blur(10px);
      border-bottom:1px solid var(--line);
    }

    .topbar{
      display:grid;
      grid-template-columns: auto 1fr auto;
      align-items:center;
      gap:10px;
      padding: 12px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width: 0;
    }

    .logo{
      width:38px;height:38px;border-radius:14px;
      background: linear-gradient(135deg, var(--green), var(--blue));
      box-shadow: 0 14px 26px rgba(47,107,255,.18);
      position:relative;
      overflow:hidden;
      flex:0 0 auto;
    }
    .logo:after{
      content:"";
      position:absolute; inset:-30%;
      background: conic-gradient(from 180deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
      animation: spin 6s linear infinite;
      opacity:.45;
    }
    @keyframes spin{ to{ transform:rotate(360deg);} }

    .brand-text{
      min-width:0;
    }
    .brand b{
      font-size:15px;
      letter-spacing:.2px;
      display:block;
      line-height:1.1;
    }
    .brand span{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size:12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 160px;
    }

    .search{
      position:relative;
      min-width:0;
    }
    .search i{
      position:absolute;
      left:12px; top:50%;
      transform: translateY(-50%);
      color: color-mix(in srgb, var(--text) 55%, transparent);
      pointer-events:none;
    }
    .search input{
      width:100%;
      padding: 11px 12px 11px 38px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: var(--surfaceSoft);
      outline:none;
      font-size: 14px;
      color: var(--text);
    }
    .search input:focus{
      border-color: var(--focus);
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }

    .top-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      color: var(--text);
      font-weight:900;
      font-size:14px;
      cursor:pointer;
      transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
      white-space:nowrap;
    }
    .btn:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
      background: color-mix(in srgb, var(--blue) 6%, var(--card));
    }
    .btn.primary{
      border:1px solid rgba(1,9,22,.85);
      color: var(--btnText);
      background: var(--btn);
    }
    .btn.primary:hover{
      background: var(--btnHover);
      transform: translateY(-2px);
      border-color: rgba(1,9,22,.95);
    }

    .icon-btn{
      width:44px;height:44px;
      padding:0;
      border-radius: 16px;
    }

    .avatar{
      width:44px;height:44px;border-radius: 16px;
      border:1px solid var(--line);
      background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--bgRad3) 60%, transparent));
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:950;
      color: color-mix(in srgb, var(--text) 85%, transparent);
      user-select:none;
    }

    /* Mobile quick actions (clean, not cramped) */
    .quickbar{
      display:none;
      padding: 10px 0 12px;
      gap:10px;
      grid-template-columns: 1fr 1fr;
    }
    .quickbar .btn{ width:100%; padding:12px 12px; }
    .quickbar .btn i{ opacity:.9; }

    /* =========================
       LAYOUT
    ========================= */
    main{ padding: 16px 0 36px; }
    .layout{
      display:grid;
      grid-template-columns: 280px 1fr;
      gap: 16px;
      align-items:start;
    }

    /* Sidebar (desktop) */
    .sidebar{
      position: sticky;
      top: 88px;
      background: var(--sidebarBg);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      padding: 12px;
      overflow:hidden;
    }
    .side-head{
      padding: 8px 10px 10px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      margin-bottom: 10px;
    }
    .side-head b{ display:block; letter-spacing:-.2px; }
    .side-head span{ color: var(--muted); font-size:12px; }

    .nav{
      display:grid;
      gap:6px;
    }
    .nav a{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 12px 12px;
      border-radius: 14px;
      border:1px solid transparent;
      color: color-mix(in srgb, var(--text) 88%, transparent);
      font-weight:800;
      font-size: 13px;
      transition: background .2s var(--ease), border-color .2s var(--ease), transform .18s var(--ease);
    }
    .nav a i{ width:18px; text-align:center; color: color-mix(in srgb, var(--text) 60%, transparent); }
    .nav a:hover{
      background: color-mix(in srgb, var(--blue) 8%, transparent);
      border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
      transform: translateY(-1px);
    }
    .nav a.active{
      background: color-mix(in srgb, var(--btn) 6%, var(--card));
      border-color: color-mix(in srgb, var(--btn) 10%, var(--line));
    }

    .side-foot{
      margin-top: 12px;
      padding: 12px;
      border-radius: 16px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: var(--surfaceSoft2);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }
    .side-foot b{ color: color-mix(in srgb, var(--text) 90%, transparent); }

    /* Content */
    .content{ display:grid; gap: 12px; }

    .page-title{
      display:grid;
      gap: 8px;
      padding: 10px 2px 0;
    }
    .page-title h1{
      margin:0;
      font-size: clamp(22px, 2.6vw, 34px);
      letter-spacing:-.6px;
      line-height:1.1;
    }
    .page-title p{
      margin:0;
      color: var(--muted);
      font-size: 14px;
      line-height:1.6;
      max-width: 70ch;
    }
    .mini-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
    }

    /* Cards */
    .grid4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }
    .card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      padding: 14px;
      overflow:hidden;
    }
    
    .card.compact{ padding: 16px; }
    .card h2, .card h3{
      margin:0 0 10px;
      font-size: 16px;
      letter-spacing:-.2px;
    }
    .kpi{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }
    .kpi b{
      display:block;
      font-size: 13px;
      color: color-mix(in srgb, var(--text) 80%, transparent);
      letter-spacing:-.1px;
    }
    .kpi .val{
      margin-top: 6px;
      font-size: 26px;
      letter-spacing:-.6px;
      font-weight: 950;
    }
    .kpi small{
      display:block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height:1.5;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 110%, transparent);
      background: color-mix(in srgb, var(--card) 80%, transparent);
      font-weight: 950;
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
      white-space:nowrap;
    }
    .badge .dot{
      width:10px;height:10px;border-radius:999px;
      background: linear-gradient(135deg, var(--green), var(--blue));
    }
    .badge.blue .dot{ background: linear-gradient(135deg, rgba(59,130,246,1), rgba(14,165,233,1)); }
    .badge.green .dot{ background: linear-gradient(135deg, rgba(10,163,108,1), rgba(59,130,246,1)); }
    .badge.violet .dot{ background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1)); }

    .split{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 12px;
    }
    .card h2{
      margin:0 0 10px;
      font-size: 16px;
      letter-spacing:-.2px;
    }

    /* Responsive table wrapper */
    .table-wrap{
      width:100%;
      overflow:auto;
      border-radius: 16px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: var(--card);
      -webkit-overflow-scrolling: touch;
    }
    table{
      width:100%;
      min-width: 820px; /* scroll on small screens */
      border-collapse: separate;
      border-spacing: 0;
      background: transparent;
    }
    th, td{
      padding: 12px 12px;
      text-align:left;
      font-size: 13px;
      border-bottom:1px solid var(--tdBorder);
      color: color-mix(in srgb, var(--text) 86%, transparent);
      vertical-align: middle;
      white-space: nowrap;
    }
    th{
      position: sticky;
      top: 0;
      z-index: 1;
      background: var(--thBg);
      color: var(--muted);
      font-weight: 950;
      font-size: 12px;
      letter-spacing:.2px;
      text-transform: uppercase;
    }
    tr:last-child td{ border-bottom:none; }

    .status{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 120%, transparent);
      background: color-mix(in srgb, var(--card) 86%, transparent);
      font-weight: 950;
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
      white-space:nowrap;
    }
    .status .s-dot{ width:9px;height:9px;border-radius:999px; background: color-mix(in srgb, var(--muted) 85%, transparent); }
    .status.ok{ border-color: rgba(10,163,108,.22); background: rgba(10,163,108,.10); }
    .status.ok .s-dot{ background: rgba(10,163,108,1); }
    .status.wait{ border-color: rgba(59,130,246,.22); background: rgba(59,130,246,.10); }
    .status.wait .s-dot{ background: rgba(59,130,246,1); }
    .status.bad{ border-color: rgba(239,68,68,.22); background: rgba(239,68,68,.10); }
    .status.bad .s-dot{ background: rgba(239,68,68,1); }
    
    .method{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 120%, transparent);
      background: color-mix(in srgb, var(--card) 86%, transparent);
      font-weight: 950;
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
    }
    .method i{ opacity:.9; }
    .method.paystack{ border-color: rgba(59,130,246,.22); background: rgba(59,130,246,.10); }
    .method.stripe{ border-color: rgba(124,58,237,.22); background: rgba(124,58,237,.10); }
    .method.flutter{ border-color: rgba(10,163,108,.22); background: rgba(10,163,108,.10); }
    .method.paypal{ border-color: rgba(37,99,235,.22); background: rgba(37,99,235,.10); }
    .method.crypto{ border-color: rgba(245,158,11,.22); background: rgba(245,158,11,.10); }

    /* Drawer */
    .drawer-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(2px);
      opacity:0;
      pointer-events:none;
      transition: opacity .2s var(--ease);
      z-index: 90;
    }
    .drawer{
      position:fixed;
      top:0; left:0;
      height:100vh;
      width: 320px;
      max-width: calc(100% - 56px);
      background: var(--sidebarBg);
      border-right:1px solid var(--line);
      transform: translateX(-105%);
      transition: transform .22s var(--ease);
      z-index: 100;
      padding: 12px;
      overflow:auto;
    }

    .hint{ color: var(--muted); font-size: 13px; line-height: 1.6; }

    .crypto{ display:grid; gap:10px; }
    .crypto .row{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding: 10px 10px;
      border-radius: 14px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: var(--surfaceSoft2);
    }
    .crypto .row b{ font-size: 13px; }
    .crypto .row span{ color: var(--muted); font-size: 12px; }

    footer{
      border-top:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      padding: 22px 0 28px;
      margin-top: 24px;
    }
    .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .foot small{ color: var(--muted); }

    /* =========================
       MOBILE DRAWER
    ========================= */
    .drawer-backdrop{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(2px);
      opacity:0;
      pointer-events:none;
      transition: opacity .2s var(--ease);
      z-index: 90;
    }
    .drawer{
      position:fixed;
      top:0; left:0;
      height:100vh;
      width: 320px;
      max-width: calc(100% - 56px);
      background: var(--sidebarBg);
      border-right:1px solid var(--line);
      transform: translateX(-105%);
      transition: transform .22s var(--ease);
      z-index: 100;
      padding: 12px;
      overflow:auto;
    }
    html.drawer-open .drawer{ transform: translateX(0); }
    html.drawer-open .drawer-backdrop{
      opacity:1;
      pointer-events:auto;
    }

    .drawer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 10px 6px 6px;
    }
    .close-btn{
      width:42px;height:42px;
      border-radius: 16px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      color: var(--text);
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    /* =========================
       RESPONSIVE RULES (fix "disorganized")
    ========================= */
    /* Tablet: move to 1-col, keep clean spacing */
    @media (max-width: 1100px){
      .layout{ grid-template-columns: 1fr; }
      .sidebar{ display:none; }
      .split{ grid-template-columns: 1fr; }
      .grid4{ grid-template-columns: 1fr 1fr; }
      .container{ width: min(var(--container), calc(100% - 32px)); }
      .brand span{ max-width: 220px; }
    }

    /* Phone: simplify topbar + add quickbar */
    @media (max-width: 680px){
      .topbar{
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "brand brand actions"
          "search search search";
        align-items:center;
        row-gap:10px;
      }
      .brand{ grid-area: brand; }
      .search{ grid-area: search; }
      .top-actions{ grid-area: actions; justify-content:flex-end; }

      /* Hide text buttons to avoid crowding */
      .top-actions .btn.text-btn{ display:none; }
      .avatar{ display:none; }

      /* Mobile quick actions under header */
      .quickbar{
        display:grid;
      }

      .grid4{ grid-template-columns: 1fr; }
      .mini-actions{ justify-content:flex-start; }
    }

    @media (max-width: 420px){
      .brand span{ max-width: 160px; }
      .btn.icon-btn{ width:42px; height:42px; border-radius: 15px; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
      html{ scroll-behavior:auto; }
    }
  

   /* =========================
       PAGE
    ========================= */
    main{ padding: 18px 0 36px; }
    .hero{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 12px;
      align-items:stretch;
      margin-bottom: 12px;
    }
    .card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      padding: 14px;
      overflow:hidden;
    }
    .title{
      margin:0;
      font-size: clamp(22px, 2.6vw, 34px);
      letter-spacing:-.6px;
      line-height:1.1;
    }
    .hint{ color: var(--muted); font-size: 13px; line-height: 1.6; }
    .lead{
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
      max-width: 70ch;
    }
    .pill-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      margin-top: 10px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 110%, transparent);
      background: color-mix(in srgb, var(--card) 80%, transparent);
      font-weight: 950;
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
      white-space:nowrap;
    }
    .pill .dot{
      width:10px;height:10px;border-radius:999px;
      background: linear-gradient(135deg, var(--green), var(--blue));
    }
    .pill.blue .dot{ background: linear-gradient(135deg, rgba(59,130,246,1), rgba(14,165,233,1)); }
    .pill.violet .dot{ background: linear-gradient(135deg, rgba(124,58,237,1), rgba(59,130,246,1)); }

    /* Filters row (public, not sidebar) */
    .filters{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1fr 1fr;
      gap: 10px;
      align-items:end;
    }
    .field{ display:grid; gap:6px; }
    label{
      font-weight:900;
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
      text-transform: uppercase;
      letter-spacing:.2px;
    }
    select, .input{
      width:100%;
      padding: 11px 12px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: var(--surfaceSoft);
      outline:none;
      color: var(--text);
      font-size: 14px;
    }
    select:focus, .input:focus{
      border-color: var(--focus);
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    .range{
      display:grid;
      gap:8px;
      padding: 10px;
      border-radius: 16px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: var(--surfaceSoft2);
    }
    .range .row{
      display:flex;
      justify-content:space-between;
      gap:10px;
      font-weight:900;
      color: color-mix(in srgb, var(--text) 82%, transparent);
      font-size: 13px;
    }
    input[type="range"]{ width:100%; }

    /* Products */
    .products{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }
    .p-card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--radius2);
      overflow:hidden;
      display:grid;
    }
    .p-img{
      height: 170px;
      background:
        radial-gradient(260px 180px at 30% 20%, rgba(56,189,248,.18), transparent 60%),
        radial-gradient(260px 180px at 80% 10%, rgba(59,130,246,.14), transparent 60%),
        linear-gradient(135deg, rgba(246,248,252,.9), rgba(255,255,255,.9));
      border-bottom:1px solid var(--line);
      position:relative;
    }
    html[data-theme="dark"] .p-img{
      background:
        radial-gradient(260px 180px at 30% 20%, rgba(56,189,248,.12), transparent 60%),
        radial-gradient(260px 180px at 80% 10%, rgba(59,130,246,.10), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    .p-badge{
      position:absolute;
      left:12px; top:12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 110%, transparent);
      background: color-mix(in srgb, var(--card) 86%, transparent);
      font-weight: 950;
      font-size: 12px;
      color: color-mix(in srgb, var(--text) 78%, transparent);
    }
    .p-badge .dot{
      width:10px;height:10px;border-radius:999px;
      background: linear-gradient(135deg, var(--violet), var(--blue));
    }
    .p-body{
      padding: 12px;
      display:grid;
      gap:8px;
    }
    .p-title{
      font-weight: 950;
      letter-spacing:-.2px;
      line-height:1.2;
    }
    .p-meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      color: var(--muted);
      font-size: 12px;
    }
    .p-price{
      font-weight: 950;
      color: color-mix(in srgb, var(--text) 90%, transparent);
      font-size: 15px;
    }
    .p-actions{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
      margin-top: 2px;
    }
    .p-actions .btn{ width:100%; padding: 11px 12px; }

    /* Payment rails row */
    .rails{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-start;
      margin-top: 10px;
      color: var(--muted);
      font-weight: 900;
      font-size: 13px;
    }
    .rail{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 110%, transparent);
      background: color-mix(in srgb, var(--card) 86%, transparent);
    }
 /* Profile mini card (left column) */
    .profile-top{
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }
    .profile-pic{
      width:76px;height:76px;border-radius: 22px;
      border:1px solid var(--line);
      background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.10));
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex:0 0 auto;
    }
    .profile-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
    .profile-pic .fallback{
      font-weight:950;
      font-size: 20px;
      color: color-mix(in srgb, var(--text) 82%, transparent);
    }
    .profile-meta{ min-width:0; flex:1; }
    .profile-meta b{
      display:block;
      font-size: 16px;
      letter-spacing:-.3px;
      margin-bottom: 4px;
    }
    .profile-meta span{
      display:block;
      color: var(--muted);
      font-size: 12px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width: 360px;
    }

    .upload{
      margin-top:12px;
      display:grid;
      gap:10px;
      padding: 12px;
      border-radius: 16px;
      border:1px dashed color-mix(in srgb, var(--line) 120%, transparent);
      background: var(--surfaceSoft2);
    }
    .file{
      display:flex;
      gap:10px;
      align-items:center;
      padding: 10px 10px;
      border-radius: 14px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    .file input[type="file"]{ width:100%; }

    /* Footer */
    footer{
      border-top:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      padding: 22px 0 28px;
      margin-top: 24px;
    }
    .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .foot small{ color: var(--muted); }

    /* =========================
       RESPONSIVE
    ========================= */
    @media (max-width: 1100px){
      .container{ width: min(var(--container), calc(100% - 32px)); }
      .hero{ grid-template-columns: 1fr; }
      .products{ grid-template-columns: repeat(2, 1fr); }
      .filters{ grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 680px){
      .topbar{
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
          "brand brand actions"
          "search search search";
        row-gap:10px;
      }
      .brand{ grid-area: brand; }
      .search{ grid-area: search; }
      .top-actions{ grid-area: actions; }
      .top-actions .btn.text-btn{ display:none; }

      .products{ grid-template-columns: 1fr; }
      .p-actions{ grid-template-columns: 1fr; }
      .filters{ grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce){
      *{ transition:none !important; animation:none !important; }
      html{ scroll-behavior:auto; }
    }
        /* Public mini nav */
    .navlinks{
      display:flex;
      gap:14px;
      align-items:center;
      padding: 10px 0 14px;
      color: var(--muted);
      font-weight: 900;
      font-size: 13px;
      flex-wrap:wrap;
    }
    .navlinks a{
      padding: 8px 10px;
      border-radius: 12px;
      border:1px solid transparent;
    }
    .navlinks a:hover{
      border-color: color-mix(in srgb, var(--blue) 16%, var(--line));
      background: color-mix(in srgb, var(--blue) 6%, var(--card));
      color: color-mix(in srgb, var(--text) 90%, transparent);
    }

  body .alert{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    margin: 0 0 12px 0 !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(15,23,42,.14) !important;
    background: rgba(255,255,255,.88) !important;
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  body .alert.success{
    border-color: rgba(16,185,129,.35) !important;
    background: rgba(16,185,129,.12) !important;
    color: #064e3b !important;
  }
  body .alert.failed{
    border-color: rgba(239,68,68,.35) !important;
    background: rgba(239,68,68,.12) !important;
    color: #7f1d1d !important;
  }
  body .alert ul{ margin:0 !important; padding-left:18px !important; }
  
  /* form vertical spacing */
form.form > *{
  margin-bottom:18px !important;
}

/* two column rows */
form.form .row2{
  display:flex !important;
  gap:18px !important;
}

/* stack on mobile */
@media (max-width:720px){
  form.form .row2{
    flex-direction:column !important;
  }
}

/* fields spacing */
form.form .field{
  flex:1;
  display:flex;
  flex-direction:column;
  margin-bottom:4px;
}

/* label spacing */
form.form label{
  margin-bottom:6px;
  font-size:13px;
}

/* input spacing */
form.form .input{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
}

/* textarea spacing */
form.form textarea.input{
  min-height:90px;
}

/* buttons */
form.form .actions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

/* dropdown container */
.dropdown{
  position: relative;
}

/* dropdown menu hidden by default */
.dropdown-menu{
  display: none;
  flex-direction: column;
  padding-left: 28px;
  margin-top: 6px;
}

/* open state */
.dropdown.open .dropdown-menu{
  display: flex;
}

/* arrow animation */
.dropdown .arrow{
  margin-left: auto;
  font-size: 11px;
  transition: transform .25s ease;
}

.dropdown.open .arrow{
  transform: rotate(180deg);
}

/* optional submenu link spacing */
.dropdown-menu a{
  padding: 8px 0;
  font-size: 13px;
}

/* ===== sidebar2 dropdown only ===== */
nav.nav[data-nav="sidebar2"] .dropdown-menu{
  display: none;
  flex-direction: column;
  padding-left: 28px;
  margin-top: 6px;
}

nav.nav[data-nav="sidebar2"] .dropdown.dd-open > .dropdown-menu{
  display: flex;
}

nav.nav[data-nav="sidebar2"] .dropdown > a{
  display:flex;
  align-items:center;
  gap:10px;
}

nav.nav[data-nav="sidebar2"] .dropdown .arrow{
  margin-left:auto;
  font-size:11px;
  transition: transform .2s ease;
}

nav.nav[data-nav="sidebar2"] .dropdown.dd-open .arrow{
  transform: rotate(180deg);
}

.badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: var(--surfaceSoft2);
      font-weight: 950;
      font-size: 12px;
      white-space:nowrap;
    }
    .badge.ok{
      border-color: color-mix(in srgb, var(--ok) 34%, var(--line));
      background: color-mix(in srgb, var(--ok) 12%, var(--card));
    }
    .badge.bad{
      border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
      background: color-mix(in srgb, var(--danger) 12%, var(--card));
    }
    .badge.warn{
      border-color: color-mix(in srgb, var(--warn) 34%, var(--line));
      background: color-mix(in srgb, var(--warn) 14%, var(--card));
    }

       .badges{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 950;
      font-size: 12px;
      border:1px solid var(--line);
      background: var(--surfaceSoft2);
      color: color-mix(in srgb, var(--text) 88%, transparent);
      white-space:nowrap;
    }
    .badge-info{
      border-color: color-mix(in srgb, var(--info) 26%, var(--line));
      background: color-mix(in srgb, var(--info) 12%, var(--card));
    }
    .badge-secondary{
      border-color: color-mix(in srgb, var(--muted2) 22%, var(--line));
      background: color-mix(in srgb, var(--muted2) 10%, var(--card));
    }
    .badge-success{
      border-color: color-mix(in srgb, var(--ok) 26%, var(--line));
      background: color-mix(in srgb, var(--ok) 12%, var(--card));
    }
    .badge-danger{
      border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
      background: color-mix(in srgb, var(--danger) 12%, var(--card));
    }
    .badge-primary{
      border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
      background: color-mix(in srgb, var(--blue) 12%, var(--card));
    }
    .badge-warning{
      border-color: color-mix(in srgb, var(--warn) 26%, var(--line));
      background: color-mix(in srgb, var(--warn) 12%, var(--card));
    } 
      /* Toggle switch (clean) */
    .toggles{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .toggle-switch{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 12px 12px;
      border-radius: 16px;
      border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: var(--surfaceSoft2);
      user-select:none;
    }
    .toggle-switch span:last-child{
      font-weight: 900;
      color: color-mix(in srgb, var(--text) 88%, transparent);
    }
    .toggle-switch input{
      position:absolute;
      opacity:0;
      pointer-events:none;
    }
    .toggle-slider{
      width: 46px;
      height: 26px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 120%, transparent);
      background: color-mix(in srgb, var(--card) 85%, transparent);
      position: relative;
      flex: 0 0 auto;
      transition: background .2s var(--ease), border-color .2s var(--ease);
    }
    .toggle-slider::after{
      content:"";
      width: 20px;
      height: 20px;
      border-radius: 999px;
      position:absolute;
      top:50%;
      left: 3px;
      transform: translateY(-50%);
      background: color-mix(in srgb, var(--text) 20%, #fff);
      border: 1px solid color-mix(in srgb, var(--line) 120%, transparent);
      transition: left .2s var(--ease), background .2s var(--ease);
    }
    .toggle-switch input:checked + .toggle-slider{
      background: color-mix(in srgb, var(--blue) 14%, var(--card));
      border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
    }
    .toggle-switch input:checked + .toggle-slider::after{
      left: 23px;
      background: #fff;
      border-color: rgba(47,107,255,.25);
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 12px;
    }
    
    .hint{ color: var(--muted); font-size: 13px; line-height: 1.6; }
    .muted{ color: var(--muted); font-size: 12px; line-height: 1.5; }

    /* Badges */
    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 7px 10px;
      border-radius: 999px;
      font-weight: 950;
      font-size: 12px;
      border:1px solid var(--line);
      background: var(--surfaceSoft2);
      color: color-mix(in srgb, var(--text) 88%, transparent);
      white-space:nowrap;
    }
    .badge-info{
      border-color: color-mix(in srgb, var(--info) 26%, var(--line));
      background: color-mix(in srgb, var(--info) 12%, var(--card));
    }
    .badge-secondary{
      border-color: color-mix(in srgb, var(--muted2) 22%, var(--line));
      background: color-mix(in srgb, var(--muted2) 10%, var(--card));
    }
    .badge-success{
      border-color: color-mix(in srgb, var(--ok) 26%, var(--line));
      background: color-mix(in srgb, var(--ok) 12%, var(--card));
    }
    .badge-danger{
      border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
      background: color-mix(in srgb, var(--danger) 12%, var(--card));
    }
    .badge-primary{
      border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
      background: color-mix(in srgb, var(--blue) 12%, var(--card));
    }
    .badge-warning{
      border-color: color-mix(in srgb, var(--warn) 26%, var(--line));
      background: color-mix(in srgb, var(--warn) 12%, var(--card));
    }

    /* Table */
    .table-wrapper{
      width:100%;
      overflow:auto;
      border-radius: 18px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
    }
    table{
      width:100%;
      border-collapse: separate;
      border-spacing: 0;
      min-width: 1100px;
      background: color-mix(in srgb, var(--card) 96%, transparent);
    }
    thead th{
      text-align:left;
      font-size:12px;
      letter-spacing:.2px;
      text-transform: uppercase;
      color: var(--muted);
      padding: 12px 12px;
      border-bottom:1px solid var(--line);
      background: color-mix(in srgb, var(--surfaceSoft) 55%, transparent);
      position: sticky;
      top: 0;
      z-index: 2;
    }
    tbody td{
      padding: 12px 12px;
      border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
      vertical-align: top;
      font-size: 14px;
    }
    tbody tr:hover td{
      background: color-mix(in srgb, var(--blue) 6%, transparent);
    }
    .cell-actions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .btn.sm{
      padding:10px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 950;
    }
    .btn.danger{
      border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
      background: color-mix(in srgb, var(--danger) 10%, var(--card));
    }
    .btn.danger:hover{
      border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
      background: color-mix(in srgb, var(--danger) 14%, var(--card));
    }
    .btn.ghost{
      background: color-mix(in srgb, var(--card) 92%, transparent);
    }
    .btn.disabled{
      opacity:.55;
      cursor:not-allowed;
      transform:none !important;
    }

    .linkline{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .linkline a{
      font-weight: 950;
      color: color-mix(in srgb, var(--blue) 88%, var(--text));
    }
    .mono{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      color: var(--muted);
      word-break: break-all;
    }

 .linker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 12px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      font-weight: 950;
      font-size: 13px;
      cursor:pointer;
      transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
    }
    .linker:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
      background: color-mix(in srgb, var(--blue) 6%, var(--card));
    }
    .linker.danger{
      border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
      background: color-mix(in srgb, var(--danger) 10%, var(--card));
    }
    .linker.danger:hover{
      background: color-mix(in srgb, var(--danger) 14%, var(--card));
      border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
    }

    .pager{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      margin-top: 12px;
      flex-wrap:wrap;
    }


 .link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 12px;
      border:1px solid color-mix(in srgb, var(--line) 90%, transparent);
      background: color-mix(in srgb, var(--card) 92%, transparent);
      font-weight: 950;
      font-size: 13px;
      cursor:pointer;
      transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
    }
    .link:hover{
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
      background: color-mix(in srgb, var(--blue) 6%, var(--card));
    }
    .link.danger{
      border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
      background: color-mix(in srgb, var(--danger) 10%, var(--card));
    }
    .link.danger:hover{
      background: color-mix(in srgb, var(--danger) 14%, var(--card));
      border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
    }

    .pager{
      display:flex;
      justify-content:flex-end;
      gap:8px;
      margin-top: 12px;
      flex-wrap:wrap;
    }
    
    
     /* File preview */
    .file-row{
      display:flex;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }
    .preview{
      width:56px;height:56px;
      border-radius: 16px;
      border:1px solid color-mix(in srgb, var(--line) 80%, transparent);
      background: var(--surfaceSoft2);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .preview img{
      width:100%; height:100%;
      object-fit:cover;
      display:none;
    }
    .preview i{
      color: color-mix(in srgb, var(--text) 55%, transparent);
    }
    
    .watcher-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      padding: 10px 2px 0;
    }
    .watcher-head h1{
      margin:0;
      font-size: clamp(22px, 2.6vw, 34px);
      letter-spacing:-.6px;
      line-height:1.1;
    }
    .watcher-head .sub{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height:1.6;
      max-width: 72ch;
    }
    
    
    /* =========================
   DARK MODE FORM FIX
   Make inputs white with black text
========================= */

html[data-theme="dark"] select,
html[data-theme="dark"] .input,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: rgba(0,0,0,.15) !important;
}

/* Placeholder color */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: rgba(0,0,0,.45) !important;
}

/* Focus state */
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus{
  border-color: #2F6BFF !important;
  box-shadow: 0 0 0 2px rgba(47,107,255,.15);
}

.logout-btn{
  width:44px;
  height:44px;
  border-radius:16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:16px;
  transition: all .18s var(--ease);
}

.logout-btn:hover{
  border-color: rgba(220,38,38,.35);
  background: rgba(220,38,38,.08);
  color: rgba(220,38,38,1);
}

.logout-btn:active{
  background: rgba(220,38,38,.18);
  color: rgba(220,38,38,1);
  transform: scale(.96);
}


 /* Form controls (map your plugin-control to dashboard inputs) */
    label{
      display:block;
      margin-top: 12px;
      margin-bottom: 6px;
      font-weight:950;
      font-size:12px;
      letter-spacing:.2px;
      text-transform: uppercase;
      color: var(--muted);
    }
    .plugin-control{
      width:100%;
      padding: 11px 12px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: var(--surfaceSoft);
      outline:none;
      font-size: 14px;
      color: var(--text);
    }
    .plugin-control:focus{
      border-color: var(--focus);
      background: color-mix(in srgb, var(--card) 90%, transparent);
    }
    textarea.plugin-control{ resize: vertical; }

    .form-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      margin-top: 14px;
    }

    .submit-btn{
      width:100%;
      border-radius: 14px;
      border:1px solid rgba(1,9,22,.85);
      background: var(--btn);
      color: var(--btnText);
      font-weight:950;
      font-size:14px;
      padding: 12px 14px;
      cursor:pointer;
      transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
    }
    .submit-btn:hover{
      background: var(--btnHover);
      transform: translateY(-2px);
      border-color: rgba(1,9,22,.95);
    }
    
 /* Bell wrapper */
.bell-wrap{
  position: relative;
  display: inline-block;
}

/* Red glowing badge */
.notif-badge{
  position: absolute;
  top: -6px;
  right: -8px;

  min-width: 16px;
  height: 16px;
  padding: 0 4px;

  border-radius: 50px;

  background: #ff2b2b;
  color: #fff;

  font-size: 10px;
  font-weight: 700;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 0 6px rgba(255,0,0,0.9),
    0 0 10px rgba(255,0,0,0.6);

  animation: notifPulse 1.6s infinite;
}

/* glow pulse */
@keyframes notifPulse{
  0%{ box-shadow:0 0 4px rgba(255,0,0,.6); }
  50%{ box-shadow:0 0 12px rgba(255,0,0,1); }
  100%{ box-shadow:0 0 4px rgba(255,0,0,.6); }
}

/* Support sidebar unread badge */
.support-badge{
  margin-left:6px;

  min-width:18px;
  height:18px;
  padding:0 6px;

  border-radius:50px;

  background:#ff2b2b;
  color:#fff;

  font-size:10px;
  font-weight:700;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  position:relative;
  z-index:2;

  box-shadow:
    0 0 6px rgba(255,0,0,0.9),
    0 0 12px rgba(255,0,0,0.8),
    0 0 18px rgba(255,0,0,0.6);

  animation:supportPulse 1.6s ease-in-out infinite;
}

/* glow pulse */
@keyframes supportPulse{
  0%{
    box-shadow:
      0 0 4px rgba(255,0,0,.6),
      0 0 8px rgba(255,0,0,.5);
  }

  50%{
    box-shadow:
      0 0 10px rgba(255,0,0,1),
      0 0 18px rgba(255,0,0,.9),
      0 0 24px rgba(255,0,0,.7);
  }

  100%{
    box-shadow:
      0 0 4px rgba(255,0,0,.6),
      0 0 8px rgba(255,0,0,.5);
  }
}


.confirm-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
}

.confirm-modal.is-open{
  display: block;
}

.confirm-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 20, 0.55);
  backdrop-filter: blur(4px);
}

.confirm-modal__dialog{
  position: relative;
  width: min(92vw, 460px);
  margin: 10vh auto 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  overflow: hidden;
  z-index: 2;
}

.confirm-modal__header,
.confirm-modal__footer{
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.confirm-modal__header{
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.confirm-modal__body{
  padding: 18px;
  color: #495057;
  line-height: 1.6;
}

.confirm-modal__footer{
  border-top: 1px solid rgba(0,0,0,.06);
  justify-content: flex-end;
}

.confirm-modal__close{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
}

body.modal-open{
  overflow: hidden;
}

html[data-theme="dark"] .confirm-modal__dialog{
  background: #0f172a;
  color: #e5e7eb;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

html[data-theme="dark"] .confirm-modal__header,
html[data-theme="dark"] .confirm-modal__footer{
  border-color: rgba(255,255,255,.08);
}

html[data-theme="dark"] .confirm-modal__body{
  color: #cbd5e1;
}

/* unread support message */
.support-unread{
  font-weight:700;
}

/* read support message */
.support-read{
  font-weight:400;
  color:#555;
}