:root{
    --bg:#0B0B10; --surface:#17171F; --surface-2:#1F1F2A; --surface-3:#292935; --line:#2C2C38;
    --text:#F5F5F7; --muted:#9494A0; --accent:#FF3E6C; --accent-2:#7B2FF7; --accent-dim:rgba(255,62,108,0.14);
    --gold:#F5C344; --blue:#5E9EFF; --green:#5FD68A; --radius:16px; --radius-lg:22px;
    --shadow-soft:0 16px 34px rgba(0,0,0,0.35); --shadow-strong:0 30px 80px rgba(0,0,0,0.5);
  }
  html[data-theme="oled"]{
    --bg:#000000; --surface:#0A0A0A; --surface-2:#121212; --surface-3:#1A1A1A; --line:#1E1E1E;
    --text:#F5F5F7; --muted:#8C8C8C;
  }
  html[data-theme="light"]{
    --bg:#F4F4F7; --surface:#FFFFFF; --surface-2:#F2F2F6; --surface-3:#E9E9EF; --line:#E2E2E9;
    --text:#16161B; --muted:#6C6C78; --accent-dim:rgba(255,62,108,0.10);
    --shadow-soft:0 16px 34px rgba(20,20,30,0.10); --shadow-strong:0 30px 80px rgba(20,20,30,0.18);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;min-height:100vh;-webkit-font-smoothing:antialiased;
    transition:background .25s ease,color .25s ease;position:relative;}
  a{color:inherit;}
  .hidden{display:none !important;}
  button{font-family:inherit;}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;}
  ::selection{background:var(--accent);color:#fff;}

  /* film-grain texture, very subtle, keeps flat gradients from feeling generic */
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:0.035;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  html[data-theme="light"] body::before{opacity:0.02;}

  @keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes floatBlob{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-16px) scale(1.05);}}
  @keyframes shimmer{0%{background-position:-300px 0;}100%{background-position:300px 0;}}
  @keyframes popIn{0%{transform:scale(.9);opacity:0;}100%{transform:scale(1);opacity:1;}}
  @keyframes pulseGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
  .anim{animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both;}

  .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  .bg-blobs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
  .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:0.22;animation:floatBlob 14s ease-in-out infinite;}
  .blob1{width:420px;height:420px;background:var(--accent);top:-120px;left:-80px;}
  .blob2{width:380px;height:380px;background:var(--accent-2);top:200px;right:-140px;animation-delay:-6s;}
  .blob3{width:300px;height:300px;background:var(--blue);bottom:-100px;left:30%;animation-delay:-3s;opacity:.12;}
  html[data-theme="light"] .blob{opacity:0.12;}

  /* ---- Brand mark ---- */
  .brand{display:flex;align-items:center;gap:9px;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:15px;white-space:nowrap;cursor:pointer;}
  .brand-mark{width:29px;height:29px;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-radius:9px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 14px rgba(255,62,108,0.35);
    transition:transform .2s cubic-bezier(.2,.8,.2,1);}
  .brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);}
  .brand-mark svg{width:16px;height:16px;}

  /* ---- Nav (shared) ---- */
  nav{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--bg) 82%, transparent);position:sticky;top:0;z-index:30;backdrop-filter:blur(14px);}
  .nav-tabs{display:flex;gap:6px;flex-wrap:wrap;}
  .nav-tab{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;
    border:none;background:transparent;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease;}
  .nav-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;}
  .nav-tab:hover:not(.active){background:var(--surface-2);color:var(--text);}
  .nav-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
  .nav-icon-btn{width:38px;height:38px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:border-color .15s ease,color .15s ease,transform .15s ease;flex-shrink:0;}
  .nav-icon-btn:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px);}
  .nav-icon-btn:active{transform:scale(0.94);}
  .nav-icon-btn svg{width:16px;height:16px;}
  .nav-icon-btn.muted-state{color:var(--accent);}
  .theme-switch{display:flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex-shrink:0;}
  .theme-btn{width:26px;height:26px;border-radius:50%;border:none;background:transparent;color:var(--muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:12px;transition:background .15s ease,color .15s ease;}
  .theme-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:13px;
    color:var(--accent);cursor:pointer;overflow:hidden;transition:border-color .15s ease,transform .15s ease;flex-shrink:0;}
  .avatar:hover{border-color:var(--accent);transform:translateY(-1px);}
  .avatar img{width:100%;height:100%;object-fit:cover;}

  .wrap{max-width:1180px;margin:0 auto;padding:36px 28px 60px;}

  /* ---- Buttons / inputs (shared) ---- */
  .field{margin-bottom:14px;}
  label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;}
  .pw-wrap{position:relative;}
  input[type=email],input[type=password],input[type=text],input[type=number],input[type=url],textarea,select{
    width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;
    color:var(--text);font-family:'Inter',sans-serif;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease;}
  .pw-wrap input{padding-right:56px;}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);}
  .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);
    font-size:11px;font-family:Inter,system-ui,sans-serif;cursor:pointer;padding:6px 8px;}
  .btn{appearance:none;border:none;border-radius:10px;padding:12px 20px;font-family:Inter,system-ui,sans-serif;font-weight:700;
    font-size:14px;cursor:pointer;transition:opacity .12s ease,transform .1s ease,box-shadow .15s ease;}
  .btn:hover{opacity:0.92;transform:translateY(-1px);} .btn:active{transform:scale(0.98);} .btn:disabled{opacity:0.5;cursor:default;transform:none;}
  .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;width:100%;
    box-shadow:0 6px 20px rgba(255,62,108,0.25);}
  .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);}
  .btn-danger{background:transparent;color:var(--accent);border:1px solid rgba(255,62,108,0.35);}
  .error-msg{color:var(--accent);font-size:13px;margin-top:10px;min-height:16px;}
  .success-msg{color:var(--green);font-size:12.5px;margin-top:6px;min-height:14px;}
  .switch-mode{margin-top:18px;font-size:13px;color:var(--muted);text-align:center;}
  .switch-mode button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;padding:0;text-decoration:underline;}

  .viewing-banner{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);
    border:1px solid var(--line);border-radius:12px;padding:12px 18px;margin-bottom:24px;font-size:13.5px;animation:fadeUp .3s ease both;}
  .viewing-banner strong{color:var(--accent);}

  /* ---- Section head ---- */
  .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
  .section-title{font-family:Inter,system-ui,sans-serif;font-weight:800;font-size:20px;}
  .section-sub{color:var(--muted);font-size:13px;margin-top:2px;}

  /* ---- Filter bar ---- */
  .filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px;}
  .filter-bar .divider{width:1px;height:20px;background:var(--line);}
  .chip{font-family:Inter,system-ui,sans-serif;font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:999px;
    border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;
    transition:background .15s ease,color .15s ease,border-color .15s ease,transform .1s ease;}
  .chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;}
  .chip:hover:not(.active){border-color:var(--accent);}
  .chip:active{transform:scale(.96);}
  .sort-select{margin-left:auto;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
    border-radius:999px;padding:8px 14px;font-family:Inter,system-ui,sans-serif;font-size:11.5px;}
  .refresh-btn{font-family:Inter,system-ui,sans-serif;font-size:11.5px;background:var(--surface-2);border:1px solid var(--line);
    color:var(--muted);border-radius:999px;padding:8px 14px;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;}
  .refresh-btn.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent;}