/* =====================================================================
   موثوق — Component Library
   Buttons · Forms · Chips · KPI · Table · Tabs · Stepper · Modal/Drawer
   Toast/Alert · Progress · Breadcrumbs · Avatar · Tooltip · States · Shell
   ===================================================================== */

/* ============================ Buttons ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-semi);
  line-height:1;padding:0 var(--sp-4);height:40px;border-radius:var(--r-md);
  border:1px solid transparent;background:var(--primary-600);color:var(--primary-ink);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform .05s ease;
  white-space:nowrap;user-select:none;
}
.btn:hover{background:var(--primary-700);}
.btn:active{transform:translateY(1px);}
.btn .ic{width:17px;height:17px;flex:none;}
.btn.secondary{background:var(--n-0);color:var(--text);border-color:var(--border-strong);}
.btn.secondary:hover{background:var(--n-50);border-color:var(--n-400);}
.btn.danger{background:var(--error);} .btn.danger:hover{background:var(--error-600);}
.btn.ghost{background:transparent;color:var(--primary-700);}
.btn.ghost:hover{background:var(--primary-50);}
.btn.subtle{background:var(--primary-50);color:var(--primary-700);}
.btn.subtle:hover{background:var(--primary-100);}
.btn.sm{height:32px;padding:0 var(--sp-3);font-size:var(--fs-caption);border-radius:var(--r-sm);}
.btn.lg{height:46px;padding:0 var(--sp-6);font-size:var(--fs-body);}
.btn.icon{width:40px;padding:0;} .btn.icon.sm{width:32px;}
.btn.block{width:100%;}
.btn:disabled,.btn[disabled]{opacity:.5;pointer-events:none;}

/* ============================ Forms ============================ */
.field{display:flex;flex-direction:column;gap:var(--sp-2);}
.field > label,.lbl{font-size:var(--fs-label);font-weight:var(--fw-med);color:var(--text-soft);}
.lbl .req{color:var(--error);margin-inline-start:3px;}
.help{font-size:var(--fs-caption);color:var(--text-muted);}
.help.err{color:var(--error-ink);}
.input,.textarea,.select{
  width:100%;font-family:inherit;font-size:var(--fs-sm);color:var(--text);
  background:var(--n-0);border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:0 var(--sp-3);height:42px;line-height:42px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.textarea{height:auto;min-height:96px;line-height:1.6;padding:var(--sp-3);resize:vertical;}
.input::placeholder,.textarea::placeholder{color:var(--text-faint);}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--primary-500);box-shadow:var(--sh-ring);}
.input:disabled{background:var(--n-100);color:var(--text-muted);cursor:not-allowed;}
.input.invalid{border-color:var(--error);box-shadow:0 0 0 3px rgba(209,67,67,.15);}

/* input with leading icon / addon */
.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap .lead{position:absolute;inset-inline-start:12px;width:17px;height:17px;color:var(--text-faint);pointer-events:none;}
.input-wrap .input{padding-inline-start:38px;}

/* select (native + chevron) */
.select-wrap{position:relative;display:flex;align-items:center;}
.select{appearance:none;padding-inline-end:36px;cursor:pointer;}
.select-wrap .chev{position:absolute;inset-inline-end:12px;width:15px;height:15px;color:var(--text-muted);pointer-events:none;}

/* checkbox / radio */
.choice{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text);cursor:pointer;user-select:none;}
.choice input{position:absolute;opacity:0;width:0;height:0;}
.choice .box{width:19px;height:19px;border:1.5px solid var(--border-strong);border-radius:var(--r-xs);background:var(--n-0);
  display:grid;place-items:center;transition:all var(--dur) var(--ease);flex:none;}
.choice .box.round{border-radius:var(--r-pill);}
.choice .box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:all var(--dur) var(--ease);}
.choice input:checked + .box{background:var(--primary-600);border-color:var(--primary-600);}
.choice input:checked + .box svg{opacity:1;transform:scale(1);}
.choice input:checked + .box.round{background:var(--primary-600);}
.choice input:checked + .box.round::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff;}
.choice input:focus-visible + .box{box-shadow:var(--sh-ring);}

