/* =====================================================================
   Web3s AI Photo Studio — CSS tự code (không dùng framework)
   Responsive, dark theme (indigo/purple), kiểm tra kỹ lệch khung.
   ===================================================================== */

:root{
  --primary:#6366f1; --primary-600:#4f46e5; --secondary:#a855f7;
  --dark:#0f172a; --surface:#1e293b; --surface-2:#172033;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#f8fafc; --muted:#94a3b8; --muted-2:#64748b;
  --green:#22c55e; --red:#ef4444; --yellow:#eab308; --pink:#ec4899;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --grad:linear-gradient(135deg,var(--primary),var(--secondary));
  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--dark); color:var(--text); line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
::selection{background:rgba(99,102,241,.35); color:#fff}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:#475569;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#64748b}
.scroll-hide::-webkit-scrollbar{display:none}
.scroll-hide{scrollbar-width:none}

/* Layout helpers */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 16px}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px}
.hidden{display:none!important}
.text-center{text-align:center}
.muted{color:var(--muted)} .small{font-size:13px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:11px 18px; font-weight:600; font-size:14px; color:#fff;
  background:var(--surface); transition:.18s; line-height:1; white-space:nowrap;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad); box-shadow:0 8px 20px rgba(99,102,241,.25)}
.btn-ghost{background:rgba(255,255,255,.05); border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-green{background:linear-gradient(135deg,#22c55e,#10b981)}
.btn-danger{background:rgba(239,68,68,.12); color:#f87171; border-color:rgba(239,68,68,.3)}
.btn-block{width:100%}
.btn-lg{padding:15px 26px; font-size:16px; border-radius:var(--radius)}
.btn[disabled]{opacity:.55; cursor:not-allowed}

/* Forms */
.field{margin-bottom:14px}
.label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
.input,.select,.textarea{
  width:100%; background:var(--dark); color:var(--text);
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:11px 13px; font-size:14px; outline:none; transition:.15s;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.18)}
.textarea{min-height:120px; resize:vertical; font-size:13px}
.input-group{display:flex; gap:8px}
.input-group .input{flex:1}

/* Badge / chip */
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap;
  background:rgba(255,255,255,.05); color:var(--muted); border:1px solid transparent; transition:.15s;
}
.chip:hover{color:#fff; background:rgba(255,255,255,.1)}
.chip.active{background:var(--primary); color:#fff}

/* Card */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px}

/* ============ Header ============ */
.app-header{
  position:sticky; top:0; z-index:50; background:rgba(30,41,59,.82);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.app-header .container{display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0}
.brand .logo{width:34px;height:34px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}
.brand h1{font-size:18px; margin:0; letter-spacing:-.3px; white-space:nowrap}
.brand p{font-size:10px; color:var(--muted-2); margin:0; font-family:monospace}
.header-actions{display:flex; align-items:center; gap:10px; flex-wrap:nowrap}
.header-select{background:var(--dark); border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font-size:12px; color:var(--muted); max-width:160px}

.user-pill{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 5px}
.user-pill img,.user-pill .avatar{width:28px;height:28px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
.user-pill .uname{font-size:13px; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Notification bar */
.notif-bar{background:linear-gradient(90deg,#2563eb,#7c3aed); color:#fff; text-align:center; padding:9px 16px; font-size:13.5px; font-weight:500}

/* ============ Studio ============ */
.studio{padding:28px 0 110px}
.page-title{text-align:center; margin-bottom:26px}
.page-title h2{font-size:clamp(24px,4vw,38px); margin:0 0 8px}
.page-title p{color:var(--muted); margin:0; max-width:640px; margin-inline:auto}

.mode-tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px}
.mode-tab{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  font-size:13.5px; font-weight:600; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:.15s;
}
.mode-tab:hover{color:#fff}
.mode-tab.active{background:#fff; color:#000; box-shadow:var(--shadow); transform:translateY(-1px)}

.studio-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px; align-items:start}

/* Upload boxes */
.upload-box{border:2px dashed #475569; border-radius:var(--radius-lg); padding:16px; background:var(--surface); transition:.15s}
.upload-box.filled{border-color:var(--primary); background:rgba(99,102,241,.08)}
.upload-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13.5px; color:var(--muted)}
.upload-drop{height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--muted-2); cursor:pointer; transition:.15s; text-align:center}
.upload-drop:hover{color:#fff}
.upload-drop .ico{font-size:30px}
.preview-img{width:100%; height:250px; object-fit:contain; background:rgba(0,0,0,.5); border-radius:var(--radius-sm)}
.link-danger{color:#f87171; font-size:12.5px} .link-danger:hover{color:#fca5a5}

.multi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px}
.multi-cell{position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-2)}
.multi-cell img{width:100%;height:100%;object-fit:cover}
.multi-cell .rm{position:absolute; top:4px; right:4px; width:20px;height:20px;border-radius:50%; background:rgba(0,0,0,.7); color:#f87171; border:none; font-size:13px; display:flex; align-items:center; justify-content:center}
.multi-cell .tag{position:absolute; bottom:0; width:100%; background:rgba(0,0,0,.6); font-size:9px; text-align:center; padding:2px 0}
.multi-add{aspect-ratio:1; border:1px dashed #475569; border-radius:var(--radius-sm); background:transparent; color:var(--muted-2); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px}
.multi-add:hover{color:#fff; background:rgba(255,255,255,.05)}

/* Config panel */
.config-panel{margin-top:18px}
.config-panel .card{display:flex; flex-direction:column; gap:16px}
.sub-h{font-size:13.5px; font-weight:600; color:var(--primary); display:flex; align-items:center; gap:8px; margin:0 0 4px}
.divider{border-top:1px solid var(--line); padding-top:16px}

.size-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.toggle-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.opt-toggle{display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--dark); color:var(--muted); font-size:12.5px; cursor:pointer; transition:.15s}
.opt-toggle.on{background:rgba(99,102,241,.15); border-color:var(--primary); color:#fff}

.color-row{display:flex; gap:10px}
.color-dot{width:32px;height:32px;border-radius:50%; border:2px solid #475569; cursor:pointer; transition:.15s}
.color-dot.sel{border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.4)}

.cat-row{display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; margin-bottom:8px}
.style-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:250px; overflow-y:auto; padding-right:4px}
.style-cell{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:10px 6px; border-radius:var(--radius-sm); border:1px solid var(--line-2); background:var(--dark); color:var(--muted); font-size:10.5px; font-weight:600; transition:.15s; min-height:64px}
.style-cell:hover{color:#fff; border-color:#64748b}
.style-cell.sel{background:rgba(99,102,241,.18); border-color:var(--primary); color:#c7d2fe}
.style-cell .emoji{font-size:20px}

.row-2{display:flex; gap:16px}
.qty{display:flex; align-items:center; height:42px; background:var(--dark); border:1px solid var(--line-2); border-radius:var(--radius-sm)}
.qty button{background:none; border:none; color:var(--muted); font-size:18px; font-weight:700; padding:0 14px; height:100%}
.qty span{flex:1; text-align:center; font-size:14px}

.error-banner{padding:12px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.25); border-radius:var(--radius-sm); color:#fca5a5; text-align:center; font-size:13.5px; margin:6px 0}

/* Result library */
.result-wrap{background:rgba(30,41,59,.5); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; min-height:480px}
.result-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.result-empty{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:2px dashed #334155; border-radius:var(--radius); padding:70px 20px; color:#475569; text-align:center}
.result-empty .big{font-size:48px; opacity:.25}
.result-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.result-cell{position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden; background:#000; border:1px solid var(--line); box-shadow:var(--shadow)}
.result-cell img{width:100%;height:100%;object-fit:cover; transition:.6s}
.result-cell:hover img{transform:scale(1.08)}
.result-overlay{position:absolute; inset:0; background:rgba(0,0,0,.7); opacity:0; transition:.2s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:16px; text-align:center}
.result-cell:hover .result-overlay{opacity:1}
.result-overlay p{font-size:12.5px; font-style:italic; color:#cbd5e1; margin:0; max-height:60px; overflow:hidden}

/* Footer */
.app-footer{position:fixed; bottom:0; width:100%; background:rgba(30,41,59,.92); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:11px; text-align:center; font-size:12.5px; color:var(--muted); z-index:20}
.app-footer b{color:var(--primary)}

/* ============ Modal ============ */
.modal-overlay{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.78); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); width:100%; max-width:460px; padding:24px; box-shadow:var(--shadow); max-height:90vh; overflow-y:auto}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px}
.modal-head h3{margin:0; font-size:17px; display:flex; align-items:center; gap:8px}
.modal-close{background:none; border:none; color:var(--muted); font-size:24px; line-height:1}
.key-list{display:flex; flex-direction:column; gap:8px; max-height:200px; overflow-y:auto; padding-right:4px; margin-bottom:6px}
.key-item{display:flex; justify-content:space-between; align-items:center; background:var(--dark); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:9px 11px; font-size:12.5px}

/* ============ Processing overlay ============ */
.processing{position:fixed; inset:0; z-index:90; background:rgba(15,23,42,.92); backdrop-filter:blur(8px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; text-align:center}
.spinner-dual{position:relative; width:120px; height:120px; margin-bottom:28px}
.spinner-dual::before,.spinner-dual::after{content:''; position:absolute; border-radius:50%}
.spinner-dual::before{inset:0; border:4px solid transparent; border-top-color:var(--primary); border-left-color:var(--primary); animation:spin 1s linear infinite}
.spinner-dual::after{inset:8px; border:4px solid transparent; border-bottom-color:var(--secondary); border-right-color:var(--secondary); animation:spin .7s linear infinite reverse}
.spinner-emoji{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:30px}
@keyframes spin{to{transform:rotate(360deg)}}
.progress-track{width:100%; max-width:300px; height:6px; background:#1e293b; border-radius:999px; overflow:hidden; border:1px solid var(--line)}
.progress-bar{height:100%; width:0; background:var(--grad); transition:width .2s ease-out}

/* ============ Landing ============ */
.hero{position:relative; padding:80px 0 110px; overflow:hidden; text-align:center}
.hero::before{content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 0%,rgba(99,102,241,.18),transparent 70%)}
.hero .container{position:relative; z-index:2; max-width:840px}
.hero .pill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(99,102,241,.1); border:1px solid rgba(99,102,241,.25); color:#c7d2fe; font-size:13.5px; font-weight:600; margin-bottom:22px}
.hero h1{font-size:clamp(34px,6vw,64px); line-height:1.08; margin:0 0 18px; font-weight:800; letter-spacing:-1px}
.hero .lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:640px; margin:0 auto 32px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.hero-bullets{margin-top:34px; display:flex; flex-wrap:wrap; gap:22px; justify-content:center; color:var(--muted-2); font-size:14px}

.section{padding:70px 0}
.section-alt{background:rgba(30,41,59,.3); border-block:1px solid var(--line)}
.section-title{text-align:center; margin-bottom:50px}
.section-title h2{font-size:clamp(26px,4vw,36px); margin:0 0 10px}
.section-title p{color:var(--muted); max-width:600px; margin:0 auto}
.feature-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.feature{background:var(--dark); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; transition:.18s}
.feature:hover{border-color:rgba(99,102,241,.5); transform:translateY(-3px)}
.feature .ico{width:48px;height:48px;border-radius:12px;background:rgba(99,102,241,.12);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.feature h3{font-size:18px; margin:0 0 8px}
.feature p{color:var(--muted); font-size:13.5px; margin:0}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative}
.step{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.step .num{width:60px;height:60px;border-radius:50%;background:var(--dark);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:var(--primary);box-shadow:0 0 18px rgba(99,102,241,.3)}
.landing-footer{padding:46px 0; border-top:1px solid var(--line); text-align:center; color:var(--muted-2); font-size:13.5px}

/* ============ Auth pages (login / register / forgot) ============ */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(60% 60% at 50% 0%,rgba(99,102,241,.16),transparent 70%),var(--dark)}
.auth-card{width:100%; max-width:430px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow)}
.auth-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:22px; text-align:center}
.auth-brand .logo{width:54px;height:54px;border-radius:16px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px}
.auth-brand h1{font-size:21px; margin:0}
.auth-brand p{color:var(--muted); font-size:13.5px; margin:0}
.auth-tabs{display:flex; background:var(--dark); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px; margin-bottom:20px}
.auth-tabs button{flex:1; background:none; border:none; color:var(--muted); padding:9px; border-radius:8px; font-weight:600; font-size:14px; transition:.15s}
.auth-tabs button.active{background:var(--grad); color:#fff}
.btn-google{width:100%; background:#fff; color:#1f2937; font-weight:600; gap:10px; border:none}
.btn-google:hover{background:#f1f5f9}
.divider-or{display:flex; align-items:center; gap:12px; color:var(--muted-2); font-size:12.5px; margin:18px 0}
.divider-or::before,.divider-or::after{content:''; flex:1; height:1px; background:var(--line)}
.auth-msg{padding:11px 13px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px; display:none}
.auth-msg.err{display:block; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); color:#fca5a5}
.auth-msg.ok{display:block; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.3); color:#86efac}
.auth-link{color:var(--primary); font-size:13.5px; background:none; border:none; padding:0}
.auth-link:hover{text-decoration:underline}
.otp-inputs{display:flex; gap:8px; justify-content:center; margin:8px 0 4px}
.otp-inputs input{width:46px; height:54px; text-align:center; font-size:22px; font-weight:700; background:var(--dark); border:1px solid var(--line-2); border-radius:var(--radius-sm); color:#fff}
.otp-inputs input:focus{border-color:var(--primary); outline:none}

/* ============ Responsive ============ */
@media (max-width: 960px){
  .studio-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr; gap:34px}
}
@media (max-width: 640px){
  .container{padding:0 13px}
  .app-header .container{height:58px}
  .brand h1{font-size:16px}
  .header-actions{gap:7px}
  .header-select{max-width:108px; padding:7px 8px}
  .user-pill .uname{display:none}
  .result-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .style-grid{grid-template-columns:repeat(3,1fr)}
  .row-2{flex-direction:column}
  .hero{padding:54px 0 80px}
  .auth-card{padding:24px 20px}
  .otp-inputs input{width:40px;height:48px;font-size:19px}
}
@media (max-width: 380px){
  .style-grid{grid-template-columns:repeat(2,1fr)}
  .otp-inputs input{width:34px;height:44px}
}