/* Udda design base: fonts, tokens, and the shared components (buttons, fields, badges, cards,
   tables, dialogs, toasts, empty states, skeletons). Spacing is in steps of 8px. */

/* ---------- fonts: Inter for Latin, IBM Plex Sans Arabic for Arabic ---------- */
@font-face{font-family:"Inter";src:url("fonts/inter-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plex Arabic";src:url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+25CC}
@font-face{font-family:"Plex Arabic";src:url("fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+25CC}
@font-face{font-family:"Plex Arabic";src:url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+25CC}
@font-face{font-family:"Plex Arabic";src:url("fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+25CC}

/* ---------- tokens ---------- */
:root{
  color-scheme:light dark;
  --bg:#F5F7F9;--surface:#FFFFFF;--surface-2:#F8FAFB;--sunken:#EEF2F5;--hover:#F1F4F7;
  --border:#E5EAEE;--border-2:#D5DDE3;
  --ink:#0F1D25;--ink-2:#334550;--muted:#5F707C;--faint:#8F9DA7;
  --primary:#0B5C7A;--primary-2:#094E68;--primary-ink:#0B5C7A;--primary-soft:#E6F0F4;--primary-line:#BCD6E1;--on-primary:#FFFFFF;
  --ok:#147A47;--ok-bg:#E5F5EC;--warn:#9A5B06;--warn-bg:#FDF2E1;--danger:#C0353B;--danger-bg:#FCEBEC;--info:#1C5BC4;--info-bg:#E8F0FC;
  --shadow-1:0 1px 2px rgba(15,29,37,.05),0 1px 4px rgba(15,29,37,.04);
  --shadow-2:0 1px 2px rgba(15,29,37,.04),0 8px 24px -8px rgba(15,29,37,.10);
  --shadow-3:0 2px 4px rgba(15,29,37,.05),0 16px 40px -12px rgba(15,29,37,.18);
  --ring:0 0 0 3px rgba(11,92,122,.24);
  --r-card:16px;--r-ctl:10px;
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:40px;--s6:48px;
  --fs-1:32px;--fs-2:24px;--fs-3:18px;--fs-4:15px;--fs-5:13px;
  --t:150ms;--ease:cubic-bezier(.2,.8,.2,1);
  --ic:18px;
  --font-en:"Inter",system-ui,"Segoe UI",Roboto,sans-serif;
  --font-ar:"Plex Arabic","Inter",system-ui,"Segoe UI",Tahoma,sans-serif;
  /* brand: Udda petroleum */
  --b1:#19A0C4;--b2:#0B5C7A;--b3:#063A4D;
  --grad-brand:linear-gradient(135deg,#1597BA 0%,#0B5C7A 52%,#07425A 100%);
  --glow-brand:0 18px 44px -18px rgba(11,92,122,.75);
  /* type scale (fluid) */
  --fs-hero:clamp(2.25rem,1.35rem + 3.4vw,4rem);
  --fs-display:clamp(1.75rem,1.2rem + 1.9vw,2.75rem);
  --fs-title:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --fs-lead:clamp(1.0625rem,.98rem + .4vw,1.25rem);
  --r-xl:24px;--r-2xl:32px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1417;--surface:#151D21;--surface-2:#192328;--sunken:#11181C;--hover:#1C272C;
    --border:#243139;--border-2:#2E3D46;
    --ink:#E7EEF2;--ink-2:#BFCBD2;--muted:#8D9DA7;--faint:#62737E;
    --primary:#0E6A8C;--primary-2:#0B5C7A;--primary-ink:#6BC2E2;--primary-soft:#122C37;--primary-line:#1E4B5D;
    --ok:#4CC789;--ok-bg:#12291E;--warn:#F0B35A;--warn-bg:#2C2312;--danger:#FF8086;--danger-bg:#311A1C;--info:#86AEF7;--info-bg:#17233A;
    --shadow-1:0 1px 2px rgba(0,0,0,.30),0 1px 4px rgba(0,0,0,.20);
    --shadow-2:0 1px 2px rgba(0,0,0,.30),0 8px 24px -8px rgba(0,0,0,.45);
    --shadow-3:0 2px 4px rgba(0,0,0,.30),0 16px 40px -12px rgba(0,0,0,.60);
    --ring:0 0 0 3px rgba(107,194,226,.30);
  }
}

/* product colours: each tile class sets the app's own colour.
   --pc mark colour, --pc1/--pc2 gradient, --pc-ink text on the page, --pc-soft tinted surface, --pc-line border */
:root{--pc:#0B5C7A;--pc1:#1597BA;--pc2:#0B5C7A;--pc-ink:#0B5C7A;--pc-soft:rgba(11,92,122,.10);--pc-line:rgba(11,92,122,.28)}
.t-play{--pc:#2D6CF2;--pc1:#4A8DFF;--pc2:#1D4FD8;--pc-ink:#1D4FD8;--pc-soft:rgba(59,130,246,.11);--pc-line:rgba(59,130,246,.32)}
.t-archive{--pc:#7C4DEB;--pc1:#A07BFF;--pc2:#6534DB;--pc-ink:#6534DB;--pc-soft:rgba(139,92,246,.11);--pc-line:rgba(139,92,246,.32)}
.t-image{--pc:#16A05A;--pc1:#3DD27A;--pc2:#13924F;--pc-ink:#137A43;--pc-soft:rgba(34,197,94,.11);--pc-line:rgba(34,197,94,.34)}
.t-dl{--pc:#1A9BE0;--pc1:#5CC8FF;--pc2:#1789D2;--pc-ink:#0E6FAB;--pc-soft:rgba(56,189,248,.13);--pc-line:rgba(56,189,248,.38)}
.t-trash{--pc:#E0464C;--pc1:#FF7A7E;--pc2:#D3343A;--pc-ink:#B92B31;--pc-soft:rgba(239,68,68,.10);--pc-line:rgba(239,68,68,.32)}
.t-teal{--pc:#0F8A86;--pc1:#1FB5B0;--pc2:#0B6664;--pc-ink:#0B6E6B;--pc-soft:rgba(20,184,166,.11);--pc-line:rgba(20,184,166,.32)}
.t-rose{--pc:#DB2777;--pc1:#F472B6;--pc2:#BE185D;--pc-ink:#BE185D;--pc-soft:rgba(236,72,153,.11);--pc-line:rgba(236,72,153,.32)}
.t-orange{--pc:#EA580C;--pc1:#FB923C;--pc2:#C2410C;--pc-ink:#C2410C;--pc-soft:rgba(249,115,22,.11);--pc-line:rgba(249,115,22,.32)}
.t-gold{--pc:#CA8A04;--pc1:#FACC15;--pc2:#A16207;--pc-ink:#A16207;--pc-soft:rgba(234,179,8,.13);--pc-line:rgba(234,179,8,.36)}
.t-jade{--pc:#0D9488;--pc1:#2DD4BF;--pc2:#0F766E;--pc-ink:#0F766E;--pc-soft:rgba(20,184,166,.11);--pc-line:rgba(20,184,166,.32)}
@media (prefers-color-scheme:dark){
  :root{--pc-ink:#6BC2E2;--pc-soft:rgba(56,166,204,.14);--pc-line:rgba(107,194,226,.30)}
  .t-play{--pc-ink:#8DB4FF;--pc-soft:rgba(74,141,255,.15);--pc-line:rgba(141,180,255,.30)}
  .t-archive{--pc-ink:#C1A8FF;--pc-soft:rgba(160,123,255,.15);--pc-line:rgba(193,168,255,.30)}
  .t-image{--pc-ink:#5FE09A;--pc-soft:rgba(61,210,122,.14);--pc-line:rgba(95,224,154,.30)}
  .t-dl{--pc-ink:#8AD8FF;--pc-soft:rgba(92,200,255,.15);--pc-line:rgba(138,216,255,.30)}
  .t-trash{--pc-ink:#FF9A9D;--pc-soft:rgba(255,122,126,.14);--pc-line:rgba(255,154,157,.30)}
  .t-teal{--pc-ink:#5FD6D1;--pc-soft:rgba(31,181,176,.15);--pc-line:rgba(95,214,209,.30)}
  .t-rose{--pc-ink:#F9A8D4;--pc-soft:rgba(244,114,182,.15);--pc-line:rgba(249,168,212,.30)}
  .t-orange{--pc-ink:#FDBA74;--pc-soft:rgba(251,146,60,.15);--pc-line:rgba(253,186,116,.30)}
  .t-gold{--pc-ink:#FDE047;--pc-soft:rgba(250,204,21,.14);--pc-line:rgba(253,224,71,.30)}
  .t-jade{--pc-ink:#5EEAD4;--pc-soft:rgba(45,212,191,.15);--pc-line:rgba(94,234,212,.30)}
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-en);font-size:var(--fs-4);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
[lang="ar"],[lang="ar"] body{font-family:var(--font-ar);font-feature-settings:normal}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.35;letter-spacing:-.01em}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4{letter-spacing:0}
h1{font-size:var(--fs-2);font-weight:700}
h2{font-size:var(--fs-3);font-weight:600}
h3{font-size:var(--fs-4);font-weight:600}
p{margin:0}
a{color:var(--primary-ink);text-decoration:none}
img{max-width:100%}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0;padding:0}
.ic{width:var(--ic);height:var(--ic);flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .ic.flip{transform:scaleX(-1)}
[dir="ltr"] .ic.back{transform:scaleX(-1)}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.inline{display:inline;margin:0}
.skip{position:absolute;inset-inline-start:16px;top:-64px;z-index:100;padding:8px 16px;border-radius:var(--r-ctl);background:var(--primary);color:var(--on-primary);font-weight:600}
.skip:focus{top:16px}

/* ---------- links ---------- */
.lnk{display:inline-flex;align-items:center;gap:8px;color:var(--primary-ink);font-weight:500;border-radius:6px;transition:color var(--t)}
.lnk:hover{color:var(--primary-2)}
.lnk .ext{opacity:.6}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-ctl);
  font-size:var(--fs-4);font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);
  transition:background-color var(--t),border-color var(--t),color var(--t),box-shadow var(--t),transform var(--t)}
.btn:hover{background:var(--hover);border-color:var(--border-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--primary);background-image:var(--grad-brand);border-color:transparent;color:var(--on-primary);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(11,92,122,.25),0 6px 16px -6px rgba(11,92,122,.6)}
.btn.primary:hover{background:var(--primary-2);background-image:var(--grad-brand);filter:brightness(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 4px rgba(11,92,122,.25),0 12px 28px -10px rgba(11,92,122,.7)}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn.subtle{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)}
.btn.subtle:hover{background:var(--hover);color:var(--ink)}
.btn.danger{background:var(--danger);border-color:transparent;color:#fff}
.btn.danger:hover{filter:brightness(.95)}
.btn.danger-ghost{background:var(--surface);color:var(--danger);border-color:var(--border)}
.btn.danger-ghost:hover{background:var(--danger-bg);border-color:transparent}
.btn.small{height:32px;padding:0 8px;gap:8px;font-size:var(--fs-5);border-radius:8px}
.btn.icon-only{width:40px;padding:0}
.btn.small.icon-only{width:32px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.btn.is-busy .ic{animation:spin 1s linear infinite}
.kbd{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:6px;font-family:var(--font-en);font-size:12px;font-weight:600;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border);direction:ltr}

/* ---------- fields ---------- */
.form{display:flex;flex-direction:column;gap:var(--s2)}
.form.grid-2,.grid-2.gap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.form.grid-2 .form-end{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;border:0;padding:0}
.field > label,.field .label,fieldset.field > legend{font-size:var(--fs-5);font-weight:600;color:var(--ink-2);padding:0}
fieldset.field > legend{margin-bottom:8px}
.control{position:relative;display:flex;align-items:center}
.control .lead{position:absolute;inset-inline-start:16px;color:var(--faint);pointer-events:none;transition:color var(--t)}
.control input,.control select,.control textarea{width:100%;height:40px;padding:0 16px;padding-inline-start:48px;border-radius:var(--r-ctl);
  font-size:var(--fs-4);color:var(--ink);background:var(--surface);border:1px solid var(--border-2);box-shadow:inset 0 1px 1px rgba(15,29,37,.03);
  transition:border-color var(--t),box-shadow var(--t);-webkit-appearance:none;appearance:none}
.control textarea{height:auto;min-height:80px;padding-top:8px;padding-bottom:8px;line-height:1.6;resize:vertical}
.control.area .lead{top:10px}
.control input:hover,.control select:hover,.control textarea:hover{border-color:var(--faint)}
.control input:focus,.control select:focus,.control textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.control:focus-within .lead{color:var(--primary-ink)}
.control input[readonly]{background:var(--surface-2)}
/* a field written in the other direction keeps its padding on the icon side */
[dir="rtl"] .control input[dir="ltr"],[dir="rtl"] .control textarea[dir="ltr"]{text-align:right;padding-left:16px;padding-right:48px}
[dir="rtl"] .control:has(.eye) input[dir="ltr"]{padding-left:48px}
[dir="ltr"] .control input[dir="rtl"],[dir="ltr"] .control textarea[dir="rtl"]{text-align:left;padding-right:16px;padding-left:48px}
.control.select select{padding-inline-end:40px;cursor:pointer}
.control.select .caret{position:absolute;inset-inline-end:16px;transform:rotate(90deg);color:var(--faint);pointer-events:none}
.control .eye{position:absolute;inset-inline-end:4px;width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.control .eye:hover{color:var(--ink);background:var(--hover)}
.control:has(.eye) input{padding-inline-end:48px}
.eye .when-shown{display:none}
.eye[aria-pressed="true"] .when-shown{display:block}
.eye[aria-pressed="true"] .when-hidden{display:none}
.hint,.err,.note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--fs-5);line-height:1.6}
.hint,.note{color:var(--muted)}
.hint .ic,.err .ic,.note .ic{margin-top:2px}
.err{color:var(--danger);font-weight:500}
.has-error .control input,.has-error .control select,.has-error .control textarea{border-color:var(--danger)}
.has-error .control .lead{color:var(--danger)}
.checkbox{display:flex;align-items:flex-start;gap:16px;cursor:pointer;line-height:1.6}
.checkbox input{position:absolute;opacity:0;width:24px;height:24px;margin:0}
.checkbox .box{flex:none;width:24px;height:24px;border-radius:8px;border:1px solid var(--border-2);background:var(--surface);display:grid;place-items:center;transition:background-color var(--t),border-color var(--t)}
.checkbox .box .ic{color:#fff;opacity:0;transition:opacity var(--t)}
.checkbox input:checked + .box{background:var(--primary);border-color:var(--primary)}
.checkbox input:checked + .box .ic{opacity:1}
.checkbox input:focus-visible + .box{box-shadow:var(--ring)}
.copy-row{display:flex;gap:8px}
.copy-row .control{flex:1}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-2)}
.card-pad{padding:var(--s3)}
.card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s2);padding:var(--s2) var(--s3);border-bottom:1px solid var(--border)}
.card-head h2{display:flex;align-items:center;gap:8px;font-size:var(--fs-3)}
.card-head h2 .ic{color:var(--primary-ink)}
.card-head .sub{color:var(--muted);font-size:var(--fs-5);font-weight:400}
.card-body{padding:var(--s3)}
.card-foot{display:flex;flex-wrap:wrap;gap:8px;padding:var(--s2) var(--s3);border-top:1px solid var(--border);background:var(--surface-2);border-radius:0 0 var(--r-card) var(--r-card)}
.lift{transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t)}
.lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}

/* ---------- badges ---------- */
.badge-s,.chip{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 8px;border-radius:999px;font-size:var(--fs-5);font-weight:600;line-height:1;white-space:nowrap;
  color:var(--ink-2);background:var(--sunken)}
.badge-s::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge-s .ic + span,.badge-s .ic{margin:0}
.badge-s:has(.ic)::before{display:none}
.s-active,.s-ok{color:var(--ok);background:var(--ok-bg)}
.s-used,.s-info{color:var(--info);background:var(--info-bg)}
.s-expired,.s-warn{color:var(--warn);background:var(--warn-bg)}
.s-revoked,.s-bad{color:var(--danger);background:var(--danger-bg)}
.chip{color:var(--ink-2);background:var(--sunken);font-weight:500}
.chip.pc{color:var(--pc);background:var(--pc-soft)}

/* ---------- product tile ---------- */
.tile{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;
  background:linear-gradient(160deg,var(--pc1,#16A6A2),var(--pc2,#0B6664));box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -6px var(--pc,#0B6664)}
.tile .ic{--ic:20px;stroke-width:2}
.tile.big{width:56px;height:56px;border-radius:16px}
.tile.big .ic{--ic:24px}
.tile.mini{width:32px;height:32px;border-radius:10px;box-shadow:none}

/* ---------- alerts (inline) ---------- */
.alert{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 16px;border-radius:var(--r-ctl);font-weight:500;font-size:var(--fs-4);line-height:1.6;border:1px solid transparent}
.alert .ic{margin-top:3px}
.alert.success{color:var(--ok);background:var(--ok-bg)}
.alert.error{color:var(--danger);background:var(--danger-bg)}
.alert.info{color:var(--info);background:var(--info-bg)}

/* ---------- toasts (page messages) ---------- */
.toasts{position:fixed;z-index:90;bottom:var(--s3);inset-inline-end:var(--s3);display:flex;flex-direction:column;align-items:flex-end;gap:8px;width:min(400px,calc(100vw - 32px));pointer-events:none}
.toasts .toast{pointer-events:auto;width:100%;display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:12px;font-size:var(--fs-4);font-weight:500;line-height:1.5;
  background:var(--surface);color:var(--ink);border:1px solid var(--border);box-shadow:var(--shadow-3);animation:toast-in .25s var(--ease) both}
.toast > .ic{margin-top:1px}
.toast.success > .ic{color:var(--ok)}
.toast.error > .ic{color:var(--danger)}
.toast.info > .ic{color:var(--info)}
.toast > span{flex:1;min-width:0;overflow-wrap:anywhere}
.toast-x{flex:none;display:grid;place-items:center;width:24px;height:24px;margin:-2px;border:0;border-radius:6px;background:transparent;color:var(--faint);cursor:pointer}
.toast-x:hover{color:var(--ink);background:var(--hover)}
.toasts .toast.is-out{animation:toast-out .2s var(--ease) both}
@keyframes toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* ---------- tables ---------- */
.tbl-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:var(--s2) var(--s3);border-bottom:1px solid var(--border)}
.tbl-tools .search{flex:1 1 240px}
.tbl-tools .control.select{flex:0 1 200px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-4)}
.tbl th{position:sticky;top:0;text-align:start;font-size:var(--fs-5);font-weight:600;color:var(--muted);background:var(--surface-2);
  padding:8px var(--s2);border-bottom:1px solid var(--border);white-space:nowrap}
.tbl th:first-child{padding-inline-start:var(--s3)}
.tbl th:last-child{padding-inline-end:var(--s3)}
.tbl td{padding:var(--s2);border-bottom:1px solid var(--border);vertical-align:middle;overflow-wrap:break-word}
.tbl .nowrap{white-space:nowrap}
.tbl td:first-child{padding-inline-start:var(--s3)}
.tbl td:last-child{padding-inline-end:var(--s3)}
.tbl tbody tr{transition:background-color var(--t)}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl .cell-main{display:flex;align-items:center;gap:16px;min-width:0}
.tbl .cell-main strong{font-weight:600;display:block}
.tbl .cell-main small{display:block;color:var(--muted);font-size:var(--fs-5)}
.tbl .t-end{text-align:end}
.tbl .acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.tbl .acts form{margin:0}
.tbl tr.is-muted td{opacity:.66}
.tbl tr.no-match{display:none}
.avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;font-size:var(--fs-5);font-weight:700;color:#fff;
  background:linear-gradient(160deg,#1B7FA3,#0B5C7A);text-transform:uppercase}
.avatar.lg{width:40px;height:40px;font-size:var(--fs-4)}

/* ---------- empty state ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:var(--s5) var(--s3)}
.empty-art{position:relative;width:120px;height:88px;margin-bottom:var(--s1)}
.empty-art svg{width:100%;height:100%;overflow:visible}
.empty-art .e-back{fill:var(--sunken)}
.empty-art .e-card{fill:var(--surface);stroke:var(--border-2);stroke-width:1.5}
.empty-art .e-line{fill:var(--border)}
.empty-art .e-dot{fill:var(--primary-soft)}
.empty-art .e-icon{position:absolute;inset:0;margin:auto;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:#fff;
  background:linear-gradient(160deg,#1B7FA3,#0B5C7A);box-shadow:0 8px 20px -8px rgba(11,92,122,.6)}
.empty-state h3{font-size:var(--fs-3)}
.empty-state p{color:var(--muted);max-width:420px}
.empty-state .btn{margin-top:var(--s1)}
.no-results{padding:var(--s4) var(--s3);text-align:center;color:var(--muted)}

/* ---------- skeleton ---------- */
.skel{position:relative;overflow:hidden;background:var(--sunken)}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.4s ease-in-out infinite}
@media (prefers-color-scheme:dark){.skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel-line{height:12px;border-radius:6px}

/* ---------- dialogs ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--ink);width:100%;max-width:min(480px,calc(100vw - 32px));overflow:visible}
.modal.wide{max-width:min(760px,calc(100vw - 32px))}
.modal::backdrop{background:rgba(8,20,26,.48);backdrop-filter:blur(2px)}
.modal[open] .modal-box{animation:pop .2s var(--ease) both}
.modal-box{padding:var(--s3);border-radius:var(--r-card);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-3);text-align:start;
  max-height:calc(100vh - 48px);overflow:auto}
.modal-box > h2{margin:var(--s1) 0;font-size:var(--fs-3)}
.modal-box > p{margin:0 0 var(--s3);color:var(--muted)}
.modal-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--warn);background:var(--warn-bg)}
.modal-icon.tone,.modal.tone-primary .modal-icon{color:var(--primary-ink);background:var(--primary-soft)}
.modal-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:var(--s3)}
.modal .form{gap:var(--s2)}
.modal [data-confirm-ok]{background:var(--danger);border-color:transparent;color:#fff}
.modal.tone-primary [data-confirm-ok]{background:var(--primary)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .skel::after{display:none}
}