:root{
  --bg:#06102b; --bg2:#0a2352; --card:#0e1d45; --line:#20356d;
  --text:#eef3ff; --soft:#b9c9ea; --mute:#8ea4cf;
  --cyan:#3ee0ff; --violet:#8b6cff; --gold:#ffc857; --li:#0a66c2;
  --ok:#2fd39a; --bad:#ff6b81;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif; color:var(--text); min-height:100vh;
  background:radial-gradient(1200px 600px at 85% -10%,rgba(139,108,255,.25),transparent 60%),
             radial-gradient(900px 500px at -10% 110%,rgba(62,224,255,.15),transparent 60%),
             linear-gradient(160deg,var(--bg),var(--bg2));
  background-attachment:fixed;
}
a{color:var(--cyan)}
h1,h2{font-family:Sora,Inter,sans-serif;margin:.2em 0 .4em;line-height:1.15}
small{color:var(--mute);font-weight:400}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.07)}
.brand{font-family:Sora;font-weight:800;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px;font-size:18px}
.brand small{font-family:Inter;font-weight:500;margin-left:6px}
.dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));box-shadow:0 0 14px var(--cyan)}
main{max-width:1240px;margin:0 auto;padding:36px 20px 60px}
.foot{text-align:center;color:var(--mute);font-size:13px;padding:24px 16px 32px}

.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:600;color:var(--cyan);margin:0}
.muted{color:var(--soft)} .small{font-size:14px}
.card,.panel{background:rgba(14,29,69,.82);border:1px solid var(--line);border-radius:18px;padding:28px;backdrop-filter:blur(8px)}
label{display:block;font-size:14px;font-weight:500;color:var(--soft);margin:14px 0 0}
input,select,textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:#081536;color:var(--text);font:inherit;font-size:15px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;line-height:1.5}
.btn{display:inline-block;border:0;cursor:pointer;margin-top:18px;padding:13px 22px;border-radius:12px;font:600 15px Inter,sans-serif;
  color:#06102b;background:linear-gradient(135deg,var(--cyan),var(--violet));text-decoration:none;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.li{background:var(--li);color:#fff}
.ghost-btn{background:transparent;border:1px solid var(--line);color:var(--text)}
.ghost{color:var(--soft);text-decoration:none;font-size:14px;background:none;border:0;cursor:pointer;font-family:inherit}
.ghost:hover{color:var(--text)}
.block{display:block;margin-top:16px;text-align:center}
.alert,.ok{padding:12px 14px;border-radius:10px;font-size:14px;margin:12px 0}
.alert{background:rgba(255,107,129,.12);border:1px solid rgba(255,107,129,.4);color:#ffd0d8}
.ok{background:rgba(47,211,154,.12);border:1px solid rgba(47,211,154,.4);color:#c9f7e6}
.hint{font-size:13px;color:var(--mute);margin-top:16px}

/* login */
.auth{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;min-height:62vh}
.auth h1{font-size:46px}
.auth h1 span{background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-intro>p{color:var(--soft);font-size:17px;line-height:1.6;max-width:520px}
.steps{list-style:none;padding:0;margin:24px 0 0}
.steps li{display:flex;align-items:center;gap:12px;margin:10px 0;color:var(--soft)}
.steps b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(62,224,255,.15);color:var(--cyan);font-size:13px}
.card .btn{width:100%}
.narrow{max-width:460px;margin:20px auto}

/* dashboard */
.dash{display:grid;grid-template-columns:minmax(320px,440px) 1fr;gap:32px;align-items:start}
.share{grid-template-columns:1fr minmax(320px,460px)}
.h-name{font-size:28px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.photo-pick{display:grid;gap:12px;margin-top:10px}
.drop{border:1.5px dashed var(--line);border-radius:14px;padding:18px;text-align:center;cursor:pointer;margin:0;background:rgba(62,224,255,.04)}
.drop:hover{border-color:var(--cyan)}
.drop input{display:none}
.drop span{display:block;color:var(--text);font-weight:600}
.sliders{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sliders label{margin:0}
.sliders input{padding:0;accent-color:var(--cyan);background:none;border:0}
.preview{position:sticky;top:20px}
#poster,.poster-img{width:100%;max-width:620px;display:block;margin:0 auto;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.preview .small{text-align:center}
.manual{padding-left:20px}
.manual li{margin:6px 0}
.manual .btn{margin-top:6px;width:100%}
#cap{margin-top:16px;font-size:13px}

/* admin */
.admin-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.admin-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.admin-links .btn{margin:0}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;color:var(--soft);font-size:13px}
.stats b{display:block;font:800 30px Sora;color:var(--text)}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:14px;background:rgba(14,29,69,.7)}
th,td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.badges span{display:inline-block;font-size:11px;padding:3px 8px;border-radius:99px;margin:2px}
.badges .yes{background:rgba(47,211,154,.15);color:var(--ok)}
.badges .no{background:rgba(255,255,255,.06);color:var(--mute)}
.thumb{width:56px;border-radius:6px;display:block}
.small-btn{font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 10px}

@media (max-width:900px){
  .auth,.dash,.share{grid-template-columns:1fr}
  .auth h1{font-size:34px}
  .preview{position:static;order:-1}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  main{padding:20px 16px 40px}
  .grid2,.sliders{grid-template-columns:1fr}
  .topbar{padding:14px 16px}
  .brand small{display:none}
}
.logo-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:14px;background:#fff;border-radius:14px}
.logo-row span{display:flex;align-items:center;font-size:13px;color:#53607a}
.logo-row img{height:44px;width:auto}
.logo-row .no{padding:8px 12px;background:#eef3fc;border-radius:8px}
.gen-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(62,224,255,.06)}
.gen-bar .btn{margin:0}
.gen-bar span{flex:1;min-width:220px;color:var(--soft)}
.pmeta{display:block;margin-top:6px;line-height:1.5}
td .thumb{float:left;margin-right:10px}
.gen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-top:18px}
.gen-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;font-size:12px}
.gen-card img,.gen-img{width:100%;aspect-ratio:4/5;border-radius:8px;display:grid;place-items:center;object-fit:cover;background:#081536;color:var(--mute);margin-bottom:6px}
.gen-card.failed{border-color:var(--bad)}