/* switch */
.switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;}
.switch input{position:absolute;opacity:0;}
.switch .track{width:40px;height:23px;border-radius:var(--r-pill);background:var(--n-300);transition:background var(--dur) var(--ease);}
.switch .track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:var(--sh-sm);transition:transform var(--dur) var(--ease);}
.switch input:checked + .track{background:var(--primary-600);}
.switch input:checked + .track::after{transform:translateX(-17px);}
html[dir="rtl"] .switch input:checked + .track::after{transform:translateX(-17px);}

/* dropzone */
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--n-25);
  padding:var(--sp-7) var(--sp-5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  transition:all var(--dur) var(--ease);cursor:pointer;}
.dropzone:hover,.dropzone.drag{border-color:var(--primary-500);background:var(--primary-50);}
.dropzone .dz-ic{width:42px;height:42px;color:var(--primary-600);}
.dropzone .dz-title{font-size:var(--fs-sm);font-weight:var(--fw-semi);color:var(--text);}
.dropzone .dz-hint{font-size:var(--fs-caption);color:var(--text-muted);}
.file-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--n-0);}
.file-row .fic{width:34px;height:34px;border-radius:var(--r-sm);background:var(--primary-50);color:var(--primary-700);display:grid;place-items:center;flex:none;}
.file-row .fic svg{width:18px;height:18px;}
.file-row .meta{flex:1;min-width:0;}
.file-row .meta .nm{font-size:var(--fs-sm);font-weight:var(--fw-med);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.file-row .meta .sz{font-size:var(--fs-caption);color:var(--text-muted);}

/* media upload tiles (video / image group) */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:var(--sp-3);}
.media-tile{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--n-100);}
.media-tile img{width:100%;height:100%;object-fit:cover;}
.media-tile .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,52,45,.32);color:#fff;}
.media-tile .play svg{width:30px;height:30px;}
.media-tile .rm{position:absolute;top:6px;inset-inline-end:6px;width:22px;height:22px;border-radius:50%;background:rgba(22,28,34,.6);color:#fff;border:0;display:grid;place-items:center;}
.media-tile .rm svg{width:12px;height:12px;}
.media-add{border:1.5px dashed var(--border-strong);background:var(--n-25);color:var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:var(--fs-caption);}
.media-add svg{width:22px;height:22px;color:var(--primary-600);}

/* ============================ Chips / Badges ============================ */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:var(--fw-semi);
  padding:4px 10px;border-radius:var(--r-pill);border:1px solid transparent;white-space:nowrap;line-height:1.3;}
.chip .dot{width:7px;height:7px;border-radius:50%;flex:none;}
.chip.notstarted{background:var(--st-notstarted-bg);color:var(--st-notstarted-ink);} .chip.notstarted .dot{background:var(--st-notstarted-dot);}
.chip.filling{background:var(--st-filling-bg);color:var(--st-filling-ink);} .chip.filling .dot{background:var(--st-filling-dot);}
.chip.submitted{background:var(--st-submitted-bg);color:var(--st-submitted-ink);} .chip.submitted .dot{background:var(--st-submitted-dot);}
.chip.review{background:var(--st-review-bg);color:var(--st-review-ink);} .chip.review .dot{background:var(--st-review-dot);}
.chip.approval{background:var(--st-approval-bg);color:var(--st-approval-ink);} .chip.approval .dot{background:var(--st-approval-dot);}
.chip.done{background:var(--st-done-bg);color:var(--st-done-ink);} .chip.done .dot{background:var(--st-done-dot);}
.chip.returned{background:var(--st-returned-bg);color:var(--st-returned-ink);} .chip.returned .dot{background:var(--st-returned-dot);}

/* small neutral tag */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);font-weight:var(--fw-med);
  padding:3px 9px;border-radius:var(--r-sm);background:var(--n-100);color:var(--text-soft);border:1px solid var(--border);}

/* grade badge (square, bold letter) */
.grade{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);
  font-weight:var(--fw-bold);font-size:15px;border:1px solid transparent;}
.grade.a{background:var(--grade-a-bg);color:var(--grade-a-ink);border-color:var(--grade-a-border);}
.grade.b{background:var(--grade-b-bg);color:var(--grade-b-ink);border-color:var(--grade-b-border);}
.grade.c{background:var(--grade-c-bg);color:var(--grade-c-ink);border-color:var(--grade-c-border);}
.grade.d{background:var(--grade-d-bg);color:var(--grade-d-ink);border-color:var(--grade-d-border);}

