:root{
  --agency-primary:#0f766e;
  --agency-accent:#14b8a6;
  --agency-ink:#172033;
  --agency-muted:#64748b;
  --agency-line:#dbe7e5;
  --agency-soft:#effcf8;
  --agency-danger:#b91c1c;
}

*{box-sizing:border-box}
body{margin:0;color:var(--agency-ink);background:#f5fbfa;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,textarea,select{font:inherit}
.agency-auth-page .account-card{max-width:1120px}
.agency-auth-page .account-intro{background:linear-gradient(145deg,rgba(15,118,110,.97),rgba(20,184,166,.88)),url('/agency/assets/img/logo-aibeauty.jpg') center/cover}
.agency-auth-page .account-intro:before{background:rgba(255,255,255,.12)}
.auth-badge{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:8px 13px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.auth-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 20px;font-size:14px}
.auth-links a,.inline-link{color:var(--agency-primary);font-weight:750;text-decoration:none}
.auth-links a:hover,.inline-link:hover{text-decoration:underline}
.field-help{display:block;margin-top:7px;color:var(--agency-muted);font-size:12px;line-height:1.5}
.password-wrap{position:relative}
.password-wrap input{padding-right:72px}
.password-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--agency-primary);font-size:12px;font-weight:800;cursor:pointer}
.submit-btn[disabled]{opacity:.65;cursor:wait;transform:none}
.message{white-space:pre-line}
.message.info{display:block;color:#075985;background:#e0f2fe;border:1px solid #bae6fd}
.agency-auth-page input[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.12);background:#fffafa}
.form-actions-note{margin:18px 0 0;text-align:center;color:var(--agency-muted);font-size:14px}
.consent{display:flex;align-items:flex-start;gap:10px;margin:6px 0 20px;color:#475569;font-size:13px;line-height:1.55}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--agency-primary)}
.register-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.register-grid .full{grid-column:1/-1}
.otp-stage[hidden]{display:none!important}
.otp-heading{margin:0 0 8px;font-size:24px}
.otp-description{margin:0 0 24px;color:var(--agency-muted);line-height:1.65}
.otp-code{letter-spacing:.42em;text-align:center;font-size:24px;font-weight:800}
.countdown{min-height:22px;margin:8px 0 14px;color:var(--agency-primary);font-size:13px;font-weight:750;text-align:center}

.agency-shell{min-height:100vh;background:linear-gradient(135deg,#f7fffc,#eef7f5)}
.agency-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:22px;height:74px;padding:0 clamp(18px,4vw,52px);background:rgba(255,255,255,.94);border-bottom:1px solid var(--agency-line);backdrop-filter:blur(14px)}
.agency-brand{display:flex;align-items:center;gap:12px;color:var(--agency-ink);font-weight:850;text-decoration:none}
.agency-brand img{width:42px;height:42px;border-radius:12px;object-fit:contain}
.agency-brand small{display:block;color:var(--agency-primary);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.agency-user{display:flex;align-items:center;gap:12px}
.agency-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:white;background:linear-gradient(135deg,var(--agency-primary),var(--agency-accent));font-weight:850}
.agency-avatar-img{object-fit:cover}
.agency-user-copy{line-height:1.3}
.agency-user-copy strong,.agency-user-copy span{display:block}
.agency-user-copy span{color:var(--agency-muted);font-size:12px}
.agency-logout{padding:9px 13px;border:1px solid var(--agency-line);border-radius:10px;background:white;color:#475569;font-weight:750;cursor:pointer}
.agency-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;max-width:1280px;margin:auto;padding:32px clamp(18px,4vw,52px) 60px}
.agency-sidebar{align-self:start;position:sticky;top:106px;padding:16px;background:white;border:1px solid var(--agency-line);border-radius:20px;box-shadow:0 14px 35px rgba(15,23,42,.05)}
.agency-sidebar a{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;color:#475569;font-weight:750;text-decoration:none}
.agency-sidebar a.active{color:var(--agency-primary);background:var(--agency-soft)}
.agency-sidebar-note{margin:16px 5px 2px;padding-top:14px;border-top:1px solid var(--agency-line);color:var(--agency-muted);font-size:12px;line-height:1.6}
.agency-content{min-width:0}
.agency-welcome{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:22px}
.agency-welcome h1{margin:0 0 6px;font-size:clamp(26px,4vw,36px)}
.agency-welcome p{margin:0;color:var(--agency-muted)}
.status-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#fff7ed;color:#c2410c;font-size:12px;font-weight:800}
.status-pill.active{background:#ecfdf5;color:#047857}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.summary-card,.profile-card{background:white;border:1px solid var(--agency-line);border-radius:20px;box-shadow:0 14px 35px rgba(15,23,42,.045)}
.summary-card{padding:20px}
.summary-card span{display:block;margin-bottom:8px;color:var(--agency-muted);font-size:12px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
.summary-card strong{font-size:20px;word-break:break-word}
.profile-card{padding:26px;margin-bottom:20px}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.card-heading h2{margin:0;font-size:20px}
.card-heading p{margin:5px 0 0;color:var(--agency-muted);font-size:13px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.profile-grid .full{grid-column:1/-1}
.profile-field label{display:block;margin-bottom:7px;color:#334155;font-size:13px;font-weight:750}
.profile-field input,.profile-field textarea{width:100%;padding:12px 13px;border:1px solid #d5e2e0;border-radius:11px;background:#fbfefd;color:var(--agency-ink);outline:none}
.profile-field input:focus,.profile-field textarea:focus{border-color:var(--agency-accent);box-shadow:0 0 0 3px rgba(20,184,166,.12)}
.profile-field input[readonly]{background:#f1f5f4;color:#64748b}
.profile-save{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:20px}
.profile-save .submit-btn{width:auto;min-width:150px}
.avatar-form{display:flex;align-items:center;gap:18px;margin:0 0 24px;padding:16px;border:1px dashed var(--agency-line);border-radius:16px;background:#fbfefd}
.avatar-preview{display:grid;place-items:center;width:104px;height:104px;border-radius:18px;object-fit:cover;color:white;background:linear-gradient(135deg,var(--agency-primary),var(--agency-accent));font-size:36px;font-weight:850}
.avatar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.avatar-actions input[type=file]{display:none}
.avatar-upload-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--agency-line);border-radius:10px;background:white;color:var(--agency-primary);font-weight:800;cursor:pointer}
.avatar-actions .submit-btn{width:auto;min-width:110px}
.contract-table-wrap{overflow:auto}
.contract-table{width:100%;border-collapse:collapse;font-size:14px}
.contract-table th,.contract-table td{padding:13px 12px;border-bottom:1px solid #e8efee;text-align:left;white-space:nowrap}
.contract-table small{color:var(--agency-muted)}
.contract-table th{color:var(--agency-muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.empty-state{padding:30px;text-align:center;color:var(--agency-muted)}

@media(max-width:850px){
  .register-grid,.profile-grid{grid-template-columns:1fr}
  .register-grid .full,.profile-grid .full{grid-column:auto}
  .agency-layout{grid-template-columns:1fr;padding-top:20px}
  .agency-sidebar{position:static;display:flex;overflow:auto}
  .agency-sidebar-note{display:none}
  .summary-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .agency-user-copy{display:none}
  .agency-brand span{display:none}
  .agency-auth-page .form-side{padding:28px 20px}
  .agency-welcome{align-items:flex-start;flex-direction:column}
  .profile-card{padding:20px 16px}
  .avatar-form{align-items:flex-start;flex-direction:column}
}