/* ===== Buttons ===== */
.btn{--bg:var(--c-raised);--fg:var(--c-text);--bd:var(--c-border-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--control-h);padding:0 var(--sp-5);border-radius:var(--r-md);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);line-height:1;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  box-shadow:var(--hl),var(--shadow-1);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.btn:hover{text-decoration:none;border-color:var(--c-text-faint)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-primary{--bg:var(--c-primary);--fg:var(--c-on-primary);--bd:var(--c-primary);
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%)}
.btn-primary:hover{--bg:var(--c-primary-hover);border-color:var(--c-primary-hover)}
.btn-primary:active{--bg:var(--c-primary-active)}
.btn-secondary{--bg:var(--c-secondary);--fg:var(--c-on-secondary);--bd:var(--c-secondary);
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 55%)}
.btn-secondary:hover{--bg:var(--c-secondary-hover);border-color:var(--c-secondary-hover)}
.btn-secondary:active{--bg:var(--c-secondary-active)}
.btn-ghost{--bg:transparent;--bd:transparent;box-shadow:none}
.btn-ghost:hover{--bg:rgba(237,230,218,.06);border-color:transparent}
.btn-danger{--bg:var(--c-danger-bg);--fg:var(--c-danger);--bd:var(--c-danger-border)}
.btn-danger:hover{border-color:var(--c-danger)}
.btn-sm{min-height:var(--control-h-sm);padding:0 var(--sp-4);font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-block{width:100%}
.btn-icon{padding:0;width:var(--control-h-sm);min-height:var(--control-h-sm)}
.btn[aria-busy="true"]{pointer-events:none;position:relative}
.btn[aria-busy="true"]::after{content:"";width:1.05em;height:1.05em;border-radius:50%;
  border:2px solid currentColor;border-inline-end-color:transparent;animation:mf-spin .7s linear infinite}

/* ===== Spinner ===== */
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--c-border-strong);border-top-color:var(--c-primary);animation:mf-spin .8s linear infinite}
@keyframes mf-spin{to{transform:rotate(360deg)}}

/* ===== Form fields ===== */
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.label{font-size:var(--fs-sm);font-weight:500;color:var(--c-text-muted)}
.input{width:100%;min-height:var(--control-h);padding:0 var(--sp-4);
  background:rgba(10,7,6,.45);color:var(--c-text);
  border:1px solid var(--c-border-strong);border-radius:var(--r-md);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.input::placeholder{color:var(--c-text-faint)}
.input:hover{border-color:var(--c-text-faint)}
.input:focus{border-color:var(--c-primary);box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 3px var(--c-focus);background:rgba(10,7,6,.6)}
.input[aria-invalid="true"]{border-color:var(--c-danger)}
.input[aria-invalid="true"]:focus{box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 0 3px rgba(229,128,116,.4)}
.input[disabled]{opacity:.55;cursor:not-allowed}
.input-wrap{position:relative}
.input-wrap .input{padding-inline-end:calc(var(--control-h) + var(--sp-1))}
.input-toggle{position:absolute;inset-block:0;inset-inline-end:0;width:var(--control-h);
  display:flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;
  color:var(--c-text-muted);border-radius:var(--r-md)}
.input-toggle:hover{color:var(--c-text)}
.input-toggle svg{width:20px;height:20px}
.hint{font-size:var(--fs-xs);color:var(--c-text-faint);margin:0}
.error-text{font-size:var(--fs-sm);color:var(--c-danger);margin:0;min-height:0}
.error-text:empty{display:none}

/* password strength meter (informational; the server enforces the real policy) */
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1)}
.meter i{height:4px;border-radius:var(--r-pill);background:var(--c-border-strong);transition:background var(--t-base) var(--ease)}
.meter[data-level="1"] i:nth-child(-n+1){background:var(--c-danger)}
.meter[data-level="2"] i:nth-child(-n+2){background:var(--c-warning)}
.meter[data-level="3"] i:nth-child(-n+3){background:var(--c-info)}
.meter[data-level="4"] i{background:var(--c-success)}

/* ===== Card ===== */
.card{position:relative;background:linear-gradient(180deg,#241D18,var(--c-surface) 40%,#1B1511);
  border:1px solid var(--c-border);border-radius:var(--r-xl);box-shadow:var(--hl),var(--shadow-2);padding:var(--sp-6)}
.card::before{content:"";position:absolute;inset-inline:var(--sp-6);top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(95,179,166,.6),rgba(194,122,78,.6),transparent)}
.card-flat{box-shadow:var(--hl),var(--shadow-1);padding:var(--sp-5)}
.card-narrow{max-width:520px}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.card-title h2,.card-title h3{margin:0}
@media (max-width:520px){.card{padding:var(--sp-5);border-radius:var(--r-lg)}}