/* ============================ Cards / KPI ============================ */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);}
.card.pad{padding:var(--sp-5);}
.kpi{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);background:var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);position:relative;overflow:hidden;}
.kpi .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);}
.kpi .kpi-ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--primary-50);color:var(--primary-700);}
.kpi .kpi-ic svg{width:20px;height:20px;}
.kpi .kpi-label{font-size:var(--fs-label);color:var(--text-muted);font-weight:var(--fw-med);}
.kpi .kpi-value{font-size:30px;font-weight:var(--fw-bold);color:var(--text);line-height:1;letter-spacing:-.01em;}
.kpi .kpi-value .unit{font-size:16px;font-weight:var(--fw-semi);color:var(--text-muted);margin-inline-start:3px;}
.kpi .kpi-trend{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);font-weight:var(--fw-semi);}
.kpi .kpi-trend.up{color:var(--success-600);} .kpi .kpi-trend.down{color:var(--error-600);}
.kpi .kpi-trend svg{width:13px;height:13px;}
.kpi.accent{background:linear-gradient(180deg,var(--primary-700),var(--primary-800));color:#fff;border-color:var(--primary-800);}
.kpi.accent .kpi-label{color:rgba(255,255,255,.72);}
.kpi.accent .kpi-value{color:#fff;}
.kpi.accent .kpi-ic{background:rgba(255,255,255,.14);color:#fff;}

/* ============================ Data Table ============================ */
.table-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-xs);}
.table-toolbar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--divider);flex-wrap:wrap;}
.table-toolbar .spacer{flex:1;}
.table-scroll{overflow-x:auto;}
table.data{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
table.data thead th{
  text-align:start;font-size:var(--fs-caption);font-weight:var(--fw-semi);color:var(--text-muted);
  background:var(--n-50);padding:11px var(--sp-4);border-bottom:1px solid var(--border);white-space:nowrap;position:relative;
}
table.data thead th.sortable{cursor:pointer;user-select:none;}
table.data thead th.sortable:hover{color:var(--text-soft);}
table.data thead th .sort-ic{display:inline-flex;vertical-align:middle;margin-inline-start:5px;opacity:.5;}
table.data thead th[aria-sort] .sort-ic{opacity:1;color:var(--primary-600);}
table.data tbody td{padding:13px var(--sp-4);border-bottom:1px solid var(--divider);color:var(--text);vertical-align:middle;white-space:nowrap;}
table.data tbody tr:last-child td{border-bottom:0;}
table.data tbody tr{transition:background var(--dur) var(--ease);}
table.data tbody tr:hover{background:var(--n-25);}
table.data tbody tr.selected{background:var(--primary-50);}
table.data .cell-co{display:flex;align-items:center;gap:var(--sp-3);}
table.data .col-check{width:44px;}
.table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--divider);flex-wrap:wrap;}
.pager{display:flex;align-items:center;gap:4px;}
.pager button{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border);background:var(--n-0);border-radius:var(--r-sm);font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--text-soft);}
.pager button:hover{background:var(--n-50);}
.pager button.active{background:var(--primary-600);color:#fff;border-color:var(--primary-600);}
.pager button:disabled{opacity:.4;pointer-events:none;}

/* ============================ Tabs ============================ */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;}
.tab{position:relative;padding:11px var(--sp-4);font-size:var(--fs-sm);font-weight:var(--fw-med);color:var(--text-muted);
  background:none;border:0;white-space:nowrap;transition:color var(--dur) var(--ease);}
.tab:hover{color:var(--text);}
.tab.active{color:var(--primary-700);font-weight:var(--fw-semi);}
.tab.active::after{content:"";position:absolute;inset-inline:10px;bottom:-1px;height:2.5px;background:var(--primary-600);border-radius:2px;}
.tab .count{margin-inline-start:6px;font-size:11px;background:var(--n-100);color:var(--text-muted);padding:1px 7px;border-radius:var(--r-pill);}
.tab.active .count{background:var(--primary-100);color:var(--primary-700);}
/* segmented control */
.segmented{display:inline-flex;background:var(--n-100);border-radius:var(--r-md);padding:3px;gap:2px;}
.segmented button{border:0;background:none;padding:6px 14px;font-size:var(--fs-caption);font-weight:var(--fw-med);color:var(--text-soft);border-radius:var(--r-sm);white-space:nowrap;}
.segmented button.active{background:var(--n-0);color:var(--primary-700);box-shadow:var(--sh-xs);font-weight:var(--fw-semi);}

