:root{
  --bg:#0f1115;--bg2:#0a0c10;--panel:#171a21;--panel2:#1e222b;--panel3:#242935;
  --line:#2a2f3a;--line2:#343a47;--text:#e6e9ef;--muted:#9aa3b2;--dim:#6b7484;
  --accent:#8b5cf6;--accent2:#3b82f6;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--blue:#3b82f6;
  --shadow:0 4px 14px rgba(0,0,0,.18);--radius:12px;
}
html[data-theme="light"]{
  --bg:#f3f5f9;--bg2:#e9ecf3;--panel:#ffffff;--panel2:#f4f6fb;--panel3:#eef1f8;
  --line:#e1e5ef;--line2:#d4dae7;--text:#1b2130;--muted:#5b6577;--dim:#8a94a8;
  --accent:#5b21b6;--accent2:#2563eb;--green:#15803d;--red:#dc2626;--amber:#b45309;--blue:#1d4ed8;
  --shadow:0 4px 14px rgba(30,40,80,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;transition:background .2s,color .2s}
.hidden{display:none!important}
a{color:var(--accent2);text-decoration:none}
code{background:var(--panel3);padding:2px 6px;border-radius:4px;font-size:.85em}
.small{font-size:12px}

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 500px at 50% -10%,var(--accent) 0,transparent 55%),var(--bg)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:36px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.brand{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:24px}
.brand span{color:var(--accent)}
.brand.small{font-size:18px;margin:0 16px 22px}
.login-card form{display:flex;flex-direction:column;gap:14px}
.login-card label,.field label{font-size:12px;color:var(--muted);font-weight:600}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:10px 12px;font-size:14px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
button{background:var(--accent);color:#fff;border:none;border-radius:9px;padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 20%,transparent);transition:filter .15s,transform .05s,box-shadow .15s}
button:hover{filter:brightness(1.06);box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 26%,transparent)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
button.ghost:hover{color:var(--text);border-color:var(--line2)}
button.sm{padding:6px 10px;font-size:12px;border-radius:7px}
button.green{background:var(--green);color:#fff}
html[data-theme="light"] button.green{color:#fff}
button.red{background:var(--red)}
button.amber{background:var(--amber);color:#3a2a00}
html[data-theme="light"] button.amber{color:#3a2a00}
button.blue{background:var(--blue)}
.error{color:var(--red);font-size:13px;min-height:18px}
.field{display:flex;flex-direction:column;gap:6px}

/* Layout */
.app{display:flex;min-height:100vh}
.sidebar{width:224px;background:var(--panel);border-right:1px solid var(--line);padding:20px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:0 12px;flex:1;overflow:auto}
.sidebar nav a{padding:10px 14px;border-radius:9px;color:var(--muted);font-weight:500;display:flex;align-items:center;gap:9px}
.sidebar nav a:hover{background:var(--panel2);color:var(--text)}
.sidebar nav a.active{background:var(--accent);color:#fff}
.sidebar nav a .ic{opacity:.85;font-size:15px}
.sidebar-footer{padding:14px 16px;border-top:1px solid var(--line)}
.api-hint{font-size:11px;color:var(--muted);margin-bottom:10px;word-break:break-all}
.row-actions{display:flex;gap:8px}
.row-actions button{flex:1}
.content{flex:1;padding:30px 36px;overflow:auto;background:var(--bg)}
.view{display:none}
.view.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
h1{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
h2{font-size:18px;margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 24px}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 1px 0 var(--line) inset}
.card .n{font-size:28px;font-weight:800;letter-spacing:-.02em}
.card .l{color:var(--muted);font-size:12px;margin-top:3px}
.card.accent .n{color:var(--accent2)}
.card.green .n{color:var(--green)}
.card.amber .n{color:var(--amber)}
.card.red .n{color:var(--red)}
.card.blue .n{color:var(--blue)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px;box-shadow:0 1px 0 var(--line) inset}
.panel .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Toolbar / filters */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input[type=text],.toolbar select{width:auto;min-width:130px}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.premium{background:color-mix(in srgb,var(--amber) 16%,transparent);color:var(--amber)}
.chip.free{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}
.chip.paused{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.chip.removed{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.chip.verified{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.chip.unverified{background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted)}
.chip.frozen{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.chip.superadmin{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.chip.support{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.chip.on{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.chip.off{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700}
.badge.on{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.badge.off{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}

/* Table */
.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:0 1px 0 var(--line) inset}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:var(--panel2)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--panel2)}
.clickable{cursor:pointer}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.pager{display:flex;gap:8px;align-items:center;margin-top:14px}
.pager button{width:auto;padding:7px 12px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(8,10,16,.6);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:50;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;width:100%;max-width:780px;padding:26px;box-shadow:var(--shadow)}
.modal h2{margin-top:0}
.modal .close{float:right;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.action-group{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.action-group h3{font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.action-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
.mt{margin-top:16px}
.textarea{min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;resize:vertical}

/* User modal header + info grid */
.modal-header{display:flex;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.avatar{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;flex-shrink:0}
.modal-id{min-width:0}
.modal-name{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.modal-sub{color:var(--muted);font-size:13px;margin:2px 0 8px;word-break:break-all}
.modal-chips{display:flex;gap:6px;flex-wrap:wrap}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 18px}
.info-item{min-width:0}
.info-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
.info-value{font-size:14px;font-weight:600;word-break:break-word}
.action-group{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.action-group h3{font-size:12px;margin:0 0 12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.action-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:var(--panel2);border:1px solid var(--line);padding:14px 18px;border-radius:10px;z-index:100;max-width:400px;box-shadow:var(--shadow);font-size:13.5px}
.toast.ok{border-color:var(--green)}
.toast.err{border-color:var(--red)}

/* Settings */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.setting-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.setting-card h4{margin:0 0 14px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}

.saved-note{color:var(--green);font-size:13px;min-height:18px}

/* Toggle switch (settings) */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--line2);border-radius:999px;transition:.2s}
.switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(20px)}


/* Bar chart (analytics) */
.bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin-top:12px}
.bars .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.bars .bar{width:100%;background:var(--accent);border-radius:6px 6px 0 0;min-height:2px;transition:height .4s}
.bars .bar-label{font-size:11px;color:var(--muted)}

@media (max-width:820px){
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px;gap:8px}
  .sidebar nav{flex-direction:row;overflow:auto}
  .sidebar .brand{display:none}
  .sidebar-footer{border-top:none}
  .app{flex-direction:column}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .content{padding:20px}
}


/* ── Improved button system ── */
.action-row button,
.btn-group button {
  flex: 0 1 auto;
  min-width: 88px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  white-space: nowrap;
}
.action-row {
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Button rows that wrap nicely on smaller screens */
.btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.btn-wrap button {
  flex: 1 1 120px;
  min-width: 110px;
}

/* Premium action buttons — color-coded with clear separation */
.premium-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.premium-actions button {
  flex: 1 1 130px;
  min-width: 110px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.premium-actions button .ic {
  font-size: 14px;
  opacity: .9;
}

/* Status chip improvements */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}
.chip.archived {
  background: var(--panel3);
  color: var(--dim);
  border: 1px solid var(--line);
}
.chip.frozen {
  background: color-mix(in srgb, var(--red) 18%, transparent);
  color: var(--red);
}
.chip.verified {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}
.chip.unverified {
  background: var(--panel3);
  color: var(--dim);
}
.chip.on {
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
}
.chip.off {
  background: color-mix(in srgb, var(--red) 15%, transparent);
  color: var(--red);
}
.chip.premium {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.chip.paused {
  background: color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--amber);
}
.chip.removed {
  background: color-mix(in srgb, var(--red) 18%, transparent);
  color: var(--red);
}

/* ── User modal redesign ── */
.modal {
  max-width: 720px;
  padding: 0;
  overflow: hidden;
}
.modal > div:first-child,
.modal > button.close {
  /* keep close button */
}
.modal .close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.modal .close:hover {
  color: var(--text);
  border-color: var(--line2);
}

/* Modal body padding wrapper */
.modal-body {
  padding: 26px 28px 28px;
}
.modal-header {
  padding: 24px 28px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2) 0%, var(--panel) 100%);
  margin-bottom: 0;
}
.modal-header .avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 20px;
}
.modal-name {
  font-size: 19px;
}
.modal-sub {
  margin: 3px 0 10px;
}

/* Section cards inside modal */
.action-group {
  margin-top: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.action-group:first-of-type {
  border-top: none;
  padding-top: 20px;
}
.action-group h3 {
  font-size: 11px;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.action-group .help-text {
  font-size: 12px;
  color: var(--dim);
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Info grid refinement */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px 20px;
}
.info-label {
  font-size: 10px;
  letter-spacing: .05em;
}
.info-value {
  font-size: 13px;
}

/* Token controls row */
.token-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: stretch;
}
.token-row input[type=number] {
  width: 90px;
  flex: 0 0 90px;
}
.token-row input[type=text] {
  flex: 1 1 160px;
  min-width: 140px;
}
.token-row button {
  flex: 0 0 auto;
  min-width: 80px;
}

/* Account status row */
.status-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.status-row button {
  flex: 1 1 140px;
  min-width: 120px;
}

/* Plan tier select */
.tier-select {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.tier-select label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.tier-select select {
  width: 120px;
  flex: 0 0 120px;
}

/* ── Settings redesign ── */
.settings-grid {
  gap: 18px;
}
.setting-card {
  padding: 20px 22px;
  border-radius: 14px;
}
.setting-card h4 {
  font-size: 11px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.setting-card .field {
  padding: 8px 0;
}

/* ── Admin modal avatar ── */
.admin-avatar {
  background: linear-gradient(135deg, var(--blue), var(--accent));
  font-size: 22px;
}
.admin-modal {
  max-width: 560px;
}

/* ── Email preview modal ── */
.preview-modal {
  display: flex;
  flex-direction: column;
  max-width: 940px;
  max-height: calc(100vh - 56px);
  padding: 0;
  overflow: hidden;
}
.preview-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
}
.preview-header-id {
  min-width: 0;
  flex: 1;
}
.preview-subject {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: 7px;
}
.preview-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.preview-meta strong {
  color: var(--text);
  font-weight: 700;
}
.preview-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 10px 18px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel3);
}
.preview-toggle button {
  width: auto;
  min-width: 72px;
  padding: 7px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.preview-toggle button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
.preview-note {
  font-size: 11.5px;
  color: var(--muted);
  text-align: right;
}
.preview-body {
  flex: 1;
  min-height: 0;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at 18% 12%, rgba(124, 58, 237, .09), transparent 34%),
    var(--panel2);
}
.preview-device {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .07);
  transition: max-width .2s ease;
}
.preview-device.mobile {
  width: 390px;
  max-width: 100%;
}
.preview-frame {
  width: 100%;
  height: min(680px, calc(100vh - 310px));
  border: 0;
  display: block;
  background: #fff;
}
.preview-text-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: auto;
  max-height: min(680px, calc(100vh - 310px));
  background: #fff;
}
.preview-pre {
  margin: 0;
  padding: 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: #172033;
}

@media (max-width: 740px) {
  .preview-modal {
    max-width: 100%;
    border-radius: 14px;
  }
  .preview-header,
  .preview-toolbar,
  .preview-body {
    padding-left: 16px;
    padding-right: 16px;
  }
  .preview-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .preview-toggle {
    width: 100%;
    justify-content: center;
  }
  .preview-toggle button {
    flex: 1;
  }
}

/* ── Audit log detail ── */
.audit-detail {
  font-size: 12px;
  color: var(--muted);
  max-width: 320px;
}
.detail-line {
  line-height: 1.5;
  padding: 1px 0;
}
.detail-line + .detail-line {
  border-top: 1px solid var(--line);
  margin-top: 3px;
  padding-top: 4px;
}

/* ── PayPal subscription plan IDs ── */
.paypal-plans-panel {
  max-width: 820px;
  padding: 18px 20px;
}
.paypal-plan-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.paypal-plan-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  min-width: 0;
}
.paypal-plan-row + .paypal-plan-row {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.paypal-plan-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.paypal-plan-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.paypal-plan-input {
  width: 100%;
  max-width: none;
  flex: initial;
  min-width: 0;
  padding: 9px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  .paypal-plan-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ── Settings field redesign ── */
.setting-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.setting-field:last-child {
  border-bottom: none;
}
.setting-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
  letter-spacing: .01em;
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
  line-height: 1.4;
}
.toggle-field .setting-label {
  flex: 1;
}
.setting-input {
  flex: 0 0 120px;
  width: 120px;
  max-width: 120px;
  flex-shrink: 0;
}
.text-field .setting-input {
  flex: 0 0 120px;
  max-width: 120px;
}

/* ── User activity timeline ── */
.activity-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.activity-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
}
.act-item {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  align-items: flex-start;
  transition: background .15s;
}
.act-item:hover {
  background: var(--panel2);
}
.act-item + .act-item {
  border-top: 1px solid var(--line);
}
.act-icon {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.act-body {
  flex: 1;
  min-width: 0;
}
.act-desc {
  font-size: 13px;
  line-height: 1.4;
}
.act-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-right: 2px;
}
.act-time {
  margin-top: 2px;
}
.act-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}
.act-meta-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--panel3);
  color: var(--muted);
  border: 1px solid var(--line);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.act-login .act-icon { color: var(--blue); }
.act-image_gen .act-icon, .act-video_gen .act-icon { color: var(--accent); }
.act-profile_image .act-icon { color: var(--green); }
.act-payment .act-icon, .act-subscription .act-icon { color: var(--amber); }
.act-rating .act-icon { color: var(--amber); }
.act-discover_post .act-icon { color: var(--green); }
.act-llm_gen .act-icon { color: var(--accent2); }
.act-job .act-icon { color: var(--muted); }
.act-scrape_failure .act-icon { color: var(--red); }

/* ── Table improvements ── */
.table-wrap {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead th {
  background: var(--panel2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--muted);
}
tbody td {
  padding: 10px 14px;
  font-size: 13px;
}
tbody tr {
  border-top: 1px solid var(--line);
}


/* ── Softer elevation and modern modal layout ── */
.modal {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(860px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
  padding: 0;
  overflow: hidden;
}
.modal-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
}
.modal-inner .modal-header {
  flex-shrink: 0;
}
.modal-inner .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.modal-header {
  flex-shrink: 0;
  padding: 22px 28px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 28px;
  overflow: auto;
}
.modal-section + .modal-section,
.modal-section {
  margin-top: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.modal-section:first-child {
  padding-top: 0;
  border-top: 0;
}
.modal-section:last-child {
  padding-bottom: 4px;
}
.section-head {
  margin-bottom: 14px;
}
.section-head h3 {
  margin: 0;
}
.section-head .help-text {
  margin: 5px 0 0;
}
.modal-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  margin-bottom: 14px;
}
.form-grid .field,
.plan-field {
  min-width: 0;
}

/* ── Email & Templates workflow ── */
.email-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 20px;
  align-items: start;
}
.email-composer,
.email-library {
  margin-bottom: 0;
}
.email-library {
  position: sticky;
  top: 24px;
}
.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.panel-heading h2 {
  margin: 0 0 3px;
}
.panel-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.composer-picker {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
}
.picker-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 180px;
}
.picker-copy label {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}
.picker-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 280px;
}
.picker-actions select {
  width: auto;
  min-width: 190px;
  flex: 1;
}
.composer-section {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.composer-section h3 {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.from-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.recipient-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.2fr);
  gap: 12px;
  align-items: end;
}
.recipient-or {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  color: var(--dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}
.composer-footer .saved-note {
  min-height: auto;
  text-align: right;
  word-break: break-word;
}
.template-library {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.template-card {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
}
.template-card-body {
  min-width: 0;
  margin-bottom: 10px;
}
.template-card h4 {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.35;
  word-break: break-word;
}
.template-subject {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.template-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.template-actions button {
  width: 100%;
  min-width: 0;
}
.library-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 16px;
  border: 1px dashed var(--line2);
  border-radius: 10px;
  color: var(--muted);
  text-align: center;
}
.library-empty strong {
  color: var(--text);
  font-size: 14px;
}
.email-template-modal {
  max-width: min(860px, calc(100vw - 32px));
}

/* ── User modal refinement ── */
.user-modal .modal-header,
.modal .modal-header {
  display: flex;
  gap: 15px;
  align-items: center;
}
.premium-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.premium-actions button {
  width: 100%;
  min-width: 0;
}
.plan-field {
  max-width: 300px;
}
.token-row,
.status-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.status-row button {
  flex: 1 1 145px;
}
.compact-table {
  overflow: auto;
}
.compact-table table {
  min-width: 620px;
}
.activity-placeholder {
  padding: 8px 0;
}

@media (max-width: 1080px) {
  .email-workflow {
    grid-template-columns: 1fr;
  }
  .email-library {
    position: static;
  }
}
@media (max-width: 760px) {
  .modal-header,
  .modal-body {
    padding-left: 18px;
    padding-right: 18px;
  }
  .form-grid,
  .from-grid,
  .recipient-grid {
    grid-template-columns: 1fr;
  }
  .recipient-or {
    min-height: auto;
    justify-content: flex-start;
  }
  .composer-picker {
    align-items: stretch;
    flex-direction: column;
  }
  .picker-actions {
    min-width: 0;
  }
  .picker-actions select {
    min-width: 0;
  }
  .composer-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .composer-footer .saved-note {
    text-align: left;
  }
  .template-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .premium-actions {
    grid-template-columns: 1fr;
  }
}


/* ── Email body visual editor and explicit recipients ── */
.recipient-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.recipient-grid .field:nth-child(3) {
  min-width: 0;
}
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-title-row h3 {
  margin: 0;
}
.body-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel3);
}
.body-mode-toggle button {
  min-width: 88px;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.body-mode-toggle button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.visual-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel2);
}
.visual-toolbar .italic {
  font-style: italic;
}
.visual-toolbar select.variable-select {
  width: auto;
  min-width: 150px;
  flex: 0 1 170px;
  margin-left: auto;
}
.email-visual-frame {
  display: block;
  width: 100%;
  height: min(420px, 52vh);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.email-template-modal .email-visual-frame {
  height: min(360px, 42vh);
}
@media (max-width: 1080px) {
  .recipient-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .section-title-row {
    align-items: stretch;
    flex-direction: column;
  }
  .body-mode-toggle {
    width: 100%;
    justify-content: center;
  }
  .body-mode-toggle button {
    flex: 1;
    min-width: 0;
  }
  .visual-toolbar select.variable-select {
    width: 100%;
    flex: 1 1 100%;
    margin-left: 0;
  }
  .email-visual-frame {
    height: 320px;
  }
}


/* ── Compact recipient selector and collapsible template sidebar ── */
.recipient-grid {
  display: none;
}
#mail-target-type,
#mail-ids,
#mail-emails {
  width: 100%;
  max-width: 420px;
}
#mail-target-help,
#mail-ids-field .help-text,
#mail-emails-field .help-text {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.email-workflow {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
}
.email-library {
  padding: 0;
  overflow: visible;
}
.library-toggle {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
}
.library-toggle:hover,
.library-toggle:focus {
  background: var(--panel2);
}
.library-toggle-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.library-toggle-copy strong {
  font-size: 14px;
  white-space: nowrap;
}
.library-caret {
  color: var(--muted);
  font-size: 12px;
  transform: translateY(-1px);
}
.library-body {
  padding: 0 12px 12px;
}
.library-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 4px 10px;
  border-top: 1px solid var(--line);
}
.template-library {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(56vh, 520px);
  overflow: auto;
  padding-right: 3px;
}
.template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel2);
}
.template-card-body {
  margin: 0;
}
.template-row h4 {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-row .template-subject {
  margin: 1px 0 0;
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.template-actions .blue.sm {
  min-width: 48px;
  padding: 6px 8px;
}
.template-menu {
  position: relative;
}
.template-menu .menu-trigger {
  min-width: 30px;
  padding: 6px 7px;
  color: var(--muted);
  line-height: 1;
}
.template-menu > .template-menu {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 20;
  display: none;
  min-width: 130px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.template-menu > .template-menu.open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.template-menu > .template-menu button {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-align: left;
}
.template-menu > .template-menu button:hover {
  background: var(--panel2);
  color: var(--text);
}
.template-menu > .template-menu button.danger {
  color: var(--red);
}
.library-empty.compact {
  gap: 4px;
  padding: 18px 12px;
}
.library-empty.compact span {
  font-size: 12px;
}
@media (max-width: 1080px) {
  .email-workflow {
    grid-template-columns: 1fr;
  }
  .email-library {
    position: static;
  }
  .library-body {
    max-height: none;
  }
}


/* Ensure compact template rows do not inherit the older full-width action grid. */
.template-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.template-actions button {
  width: auto;
  min-width: 0;
}
.template-actions .blue.sm {
  min-width: 48px;
}
.template-actions .menu-trigger {
  min-width: 30px;
}