:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#1f2937;background:#f7f8fb;font-size:16px;
  --brand:#6734d1;--brand-dark:#5426b7;--ink:#202634;--muted:#6b7280;
  --line:#e5e7eb;--soft:#f3f4f7;--lavender:#f1edff;--danger:#dc2626
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:#f7f8fb}
button,input,textarea{font:inherit}
button{border:0;border-radius:7px;padding:.78rem 1rem;background:var(--ink);color:#fff;font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}
button:hover{background:#111827}
button:active{transform:translateY(1px)}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a98cff;outline-offset:2px}

.login{min-height:100vh;display:grid;grid-template-columns:minmax(380px,1.08fr) minmax(380px,.92fr);background:#fff}
.brand{position:relative;overflow:hidden;background:linear-gradient(145deg,#f7f5ff 0%,#ede7ff 100%);padding:3.5rem 7vw;display:flex;flex-direction:column;justify-content:space-between}
.brand::before,.brand::after{content:"";position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}
.brand::before{width:440px;height:440px;right:-210px;top:-190px;background:#c7b5ff66}
.brand::after{width:300px;height:300px;left:-170px;bottom:-140px;background:#7c4dff1f}
.brand>div{position:relative;z-index:1}
.brand-lockup{display:flex;align-items:center;gap:1rem}
.brand-logo{position:relative;display:block;width:250px;height:165px;overflow:hidden;flex:none}
.brand-logo>img:first-child{position:absolute;width:250px;height:250px;inset:-38px auto auto 0}
.phone-badge{position:absolute!important;width:48px!important;height:48px!important;inset:31px 29px auto auto!important;filter:drop-shadow(0 5px 10px #47209c38)}
.module-pill{display:inline-flex;align-items:center;border:1px solid #cfc2f7;background:#fff;color:#5630ad;border-radius:999px;padding:.45rem .75rem;font-size:.78rem;font-weight:800;white-space:nowrap}
.brand small,.title small,.module-name small{color:var(--brand);font-weight:800;letter-spacing:.1em}
.brand h1{color:var(--ink);font-size:clamp(2.7rem,5vw,5.2rem);line-height:1.01;letter-spacing:-.045em;margin:.75rem 0 1.1rem}
.brand p{max-width:610px;font-size:1.17rem;line-height:1.65;color:#5d6471;margin:0}
.card{margin:auto;width:min(430px,84%);display:grid;gap:1rem;background:#fff;padding:2.5rem;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 55px #20263414}
.card-mark{display:flex;align-items:center;gap:.65rem;color:var(--brand-dark);font-weight:800;font-size:.9rem}
.card-mark .module-icon{width:34px;height:34px;flex:none}
.card h2{margin:.4rem 0 0;font-size:1.8rem;letter-spacing:-.025em}
.card>p:not(.error){color:var(--muted);margin:0 0 .35rem}
label{display:grid;gap:.45rem;font-weight:700;color:#374151}
input,textarea{border:1px solid #d1d5db;border-radius:7px;padding:.85rem;background:#fff;color:var(--ink)}
input:hover,textarea:hover{border-color:#9ca3af}
textarea{min-height:110px;resize:vertical}
.card button{background:var(--brand);margin-top:.15rem}
.card button:hover{background:var(--brand-dark)}

header{min-height:80px;background:#fff;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:.55rem 4vw;border-bottom:1px solid var(--line);box-shadow:0 1px 3px #1118270a}
.app-brand{display:flex;align-items:center;gap:.8rem;min-width:0}
.brand-logo.compact{width:104px;height:61px}
.brand-logo.compact>img:first-child{width:104px;height:104px;inset:-17px auto auto 0}
.brand-logo.compact .phone-badge{width:25px!important;height:25px!important;inset:8px 9px auto auto!important}
.module-name{display:grid;gap:.15rem;line-height:1.15;white-space:nowrap}
.module-name small{font-size:.65rem}
.account-actions{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:wrap}
header #who{font-weight:600;color:#4b5563;margin-right:.35rem}
.plain,.secondary,nav button,.actions button:first-child{background:#fff;color:#374151;border:1px solid #d1d5db}
.plain:hover,.secondary:hover,.actions button:first-child:hover{background:var(--soft);border-color:#9ca3af}
header .plain{background:#fff;color:#283141;border-color:#cfd3db;box-shadow:0 1px 2px #1118270d}
header .plain:hover{background:#f3f4f7;border-color:#9ca3af}

.workspace{width:min(1180px,92%);margin:2.5rem auto}
.title,.toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.title h1{font-size:2.15rem;letter-spacing:-.035em;margin:.45rem 0;color:var(--ink)}
.title em{font-style:normal;background:var(--lavender);color:var(--brand-dark);border-radius:999px;padding:.2rem .65rem;font-size:1rem;vertical-align:middle}
#add,#addUser{background:var(--ink)}
nav{display:flex;gap:.25rem;margin:1.8rem 0 1rem;padding:.28rem;background:#eceef2;border-radius:9px;width:max-content;max-width:100%;overflow:auto}
nav button{border:0;background:transparent;color:#606875;padding:.62rem 1rem}
nav button:hover{background:#fff;color:var(--ink)}
nav button.active{background:var(--ink);color:#fff;box-shadow:0 1px 3px #1118272e}
.panel{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px #11182708}
.panel>h2{padding:1.15rem;margin:0;font-size:1.1rem}
.toolbar{padding:1rem;background:#fff}
.toolbar input{flex:1;background:#fafafa}
.row{display:grid;grid-template-columns:1fr 1.5fr 1fr auto;gap:1rem;padding:1rem;border-top:1px solid #eceef1;align-items:center}
.row:hover{background:#fafafa}
.row strong,.row span{display:block}
.row strong{color:#252c39}
.row span,.note{color:#4b5563}
.row small{font-weight:400;letter-spacing:0;color:#7b8492}
.row .actions{display:flex;gap:.5rem}
.row .actions button{padding:.5rem;background:#f1f2f5;color:#374151;border:0}
.row .actions button:hover{background:#e4e7ec}
.row .actions button:last-child{color:#b42318}
.row .actions button.danger{background:#fff1f0;color:#b42318}
.row .actions button.danger:hover{background:#fee4e2}
.empty{padding:4rem;text-align:center;color:#7b8492}
.notice{padding:1rem;margin-bottom:1rem;background:#fff7e6;color:#7a4b00;border:1px solid #fde5b3;border-radius:8px}
.error{color:#b42318;min-height:1.2em}
.foot{color:#7b8492;text-align:center;margin:2rem}
dialog{border:1px solid var(--line);border-radius:12px;width:min(500px,92%);padding:1.5rem;box-shadow:0 22px 75px #11182730}
dialog::backdrop{background:#11182770;backdrop-filter:blur(2px)}
dialog form{display:grid;gap:1rem}
dialog h2{margin:.1rem 0 .4rem}
.actions{display:flex;justify-content:flex-end;gap:.7rem}
.audit{padding:1rem;border-top:1px solid #eceef1}
.audit.user{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.audit .actions button{padding:.55rem;background:#f1f2f5;color:#374151}

@media(max-width:760px){
  .login{grid-template-columns:1fr}
  .brand{min-height:43vh;padding:1.8rem 1.5rem}
  .brand-lockup{gap:.45rem}
  .brand-logo{width:170px;height:112px}
  .brand-logo>img:first-child{width:170px;height:170px;inset:-26px auto auto 0}
  .phone-badge{width:36px!important;height:36px!important;inset:19px 17px auto auto!important}
  .module-pill{font-size:.67rem;padding:.35rem .55rem}
  .brand h1{font-size:2.55rem}
  .brand p{font-size:1rem}
  .card{margin:1.5rem auto;padding:1.6rem}
  .row{grid-template-columns:1fr auto}
  .row .note,.row .meta{display:none}
  .title{align-items:flex-end}
  .title h1{font-size:1.7rem}
  .toolbar{flex-wrap:wrap}
  .toolbar input{flex-basis:100%}
  header{padding:.55rem 1rem;align-items:flex-start}
  .brand-logo.compact{width:74px;height:47px}
  .brand-logo.compact>img:first-child{width:74px;height:74px;inset:-11px auto auto 0}
  .brand-logo.compact .phone-badge{width:20px!important;height:20px!important;inset:5px 5px auto auto!important}
  .module-name{white-space:normal;font-size:.9rem}
  .account-actions{gap:.4rem}
  header #who{width:100%;text-align:right;font-size:.82rem;margin:0}
  header .plain{padding:.55rem .65rem;font-size:.82rem}
  .audit.user{align-items:flex-start;flex-direction:column}
}