/* ===== Alert ===== */
.alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);border:1px solid var(--c-border-strong);background:var(--c-raised);font-size:var(--fs-sm)}
.alert[role]{margin:0}
.alert-error{background:var(--c-danger-bg);border-color:var(--c-danger-border);color:#F3C9C4}
.alert-warning{background:var(--c-warning-bg);border-color:#6B5424;color:#F0DDB0}
.alert-success{background:var(--c-success-bg);border-color:#2F5A45;color:#C6EAD7}
.alert-info{background:var(--c-info-bg);border-color:#2F4B63;color:#CFE3F2}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:2px var(--sp-3);border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;line-height:1.6;border:1px solid var(--c-border-strong);background:var(--c-raised);color:var(--c-text-muted)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge-role{--rc:var(--c-text-muted);color:var(--rc);border-color:color-mix(in srgb,var(--rc) 45%,transparent);background:color-mix(in srgb,var(--rc) 12%,transparent)}
.badge-role[data-role="super_owner"]{--rc:var(--role-super-owner)}
.badge-role[data-role="owner"]{--rc:var(--role-owner)}
.badge-role[data-role="super_master"]{--rc:var(--role-super-master)}
.badge-role[data-role="master"]{--rc:var(--role-master)}
.badge-role[data-role="cashier"]{--rc:var(--role-cashier)}
.badge-role[data-role="player"]{--rc:var(--role-player)}
.badge-active{color:var(--c-success)} .badge-pending{color:var(--c-warning)}
.badge-frozen,.badge-suspended{color:var(--c-info)} .badge-deleted{color:var(--c-danger)}

/* ===== Avatar ===== */
.avatar{--s:44px;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(135deg,var(--c-raised),var(--c-surface));border:2px solid var(--c-border-strong);
  box-shadow:var(--hl),var(--shadow-1);font-family:var(--font-display);font-weight:700;color:var(--c-secondary);font-size:calc(var(--s)*.4)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{--s:72px}

/* ===== Language switch ===== */
.lang-switch{display:inline-flex;padding:3px;border-radius:var(--r-pill);background:rgba(10,7,6,.45);border:1px solid var(--c-border-strong)}
.lang-switch button{min-width:44px;min-height:32px;padding:0 var(--sp-3);border:0;border-radius:var(--r-pill);background:transparent;
  color:var(--c-text-muted);font-weight:600;font-size:var(--fs-sm);cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.lang-switch button[aria-pressed="true"]{background:var(--c-primary);color:var(--c-on-primary)}

/* ===== List / menu ===== */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.list-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);color:var(--c-text);
  transition:background var(--t-fast) var(--ease)}
.list-item:hover{background:rgba(237,230,218,.05);text-decoration:none}
.list-item[aria-current="true"]{background:rgba(95,179,166,.12);color:var(--c-primary)}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--sp-2) var(--sp-5);margin:0}
.kv dt{color:var(--c-text-faint);font-size:var(--fs-sm)} .kv dd{margin:0;overflow-wrap:anywhere}
.divider{height:1px;border:0;background:var(--c-border);margin:var(--sp-4) 0}

/* ===== Modal (<dialog>) ===== */
dialog.modal{width:min(480px,calc(100vw - 2rem));padding:var(--sp-6);color:var(--c-text);
  background:linear-gradient(180deg,#241D18,var(--c-surface));border:1px solid var(--c-border-strong);border-radius:var(--r-xl);box-shadow:var(--hl),var(--shadow-3)}
dialog.modal::backdrop{background:var(--c-overlay);backdrop-filter:blur(3px)}
.modal-actions{display:flex;justify-content:flex-end;gap:var(--sp-3);margin-top:var(--sp-5)}

/* ===== Toast ===== */
.toasts{position:fixed;inset-inline:0;bottom:var(--sp-4);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);pointer-events:none;padding-inline:var(--sp-3)}
.toast{pointer-events:auto;max-width:min(440px,100%);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--c-raised);
  border:1px solid var(--c-border-strong);box-shadow:var(--hl),var(--shadow-2);font-size:var(--fs-sm);animation:mf-toast-in var(--t-base) var(--ease)}
.toast-error{border-color:var(--c-danger-border);color:#F3C9C4} .toast-success{border-color:#2F5A45;color:#C6EAD7}
@keyframes mf-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Skeleton / empty ===== */
.empty{padding:var(--sp-7) var(--sp-4);text-align:center;color:var(--c-text-muted)}
.center-screen{min-height:60vh;display:grid;place-items:center}

/* --- 3B: two-step verification --- */
.input-code{text-align:center;letter-spacing:.35em;font-family:var(--font-mono);font-size:var(--fs-lg)}
.qr{inline-size:min(220px,100%);margin-inline:auto;background:#fff;border-radius:var(--r-md);overflow:hidden}
.qr svg{display:block;inline-size:100%;block-size:auto}
.secret{display:block;padding:var(--sp-3);background:rgba(10,7,6,.45);border:1px solid var(--c-border-strong);border-radius:var(--r-md);word-break:break-all;user-select:all;text-align:center;font-size:var(--fs-sm)}
.check{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer}
.check input{inline-size:18px;block-size:18px;accent-color:var(--c-primary)}