:root{
  --derma-ink:#211a38;
  --derma-muted:#6d667c;
  --derma-line:#e6e0ef;
  --derma-paper:#faf8fd;
  --derma-violet:#6c3bf1;
  --derma-pink:#e83f9f;
  --brand-blue:var(--derma-violet);
  --accent-green:#8b5cf6;
  --neutral-bg:var(--derma-paper);
  --neutral-text:var(--derma-ink);
  --muted-text:var(--derma-muted);
  --border-color:var(--derma-line);
}

body{background:radial-gradient(circle at 90% 0,rgba(108,59,241,.08),transparent 32rem),var(--derma-paper);color:var(--derma-ink)}
header{position:sticky;top:0;z-index:30;border-color:var(--derma-line);background:rgba(255,255,255,.94);backdrop-filter:blur(16px)}
.topbar{max-width:1180px;min-height:76px;height:auto;padding:10px 24px}
.brand-logo img{height:46px}
.topbar .welcome{color:var(--derma-muted)}
header nav{display:flex;align-items:center;gap:8px}
header nav button{margin:0;border-radius:12px;border-color:var(--derma-line);background:#fff;color:var(--derma-ink)}
header nav button:hover{border-color:var(--derma-violet);color:var(--derma-violet)}

main.wrap{align-items:stretch;max-width:1180px;margin:0 auto;padding:32px 24px 56px}
#client{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
#client.hidden{display:none}
#client .card{max-width:none;margin:0;padding:28px;border:1px solid var(--derma-line);border-radius:24px;box-shadow:0 18px 50px rgba(33,26,56,.07)}
#brand-card{background:linear-gradient(135deg,#fff 65%,#f2edff)}
#brand-card{padding:18px 22px;margin-bottom:18px}#brand-card .brand-header{margin-bottom:10px}#brand-card .brand-header h1{font-size:1.35rem}#brand-card .brand-content{grid-template-columns:160px 1fr;gap:20px;align-items:center}#brand-card .brand-logo-preview img{width:100px;height:76px}#brand-card .brand-logo-preview .hint{display:none}#brand-card .brand-details{flex-direction:row;align-items:center;gap:32px}
.wizard-option-btn{border:1.5px solid #c9b5f6!important;background:#fff!important;box-shadow:0 3px 10px rgba(73,43,126,.06)}.wizard-option-btn:hover{border-color:#7c3ff2!important;background:#faf7ff!important}.wizard-option-btn.selected{border-color:#7135ed!important;background:#f3edff!important;box-shadow:inset 0 0 0 1px #7135ed,0 5px 14px rgba(113,53,237,.12)}
.result-image-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.result-image-actions .btn{font-size:13px;padding:9px 12px;text-decoration:none}
.fiscal-profile-modal{max-width:560px}.fiscal-profile-modal label{display:grid;gap:7px;margin:14px 0}.fiscal-profile-modal input,.fiscal-profile-modal select{width:100%;min-height:44px;border:1px solid #d8ccff;border-radius:10px;padding:10px 12px;background:#fff}
.brand-header{align-items:center}
.brand-header h1,#wizard-title,#client .card h1{font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.035em;color:var(--derma-ink)}
.brand-content{gap:32px}
.brand-logo-preview img{border-radius:16px;border-color:#d8ccff;background:#fff}
.color-swatches span{box-shadow:0 4px 10px rgba(33,26,56,.12)}

.btn{min-height:44px;border-radius:12px;background:linear-gradient(120deg,var(--derma-violet),var(--derma-pink));box-shadow:0 7px 18px rgba(108,59,241,.18)}
.btn.secondary,.btn.ghost{background:#fff;color:var(--derma-ink);border:1px solid var(--derma-line);box-shadow:none}
.btn.secondary:hover,.btn.ghost:hover{border-color:var(--derma-violet);color:var(--derma-violet)}
.pill{min-height:38px;border-color:#cdbfff;background:#f2edff;color:#5a30c8}
.kpi{flex-wrap:wrap;justify-content:flex-end}
.subscription-summary{width:100%;border:0;background:#f7f4fc;border-radius:14px;padding:12px 14px}

.wizard-header{margin-top:22px;border-top:1px solid var(--derma-line);padding-top:18px}
#wizard-step-indicator{color:var(--derma-violet);text-transform:uppercase;letter-spacing:.07em;font-size:12px}
#wizard-content{min-height:260px}
#wizard-content h2{font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.025em}
.wizard-options{gap:12px}
.wizard-option-btn{min-height:104px;padding:18px;border:1px solid var(--derma-line);border-radius:16px;background:#fff;text-align:left;align-items:flex-start;box-shadow:none}
.wizard-option-btn:hover,.wizard-option-btn.selected{transform:none;border-color:var(--derma-violet);background:#f7f3ff;color:var(--derma-ink);box-shadow:inset 0 0 0 1px var(--derma-violet)}
.wizard-summary{background:#f7f4fc;border-color:var(--derma-line);border-radius:14px}
#wizard-nav{position:sticky;bottom:10px;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);padding:12px;border:1px solid var(--derma-line);border-radius:16px}

.library-table{border-collapse:separate;border-spacing:0 10px}
.library-table thead{color:var(--derma-muted)}
.library-table tbody tr{background:#fff;box-shadow:0 4px 18px rgba(33,26,56,.06)}
.library-table td{border-top:1px solid var(--derma-line);border-bottom:1px solid var(--derma-line);padding:14px}
.library-table td:first-child{border-left:1px solid var(--derma-line);border-radius:14px 0 0 14px}
.library-table td:last-child{border-right:1px solid var(--derma-line);border-radius:0 14px 14px 0}
.library-thumb{border-radius:12px}

.modal-overlay{padding:18px;background:rgba(26,18,48,.64);backdrop-filter:blur(5px)}
.modal-content.card{max-height:92vh;overflow:auto;border-radius:24px}
input,select,textarea,input:not([type=file]){border:1px solid var(--derma-line);border-radius:11px;padding:12px;background:#fff}
input:not([type=file]):focus,input:focus,select:focus,textarea:focus{border-color:var(--derma-violet);box-shadow:0 0 0 3px rgba(108,59,241,.12)}
footer{color:var(--derma-muted)}
.admin-operations-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.admin-operation-card{border:1px solid var(--derma-line);border-radius:16px;padding:18px;background:#fff}
.admin-operation-card h3{margin:0 0 12px}
.admin-operation-card>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--derma-line)}
.admin-operation-card>div:last-child{border-bottom:0}
.admin-alert{margin:8px 0;padding:10px 12px;border-radius:10px;font-size:13px}
.admin-alert-warning{background:#fff4df;color:#855400}.admin-alert-info{background:#eef3ff;color:#31569c}.admin-alert-neutral{background:#f2f0f5;color:#625c6d}.admin-alert-ok{background:#eaf8f2;color:#17644f}

@media(max-width:700px){
  .topbar{padding:8px 14px;gap:8px;flex-wrap:wrap}
  .brand-logo img{height:38px}
  .topbar .welcome{order:3;width:100%;text-align:center;font-size:13px}
  header nav{margin-left:auto;overflow-x:auto;max-width:65vw}
  header nav button{min-height:44px;white-space:nowrap;padding:8px 12px}
  input,select,textarea{font-size:16px!important}
  .btn{min-height:44px}
  #btn-refresh-credits{min-width:44px}
  main.wrap{padding:18px 12px 40px}
  #client{gap:16px}
  #client .card{padding:20px 16px;border-radius:20px}
  .brand-content{grid-template-columns:1fr;gap:20px}
  #view-signup .row2,#view-signup .row3{grid-template-columns:1fr}
  #view-signup .row2>div,#view-signup .row3>div{grid-column:auto!important}
  .brand-logo-preview{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
  .brand-logo-preview label,.brand-logo-preview .hint{grid-column:1/-1}
  .brand-logo-preview img{width:110px;height:92px;object-fit:contain}
  .kpi{justify-content:flex-start;width:100%}
  .kpi .btn{flex:1 1 145px;padding:9px 10px!important}
  .wizard-options{grid-template-columns:1fr}
  .wizard-option-btn{min-height:78px;padding:14px}
  #wizard-nav{bottom:8px;margin-left:-4px;margin-right:-4px}
  .library-table,.library-table tbody,.library-table tr,.library-table td{display:block;width:100%}
  .library-table thead{display:none}
  .library-table tbody tr{margin-bottom:14px;border:1px solid var(--derma-line);border-radius:16px;overflow:hidden}
  .library-table td,.library-table td:first-child,.library-table td:last-child{border:0;border-bottom:1px solid var(--derma-line);border-radius:0;padding:12px}
  .library-table td:last-child{border-bottom:0}
  .library-thumb{width:100%;height:auto;max-height:280px;object-fit:cover}
  .modal-content.card{padding:20px 16px}
  #user-detail-info{grid-template-columns:1fr!important}
  .admin-operations-grid{grid-template-columns:1fr}
  #admin .card{max-width:100%;overflow-x:auto}
  #admin .brand-header{align-items:flex-start;flex-direction:column}
  #admin .brand-header>.actions{width:100%;flex-wrap:wrap}
  #admin .brand-header select,#admin .brand-header .btn{max-width:100%}
  #admin .prompt-template{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
}