/* ============================ Stepper (7 steps) ============================ */
.stepper{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:var(--sp-2) 0;}
.step{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:88px;position:relative;text-align:center;}
.step .node{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  background:var(--n-0);border:2px solid var(--border-strong);color:var(--text-muted);z-index:2;transition:all var(--dur) var(--ease);}
.step .node svg{width:16px;height:16px;}
.step .slabel{font-size:var(--fs-caption);color:var(--text-muted);line-height:1.35;max-width:96px;}
.step::before,.step::after{content:"";position:absolute;top:17px;height:2px;background:var(--border);z-index:1;}
.step::before{inset-inline-start:0;width:50%;} .step::after{inset-inline-end:0;width:50%;}
.step:first-child::before{display:none;} .step:last-child::after{display:none;}
.step.done .node{background:var(--primary-600);border-color:var(--primary-600);color:#fff;}
.step.done::before,.step.done::after{background:var(--primary-500);}
.step.current .node{background:var(--n-0);border-color:var(--primary-600);color:var(--primary-700);box-shadow:var(--sh-ring);}
.step.current::before{background:var(--primary-500);}
.step.current .slabel{color:var(--primary-700);font-weight:var(--fw-semi);}

/* ============================ Modal & Drawer ============================ */
.scrim{position:fixed;inset:0;background:rgba(13,28,24,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);z-index:var(--z-modal);}
.scrim.open{opacity:1;visibility:visible;}
.modal{position:fixed;inset:0;display:grid;place-items:center;padding:var(--sp-5);z-index:var(--z-modal);pointer-events:none;}
.modal-box{width:min(520px,100%);background:var(--n-0);border-radius:var(--r-xl);box-shadow:var(--sh-lg);pointer-events:auto;
  transform:translateY(12px) scale(.98);opacity:0;transition:all var(--dur) var(--ease);overflow:hidden;}
.scrim.open ~ .modal .modal-box{transform:none;opacity:1;}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-5) var(--sp-5) var(--sp-3);}
.modal-body{padding:0 var(--sp-5) var(--sp-2);color:var(--text-soft);}
.modal-foot{display:flex;justify-content:flex-start;gap:var(--sp-3);padding:var(--sp-5);}
.modal-foot.end{justify-content:flex-end;}

.drawer{position:fixed;top:0;bottom:0;right:0;width:min(420px,100%);background:var(--n-0);box-shadow:var(--sh-lg);
  z-index:var(--z-modal);transform:translateX(100%);transition:transform var(--dur) var(--ease);display:flex;flex-direction:column;}
.drawer.open{transform:translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5);border-bottom:1px solid var(--divider);}
.drawer-body{padding:var(--sp-5);overflow-y:auto;flex:1;}

.iconbtn{width:34px;height:34px;border-radius:var(--r-sm);border:0;background:transparent;color:var(--text-muted);display:grid;place-items:center;}
.iconbtn:hover{background:var(--n-100);color:var(--text);}
.iconbtn svg{width:18px;height:18px;}

/* ============================ Toast & Alert ============================ */
.toast-host{position:fixed;bottom:var(--sp-6);inset-inline-start:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3);z-index:var(--z-toast);}
.toast{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--n-900);color:#fff;border-radius:var(--r-md);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--sh-lg);min-width:280px;max-width:380px;
  animation:toast-in .28s var(--ease);}
@keyframes toast-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.toast .tic{width:20px;height:20px;flex:none;margin-top:1px;}
.toast.success .tic{color:#7fe3ab;} .toast.error .tic{color:#ff9b94;} .toast.info .tic{color:#9cc0ff;} .toast.warning .tic{color:#ffd27a;}
.toast .tbody{flex:1;}
.toast .ttitle{font-size:var(--fs-sm);font-weight:var(--fw-semi);}
.toast .tmsg{font-size:var(--fs-caption);color:rgba(255,255,255,.78);margin-top:2px;}
.toast .tclose{background:none;border:0;color:rgba(255,255,255,.6);padding:0;}
.toast .tclose svg{width:15px;height:15px;}

.alert{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);border:1px solid transparent;}
.alert .aic{width:19px;height:19px;flex:none;margin-top:2px;}
.alert .atitle{font-size:var(--fs-sm);font-weight:var(--fw-semi);}
.alert .amsg{font-size:var(--fs-caption);margin-top:2px;}
.alert.info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-ink);}
.alert.success{background:var(--success-bg);border-color:var(--success-border);color:var(--success-ink);}
.alert.warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-ink);}
.alert.error{background:var(--error-bg);border-color:var(--error-border);color:var(--error-ink);}

