* { box-sizing: border-box; }

    :root{
      --bg:#0b0d10;
      --card:#12161b;
      --text:#eef2f7;
      --muted:#b6c0cc;
      --line:#233041;
      --accent:#7c5cff;
      --ok:#3ddc97;
      --warn:#ffd166;
      --danger:#ff5c7a;
      --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:18px;

      --violet-border: rgba(124,92,255,.32);
      --violet-glow: 0 0 0 1px rgba(124,92,255,.16), 0 10px 30px rgba(0,0,0,.35);
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(124,92,255,.25), transparent 60%),
        radial-gradient(900px 500px at 90% 10%, rgba(61,220,151,.18), transparent 55%),
        var(--bg);
      background-repeat: no-repeat;
      background-attachment: fixed;
      color: var(--text);
    }

    .wrap { max-width: 1100px; margin: 0 auto; padding: 22px; }

    .topbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:18px;}
    .badge{display:flex; gap:12px; align-items:center; background: rgba(12,14,18,.6); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; box-shadow: var(--shadow);}    
    .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(124,92,255,.6)}

    .btn {padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(12,14,18,.6);color:var(--text);cursor:pointer;font-weight:650;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1;}
    .btn:hover { border-color: var(--accent); }
    .btn.primary { border-color: var(--accent); background: rgba(124,92,255,.12); }
    .btn.danger { border-color: var(--danger); }

    .card {background: linear-gradient(180deg, rgba(18,22,27,.92), rgba(15,19,24,.92));border: 1px solid var(--violet-border);border-radius: var(--radius);box-shadow: var(--violet-glow);overflow: hidden;}
    .card-header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08)}
    .card-body{padding:18px}
    .grid{display:grid; gap:12px}
    .pad { padding: 18px; }
    .muted{color:var(--muted)}
    .status-ok{color:var(--ok)}
    .status-off{color:var(--danger)}

    label{display:block; margin:10px 0 6px; color:var(--muted); font-size:13px}
    input, select{width:100%; padding:10px 12px; height:40px; border-radius:12px; border:1px solid var(--line); background:rgba(12,14,18,.6); color:var(--text)}

    .row{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
    @media (max-width: 680px){ .row{grid-template-columns:1fr;} }

    .avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;border:1px solid var(--line);background:rgba(12,14,18,.6);display:flex;align-items:center;justify-content:center}
    .avatar img{width:100%;height:100%;object-fit:cover}
    .profile-image-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

    .cropper{display:flex;flex-direction:column;gap:16px}
    .cropper-stage{position:relative;width:320px;height:320px;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0d1117;display:flex;align-items:center;justify-content:center}
    .cropper-stage canvas{width:100%;height:100%;display:block}
    .cropper-mask{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 56%);}
    .cropper-controls{display:flex;flex-direction:column;gap:8px}
    .cropper-controls input[type="range"]{width:100%}

    .floating-pill{position:fixed; right:22px; bottom:22px; z-index:20; display:flex; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(12,14,18,.85); box-shadow:0 12px 30px rgba(0,0,0,.35);}    
    .toggle-list{display:grid; gap:10px}
    .toggle-list label{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--text); margin:0}
    .toggle-list input{width:auto; height:auto}
    .toast{position:fixed; right:24px; bottom:96px; background:rgba(15,20,28,.95); border:1px solid var(--line); color:var(--text); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease; pointer-events:none; z-index:60; font-size:14px}
    .toast.show{opacity:1; transform:translateY(0)}
    .toast.success{border-color:rgba(61,220,151,.5)}
    .toast.error{border-color:rgba(255,92,122,.6)}
    .admin-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(5,7,10,.65); z-index:50}
    .admin-modal.show{display:flex}
    .admin-modal-card{width:min(520px, 92vw); background:linear-gradient(180deg, rgba(18,22,27,.95), rgba(14,18,24,.95)); border:1px solid var(--violet-border); border-radius:18px; box-shadow:var(--violet-glow)}
    .admin-modal-head{padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08)}
    .admin-modal-title{margin:0; font-size:18px}
    .admin-modal-body{padding:18px}
    .admin-modal-foot{padding:14px 18px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid rgba(255,255,255,.08)}
    .btn-anim{animation: btnPulse .35s ease}
    @keyframes btnPulse{0%{transform:scale(1)}50%{transform:scale(0.96)}100%{transform:scale(1)}}

/* Inline style extraction */
.inline-style-1{display:none; margin-bottom:16px}
.inline-style-2{font-weight:800; margin-bottom:6px}
.inline-style-3{font-weight:800}
.inline-style-4{margin-top:14px; display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.inline-style-5{margin-top:18px}
.inline-style-6{grid-template-columns:1fr 1fr; gap:16px}
.inline-style-7{font-weight:700; margin-bottom:10px}
.inline-style-8{align-self:start; width:fit-content}
.inline-style-9{margin-bottom:12px}
.inline-style-10{display:none}
.inline-style-11{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.inline-style-12{width:140px; height:140px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(12,14,18,.6); display:flex; align-items:center; justify-content:center; overflow:hidden}
.inline-style-13{width:100%; height:100%; object-fit:cover; display:block; visibility:hidden}
.inline-style-14{flex:1; min-width:220px}
.inline-style-15{margin-bottom:6px}
.inline-style-16{font-weight:700; word-break:break-all}
.inline-style-17{margin-top:12px}
.inline-style-18{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.inline-style-19{display:none; margin-top:12px}
.inline-style-20{font-weight:500}
.inline-style-21{font-size:14px}
.inline-style-22{margin-bottom:12px; font-size:14px}

/* Inline style extraction (JS templates) */
.js-inline-style-1{font-size:14px}