*{box-sizing:border-box}
:root{--blue:#0046bd;--dark:#111827;--border:#d0d5dd}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--dark)}
.user-bg{min-height:100vh;background-image:var(--bg);background-size:100% 100%;background-position:center center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:flex-end;padding:35px 85px}
.user-page{width:min(485px,100%);min-height:635px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.75);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.26);padding:38px 42px;backdrop-filter:blur(6px)}
.logo-box{width:130px;height:45px;border:1px dashed #cbd5e1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#475467;margin-bottom:24px;background:white}
h1{font-size:42px;margin:0 0 25px;font-weight:800;color:#202124}
h2{font-size:27px;margin:0 0 14px;font-weight:800;text-align:center;color:#111827}
p{color:#475467;line-height:1.45}
label{display:block;font-weight:800;margin:15px 0 7px;color:#111827}
.input-line,.input-box{width:100%;font-size:16px;border:1px solid #d0d5dd;border-radius:10px;padding:15px 14px;outline:none;background:#fff}
.input-line:focus,.input-box:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,70,189,.12)}
.field-error{color:#dc2626;font-size:14px;font-weight:700;margin:7px 0 0}
.is-error{border-color:#dc2626!important}
.btn{width:100%;border:0;border-radius:10px;background:linear-gradient(90deg,#063c9b,#005be0);color:white;font-size:18px;font-weight:800;padding:16px 20px;cursor:pointer;text-decoration:none;display:block;text-align:center;margin:23px 0}
.btn-outline{background:white;color:#1f2937;border:1px solid #d9d9d9}
.or{display:flex;align-items:center;gap:18px;color:#555;margin:25px 0 18px}.or:before,.or:after{content:"";height:1px;background:#e5e7eb;flex:1}
.option-row{display:flex;align-items:center;gap:14px;border:1px solid #dedede;border-radius:28px;padding:12px 18px;margin:11px 0;font-weight:700;justify-content:center;background:#fff}
.option-img{width:24px;height:24px;border:1px dashed #98a2b3;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#667085;font-size:9px;flex:0 0 24px}
.center-area{text-align:center;margin:55px 0}
.spinner{width:58px;height:58px;border-radius:50%;border:6px solid #dff1f0;border-top-color:#0aa39a;animation:spin 1s linear infinite;margin:26px auto}@keyframes spin{to{transform:rotate(360deg)}}
.email-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ddd;padding:10px 0;font-size:20px;color:#333}
.person{font-size:28px}
.template-title{font-weight:800;font-size:21px;margin:0 0 32px}
.template-desc{text-align:center;margin:30px 0 18px;font-size:16px;color:#62666f}
.template-info{text-align:center;font-weight:700;margin:22px 0 50px;color:#404348}
.admin-note-title{text-align:center;font-weight:800;font-size:18px;border-bottom:3px solid #c92727;width:max-content;max-width:100%;padding:0 25px 8px;margin:35px auto 18px}
.admin-note-box{background:#eef6ff;border:1px solid #d5e7fb;padding:16px;border-radius:8px;text-align:center;font-weight:700;color:#0c2f6e}
.big-message{font-size:36px;font-weight:900;text-align:center;margin:55px 0;color:#333;word-break:break-word}
.done-check{width:80px;height:80px;border-radius:50%;background:#0a7c2f;color:white;display:flex;align-items:center;justify-content:center;font-size:48px;margin:45px auto 18px}
.countdown{font-size:50px;font-weight:900;color:var(--blue);border:7px solid #d8e4ff;width:112px;height:112px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:22px auto}
.primary-mask-wrap{position:relative;width:100%;display:block}
.primary-mask-wrap input{padding-right:54px!important}
.primary-eye-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#173f8f;font-size:21px;cursor:pointer;padding:8px 10px}
.live-visitor-box{position:fixed;right:18px;bottom:18px;background:#7f1d1d;color:#fff;border:1px solid #ef4444;border-radius:12px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:800;z-index:9999;display:none}
.live-visitor-box.show{display:block}

/* Admin */
.admin-body{margin:0;background:#070d19;color:#e6edf7;font-family:Arial,Helvetica,sans-serif;padding:18px}
.admin-top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap}
.admin-btn{background:#111d32;border:1px solid #28415f;color:#e6edf7;border-radius:9px;padding:11px 16px;text-decoration:none;font-weight:700;display:inline-block;cursor:pointer}
.admin-btn.red{border-color:#7f1d1d;color:#fecaca}.admin-btn.green{border-color:#14532d;color:#bbf7d0}.admin-btn.yellow{border-color:#854d0e;color:#fde68a}.admin-btn.purple{background:#4c1d95}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{background:#101a2c;border:1px solid #233a57;border-radius:12px;padding:18px}.stat small{color:#9fb3cb}.stat b{display:block;font-size:34px;margin-top:6px}
.panel{background:#101a2c;border:1px solid #233a57;border-radius:12px;overflow:hidden;margin-bottom:18px}.panel-head{background:linear-gradient(90deg,#4c1d95,#7c3aed);padding:16px 18px;font-size:20px;font-weight:800}
.panel-body{padding:18px}.table-wrap{overflow:auto}table{width:100%;min-width:1120px;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #253852;text-align:left;font-size:14px}th{color:#c4b5fd}.badge{padding:5px 9px;border-radius:7px;font-weight:800;background:#1d4ed8;color:#dbeafe;font-size:12px}.badge.yellow{background:#854d0e}
.actions form{display:inline}.mini-btn{border:0;border-radius:7px;padding:8px 10px;color:white;background:#5b21b6;margin:2px;cursor:pointer;text-decoration:none;display:inline-block}.mini-btn.red{background:#b91c1c}.mini-btn.green{background:#15803d}
.control-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:18px}.control-section{border:1px solid #293c5a;border-radius:12px;padding:14px}.control-title{color:#c4b5fd;font-weight:800;margin-bottom:12px}
.form-card{background:#101a2c;border:1px solid #233a57;border-radius:12px;padding:18px;margin-bottom:18px}.admin-input{width:100%;border:1px solid #334155;background:#0b1220;color:#e5e7eb;border-radius:7px;padding:12px;margin:8px 0 14px}.admin-save{background:#6d28d9;color:#fff;border:0;border-radius:7px;padding:12px 18px;font-weight:800;cursor:pointer}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.toggle-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #233a57;padding:12px 0}.preview-bg{width:100%;height:170px;object-fit:cover;border-radius:10px;border:1px solid #334155;background:#0b1220}
@media(max-width:900px){.user-bg{justify-content:center;padding:18px;background-size:cover}.user-page{min-height:650px;padding:28px 22px;border-radius:18px}.stats,.settings-grid,.control-grid{grid-template-columns:1fr}.admin-body{padding:10px}}
.top-action-form{display:inline-block;margin:0 4px 0 0}.top-action-form button{font-family:inherit}.ping-badge{font-weight:800;font-size:13px;white-space:nowrap}.ping-badge.online{color:#86efac}.ping-badge.offline{color:#fca5a5}.mx-badge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:800;color:#dbeafe}.mx-icon{width:22px;height:22px;border-radius:999px;background:#1e3a8a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}


/* Stage 2 branding/background manager updates */
.user-bg{position:relative;overflow:hidden;transition:background-image .8s ease-in-out;background-size:cover;background-color:#0f172a}
.user-bg:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.28);pointer-events:none;z-index:0}
.user-page{position:relative;z-index:2}
.logo-image-box{border:0;background:transparent;padding:0;overflow:hidden}
.logo-image-box img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}
.background-branding{position:absolute;left:62px;top:54px;bottom:54px;width:min(420px,42vw);z-index:1;color:#fff;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.bg-brand-top{display:flex;align-items:center;gap:14px}.bg-logo-wrap{width:72px;height:72px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);box-shadow:0 12px 35px rgba(0,0,0,.25);flex:0 0 72px}.bg-logo-wrap img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;pointer-events:none;user-select:none}.bg-brand-line1{font-size:25px;font-weight:900;letter-spacing:.2px;line-height:1.05}.bg-brand-line2{font-size:15px;font-weight:700;opacity:.94;margin-top:5px;line-height:1.25}.bg-bottom-text{font-size:21px;font-weight:800;line-height:1.25;max-width:390px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:16px 18px;backdrop-filter:blur(3px)}
.option-image{border:0;background:transparent;overflow:hidden;padding:0}.option-image img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none}.preview-logo{width:220px;height:76px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid #334155;padding:6px;display:block;margin:8px 0 12px}.preview-small-logo{width:82px;height:82px;object-fit:contain;background:#fff;border-radius:12px;border:1px solid #334155;padding:6px;display:block;margin:8px 0 12px}.option-admin-row{display:grid;grid-template-columns:70px 1fr;gap:14px;align-items:center;border-top:1px solid #233a57;padding-top:12px;margin-top:12px}.option-admin-row img{width:54px;height:54px;object-fit:contain;background:#fff;border-radius:10px;border:1px solid #334155;padding:5px}
@media(max-width:1100px){.background-branding{left:24px;width:330px}.bg-brand-line1{font-size:22px}.bg-bottom-text{font-size:18px}.user-bg{padding-right:35px}}
@media(max-width:900px){.user-bg:before{background:rgba(0,0,0,.22)}.background-branding{position:relative;left:auto;top:auto;bottom:auto;width:100%;max-width:485px;margin:0 auto 16px;padding:0;display:block}.bg-brand-top{margin-bottom:14px}.bg-logo-wrap{width:55px;height:55px;flex-basis:55px;border-radius:14px}.bg-brand-line1{font-size:20px}.bg-brand-line2{font-size:13px}.bg-bottom-text{font-size:15px;padding:10px 12px;margin-bottom:12px}.user-bg{display:flex;flex-direction:column;justify-content:center}}