/* ============================ Progress ============================ */
.bar{height:8px;border-radius:var(--r-pill);background:var(--n-150);overflow:hidden;}
.bar > i{display:block;height:100%;border-radius:inherit;background:var(--primary-600);transition:width .5s var(--ease);}
.bar.a > i{background:var(--grade-a);} .bar.b > i{background:var(--grade-b);} .bar.c > i{background:var(--grade-c);} .bar.d > i{background:var(--grade-d);}
.ring{position:relative;display:inline-grid;place-items:center;}
.ring svg{transform:rotate(-90deg);} 
.ring .rtrack{fill:none;stroke:var(--n-150);}
.ring .rfill{fill:none;stroke:var(--primary-600);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease);}
.ring .rlabel{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;}
.ring .rlabel .rv{font-size:20px;font-weight:var(--fw-bold);}
.ring .rlabel .rt{font-size:10px;color:var(--text-muted);margin-top:3px;}

/* ============================ Breadcrumbs / Avatar / Tooltip ============================ */
.crumbs{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-caption);color:var(--text-muted);flex-wrap:wrap;}
.crumbs a:hover{color:var(--text);}
.crumbs .sep{color:var(--text-faint);transform:scaleX(-1);} /* RTL chevron */
.crumbs .here{color:var(--text);font-weight:var(--fw-semi);}

.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-caption);font-weight:var(--fw-bold);
  background:var(--primary-100);color:var(--primary-700);flex:none;overflow:hidden;border:1.5px solid var(--n-0);box-shadow:0 0 0 1px var(--border);}
.avatar.sm{width:28px;height:28px;font-size:11px;}
.avatar.lg{width:48px;height:48px;font-size:var(--fs-h4);}
.avatar img{width:100%;height:100%;object-fit:cover;}
.avatar-stack{display:flex;}
.avatar-stack .avatar{margin-inline-start:-10px;}
.avatar-stack .avatar:first-child{margin-inline-start:0;}

.tip{position:relative;display:inline-flex;}
.tip .tip-bub{position:absolute;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(50%) translateY(4px);
  background:var(--n-900);color:#fff;font-size:var(--fs-caption);font-weight:var(--fw-med);padding:6px 10px;border-radius:var(--r-sm);
  white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--dur) var(--ease);pointer-events:none;z-index:var(--z-tooltip);}
html[dir="rtl"] .tip .tip-bub{transform:translateX(50%) translateY(4px);}
.tip .tip-bub::after{content:"";position:absolute;top:100%;inset-inline-start:50%;transform:translateX(50%);
  border:5px solid transparent;border-top-color:var(--n-900);}
.tip:hover .tip-bub{opacity:1;visibility:visible;transform:translateX(50%) translateY(0);}

/* ============================ States: empty / skeleton / error ============================ */
.state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--sp-3);padding:var(--sp-12) var(--sp-6);}
.state .state-ic{width:64px;height:64px;border-radius:var(--r-xl);display:grid;place-items:center;background:var(--n-100);color:var(--text-faint);}
.state .state-ic svg{width:30px;height:30px;}
.state.err .state-ic{background:var(--error-bg);color:var(--error);}
.state .state-title{font-size:var(--fs-h4);font-weight:var(--fw-semi);color:var(--text);}
.state .state-msg{font-size:var(--fs-sm);color:var(--text-muted);max-width:340px;}

.skeleton{background:linear-gradient(90deg,var(--n-100) 25%,var(--n-150) 37%,var(--n-100) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-sm);}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.sk-line{height:12px;margin:6px 0;} .sk-line.sh{width:60%;} .sk-line.md{width:80%;}
.sk-circle{border-radius:50%;}

@media (prefers-reduced-motion:reduce){
  .skeleton,.toast{animation:none;}
  *{scroll-behavior:auto;}
}