/* ── Reset ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-block-size:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-inline-size:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}


/* ── CSS Variables (Light Theme) ───────────────── */
:root{
  /* خلفيات */
  --ivory:#F8F8F8;
  --paper:#F2F2F2;
  --white:#FFFFFF;
  /* حدود */
  --line:#E0E0E0;
  /* نصوص */
  --ink:#141414;
  --ash:#888888;
  --mist:#B8B8B8;
  --silver:#C8C8C8;
  /* علامة */
  --teal:#0D9488;
  --purple:#7C3AED;
  /* حالات */
  --green:#16A34A;
  --red:#DC2626;
  --amber:#D97706;
  --blue:#1D4ED8;
  /* فنون */
  --art-WRT:#8B5CF6;
  --art-PHO:#06B6D4;
  --art-DRW:#F59E0B;
  --art-ACT:#EC4899;
  --art-DSG:#10B981;
  --art-SCR:#6366F1;
  --art-MUS:#F43F5E;
  --art-CRF:#84CC16;
  /* تقييم */
  --score-1:#DC2626;--score-1-bg:#FEF2F2;
  --score-2:#F59E0B;--score-2-bg:#FFFBEB;
  --score-3:#6B7280;--score-3-bg:#F9FAFB;
  --score-4:#0D9488;--score-4-bg:#F0FDFA;
  --score-5:#7C3AED;--score-5-bg:#FAF5FF;
  /* شكل */
  --r-card:20px;
  --r-btn:14px;
  --r-pill:100px;
  /* مسافات */
  --space-1:4px;--space-2:8px;--space-3:12px;
  --space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:32px;--space-10:40px;--space-12:48px;
  --space-16:64px;
  /* ظلال */
  --shadow-sm:0 1px 4px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 8px 32px rgba(0,0,0,.1);
  --shadow-xl:0 16px 48px rgba(0,0,0,.12);
  /* انتقالات */
  --t-fast:0.15s ease;
  --t-base:0.2s ease;
  --t-slow:0.35s ease;
}

/* ── Dark Theme ─────────────────────────────────── */
[data-theme="dark"]{
  --ivory:#0A0A0A;--paper:#141414;--white:#1A1A1A;
  --line:#2A2A2A;
  --ink:#F0F0F0;--ash:#A0A0A0;--mist:#6B6B6B;--silver:#4A4A4A;
  --teal:#14B8A6;--purple:#A78BFA;
  --shadow-sm:0 1px 4px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
}

/* ── System Dark ───────────────────────────────── */
@media(prefers-color-scheme:dark){
  [data-theme="system"]{
    --ivory:#0A0A0A;--paper:#141414;--white:#1A1A1A;
    --line:#2A2A2A;
    --ink:#F0F0F0;--ash:#A0A0A0;--mist:#6B6B6B;--silver:#4A4A4A;
    --teal:#14B8A6;--purple:#A78BFA;
    --shadow-sm:0 1px 4px rgba(0,0,0,.3);
    --shadow-md:0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  }
}


/* ── Typography ─────────────────────────────────── */
html{font-size:14px;line-height:1.6;font-family:'Tajawal',sans-serif;color:var(--ink);background:var(--ivory)}
h1,h2,h3,h4,h5,h6{line-height:1.2;font-weight:700;color:var(--ink)}
h1{font-size:clamp(28px,5vw,48px);letter-spacing:-1px}
h2{font-size:clamp(22px,4vw,36px)}
h3{font-size:20px}
h4{font-size:17px}
p{color:var(--ash);line-height:1.7}
/* Markazi — فنية فقط (M-T05) */
.art-title{font-family:'Markazi Text','Tajawal',serif;font-weight:500;font-size:clamp(32px,6vw,56px);line-height:1.1;letter-spacing:0;color:var(--ink)}
/* Outfit — أرقام وـ UI */
.num,.price{font-family:'Outfit',sans-serif;font-weight:600}
/* Code */
.code,.mono{font-family:'JetBrains Mono',monospace;font-size:13px}
/* Sizes */
.text-xs{font-size:11px}.text-sm{font-size:13px}.text-lg{font-size:17px}.text-xl{font-size:20px}.text-2xl{font-size:26px}.text-3xl{font-size:32px}
/* Weights */
.fw-light{font-weight:300}.fw-regular{font-weight:400}.fw-medium{font-weight:500}.fw-semibold{font-weight:600}.fw-bold{font-weight:700}
/* Colors */
.text-ink{color:var(--ink)}.text-ash{color:var(--ash)}.text-mist{color:var(--mist)}.text-teal{color:var(--teal)}.text-purple{color:var(--purple)}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-amber{color:var(--amber)}
/* Alignment — M-24: logical */
.text-start{text-align:start}.text-end{text-align:end}.text-center{text-align:center}


/* ── Layout ─────────────────────────────────────── */
.container{max-inline-size:1200px;margin-inline:auto;padding-inline:var(--space-5)}
.container-sm{max-inline-size:800px;margin-inline:auto;padding-inline:var(--space-5)}
.container-xs{max-inline-size:560px;margin-inline:auto;padding-inline:var(--space-5)}
/* Grid */
.grid{display:grid;gap:var(--space-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(min-width:600px) and (max-width:1024px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
/* Flex */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}.gap-6{gap:var(--space-6)}
/* Spacing */
.mt-4{margin-block-start:var(--space-4)}.mt-6{margin-block-start:var(--space-6)}.mt-8{margin-block-start:var(--space-8)}.mt-12{margin-block-start:var(--space-12)}
.mb-4{margin-block-end:var(--space-4)}.mb-6{margin-block-end:var(--space-6)}.mb-8{margin-block-end:var(--space-8)}
.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}.p-8{padding:var(--space-8)}
/* Page sections */
.section{padding-block:var(--space-16)}
.section-sm{padding-block:var(--space-10)}
/* Nav */
.navbar{
  position:sticky;inset-block-start:0;z-index:100;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-block-end:1px solid var(--line);
  padding-block:14px;
}
[data-theme="dark"] .navbar,[data-theme="system"] .navbar{
  background:rgba(26,26,26,.92);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);max-inline-size:1200px;margin-inline:auto;padding-inline:var(--space-5)}
.nav-logo{font-family:'Outfit','Tajawal',sans-serif;font-weight:700;font-size:17px;letter-spacing:-0.3px;color:var(--ink);white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:var(--space-1)}
.nav-link{font-size:14px;font-weight:500;color:var(--ash);padding:7px 12px;border-radius:10px;transition:color var(--t-base),background var(--t-base);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--ink);background:var(--paper)}
.nav-actions{display:flex;align-items:center;gap:var(--space-2)}
@media(max-width:768px){.nav-links{display:none}}
/* Footer */
.footer{background:var(--white);border-block-start:1px solid var(--line);padding-block:var(--space-12)}
/* Divider */
.divider{block-size:1px;background:var(--line);margin-block:var(--space-6)}
/* Visibility */
.hidden{display:none!important}
.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ── Buttons ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-btn);padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:all var(--t-base);border:none;text-decoration:none;white-space:nowrap;font-family:inherit;line-height:1}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:10px}
.btn-lg{padding:14px 28px;font-size:16px;border-radius:16px}
.btn-xl{padding:18px 36px;font-size:17px;border-radius:18px}
.btn-full{inline-size:100%}
.btn-primary{background:linear-gradient(135deg,#141414 0%,#222 50%,#141414 100%);border:1px solid rgba(180,180,180,.35);color:#D8D8D8}
.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#222,#2E2E2E);color:#E8E8E8}
.btn-teal{background:linear-gradient(135deg,#0D9488,#0f766e);color:#fff;border:none}
.btn-teal:hover:not(:disabled){background:linear-gradient(135deg,#0f766e,#115e59);transform:translateY(-1px);box-shadow:0 4px 12px rgba(13,148,136,.25)}
.btn-outline{background:var(--white);border:1px solid var(--line);color:var(--ink)}
.btn-outline:hover:not(:disabled){border-color:var(--ash);background:var(--paper)}
.btn-ghost{background:none;border:none;color:var(--ash);padding:8px 14px}
.btn-ghost:hover:not(:disabled){color:var(--ink);background:var(--paper)}
.btn-danger{background:#fff0f0;border:1px solid #fca5a5;color:#b91c1c}
.btn-danger:hover:not(:disabled){background:#fee2e2}
.btn-brand{background:linear-gradient(135deg,#0D9488,#7C3AED);color:#fff;border:none}
.btn-brand:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px rgba(13,148,136,.3)}
.btn-loading{position:relative;pointer-events:none}
/* ── Cards ─────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--space-6);transition:border-color var(--t-base),box-shadow var(--t-base)}
.card-sm{padding:var(--space-4)}
.card-lg{padding:var(--space-8)}
.card.hoverable:hover{border-color:var(--ash);box-shadow:var(--shadow-md);transform:translateY(-1px)}
/* ── Badges ─────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.badge-teal{background:#f0fdfa;color:#0f766e;border:1px solid #5eead4}
.badge-purple{background:#faf5ff;color:#6b21a8;border:1px solid #d8b4fe}
.badge-green{background:#f0fdf4;color:#15803d;border:1px solid #86efac}
.badge-amber{background:#fffbeb;color:#92400e;border:1px solid #fcd34d}
.badge-red{background:#fff0f0;color:#b91c1c;border:1px solid #fca5a5}
.badge-blue{background:#eff6ff;color:#1d4ed8;border:1px solid #93c5fd}
.badge-gray{background:var(--paper);color:var(--ash);border:1px solid var(--line)}
/* ── Forms ─────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-block-end:var(--space-4)}
.form-label{font-size:13px;font-weight:600;color:var(--ink)}
.form-label.required::after{content:" *";color:var(--red)}
.form-input,.form-select,.form-textarea{
  background:var(--white);border:1px solid var(--line);border-radius:12px;
  padding:11px 14px;font-size:14px;color:var(--ink);
  transition:border-color var(--t-base),box-shadow var(--t-base);
  inline-size:100%;outline:none;font-family:inherit;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,148,136,.12)}
.form-input:disabled,.form-select:disabled,.form-textarea:disabled{background:var(--paper);color:var(--mist);cursor:not-allowed}
.form-input::placeholder,.form-textarea::placeholder{color:var(--mist)}
.form-input.error,.form-select.error,.form-textarea.error{border-color:var(--red)}
.form-hint{font-size:12px;color:var(--ash)}
.form-error{font-size:12px;color:var(--red)}
.form-textarea{resize:vertical;min-block-size:100px;line-height:1.6}
/* ── Modal ─────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:var(--space-5)}
.modal{background:var(--white);border-radius:var(--r-card);padding:var(--space-8);max-inline-size:560px;inline-size:100%;box-shadow:var(--shadow-xl);position:relative}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-block-end:var(--space-5);padding-block-end:var(--space-4);border-block-end:1px solid var(--line)}
.modal-title{font-size:18px;font-weight:700;color:var(--ink)}
.modal-close{background:none;border:none;cursor:pointer;color:var(--ash);padding:4px;border-radius:8px;font-size:20px;line-height:1}
.modal-close:hover{color:var(--ink);background:var(--paper)}
/* ── Tabs ─────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-block-end:2px solid var(--line);margin-block-end:var(--space-6)}
.tab{padding:10px 16px;font-size:14px;font-weight:500;color:var(--ash);cursor:pointer;border:none;background:none;border-block-end:2px solid transparent;margin-block-end:-2px;transition:color var(--t-base),border-color var(--t-base)}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--teal);border-block-end-color:var(--teal);font-weight:600}
/* ── Toast ─────────────────────────────────────── */
.toast-container{position:fixed;inset-block-end:var(--space-5);inset-inline-end:var(--space-5);z-index:300;display:flex;flex-direction:column;gap:var(--space-2);max-inline-size:360px}
.toast{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--white);border:1px solid var(--line);border-radius:14px;padding:var(--space-4);box-shadow:var(--shadow-lg);animation:toast-in var(--t-base) ease}
.toast-icon{flex-shrink:0;font-size:18px}
.toast-body{flex:1;min-inline-size:0}
.toast-title{font-size:14px;font-weight:600;color:var(--ink)}
.toast-msg{font-size:13px;color:var(--ash);margin-block-start:2px}
.toast-close{background:none;border:none;cursor:pointer;color:var(--mist);font-size:16px;flex-shrink:0}
.toast-success{border-inline-start:3px solid var(--green)}
.toast-error{border-inline-start:3px solid var(--red)}
.toast-warning{border-inline-start:3px solid var(--amber)}
/* ── Tables ─────────────────────────────────────── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{inline-size:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:start;font-weight:600;color:var(--ash);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;border-block-end:1px solid var(--line);white-space:nowrap}
.table td{padding:12px 14px;border-block-end:1px solid var(--line);color:var(--ink);vertical-align:middle}
.table tbody tr:hover{background:var(--paper)}
/* ── Upload Zone ─────────────────────────────────── */
.upload-zone{border:2px dashed var(--line);border-radius:18px;padding:var(--space-12) var(--space-8);text-align:center;cursor:pointer;transition:all var(--t-base);background:var(--paper)}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--teal);background:#f0fdfa}
.upload-zone-icon{font-size:48px;margin-block-end:var(--space-4);opacity:.5}
.upload-zone-title{font-size:16px;font-weight:600;color:var(--ink);margin-block-end:var(--space-2)}
.upload-zone-hint{font-size:13px;color:var(--ash)}
/* ── Progress Bar ─────────────────────────────────── */
.progress-bar{block-size:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.progress-fill{block-size:100%;background:linear-gradient(90deg,var(--teal),var(--purple));border-radius:var(--r-pill);transition:inline-size var(--t-slow)}


/* ── Art Card ─────────────────────────────────────── */
.art-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 24px;transition:all var(--t-base);cursor:pointer;position:relative;overflow:hidden}
.art-card::before{content:'';position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:100%;block-size:4px;background:var(--art-color,var(--teal));opacity:.6}
.art-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:var(--art-color,var(--teal))}
.art-card-icon{inline-size:56px;block-size:56px;border-radius:16px;background:color-mix(in srgb,var(--art-color,var(--teal)) 12%,var(--white));color:var(--art-color,var(--teal));display:flex;align-items:center;justify-content:center;margin-block-end:20px}
/* fallback for color-mix */
@supports not (background:color-mix(in srgb,red 10%,white)){
  .art-card-icon{background:var(--paper)}
}
.art-card-name{font-size:17px;font-weight:700;color:var(--ink);margin-block-end:8px}
.art-card-desc{font-size:14px;color:var(--ash);line-height:1.6}
.art-card.phased::after{content:attr(data-phased-label);position:absolute;inset-block-end:12px;inset-inline-end:12px;font-size:11px;background:var(--amber);color:#fff;padding:2px 8px;border-radius:var(--r-pill);font-weight:600}
/* ── Skill Meter ─────────────────────────────────── */
.skill-meter{display:flex;align-items:center;gap:16px;padding:16px 0;border-block-end:1px solid var(--line)}
.skill-meter-info{flex:1;min-inline-size:0}
.skill-meter-name{font-size:14px;font-weight:600;color:var(--ink);margin-block-end:4px}
.skill-meter-desc{font-size:12px;color:var(--ash)}
.skill-meter-track{inline-size:160px;block-size:6px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;flex-shrink:0}
.skill-meter-fill{block-size:100%;background:linear-gradient(90deg,var(--teal),var(--purple));border-radius:var(--r-pill);transition:inline-size .6s ease-out}
.skill-meter-value{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;color:var(--ink);min-inline-size:48px;text-align:end}
.skill-meter-value small{font-size:12px;color:var(--mist);font-weight:400;margin-inline-start:2px}
@media(max-width:600px){.skill-meter{flex-wrap:wrap}.skill-meter-track{inline-size:100%}}
/* ── Score Dots ─────────────────────────────────── */
.score-dots{display:inline-flex;gap:4px;align-items:center}
.score-dot{inline-size:12px;block-size:12px;border-radius:50%;border:1.5px solid var(--line);background:transparent;transition:all var(--t-base)}
.score-dot.filled{background:var(--score-color,var(--teal));border-color:var(--score-color,var(--teal))}
/* ── Rubric Card ─────────────────────────────────── */
.rubric-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:var(--space-5);margin-block-end:var(--space-3)}
.rubric-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);margin-block-end:var(--space-3)}
.rubric-card-title{font-size:14px;font-weight:600;color:var(--ink)}
.rubric-card-code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ash);background:var(--paper);padding:2px 6px;border-radius:4px}
.rubric-card-feedback{font-size:13px;color:var(--ash);line-height:1.6;margin-block-start:var(--space-3);padding-block-start:var(--space-3);border-block-start:1px solid var(--line)}
.rubric-card.score-1{border-inline-start:3px solid var(--score-1)}
.rubric-card.score-2{border-inline-start:3px solid var(--score-2)}
.rubric-card.score-3{border-inline-start:3px solid var(--score-3)}
.rubric-card.score-4{border-inline-start:3px solid var(--score-4)}
.rubric-card.score-5{border-inline-start:3px solid var(--score-5)}
/* ── Evidence Highlight ─────────────────────────── */
.evidence-highlight{background:linear-gradient(135deg,rgba(13,148,136,.15),rgba(124,58,237,.1));border-block-end:2px solid var(--teal);cursor:pointer;border-radius:2px;transition:background var(--t-base)}
.evidence-highlight:hover{background:linear-gradient(135deg,rgba(13,148,136,.25),rgba(124,58,237,.2))}
/* ── Compare Box ─────────────────────────────────── */
.compare-box{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--space-5);align-items:center}
.compare-box-side{background:var(--paper);border-radius:var(--r-card);padding:var(--space-5)}
.compare-box-before{border-inline-start:3px solid var(--ash)}
.compare-box-after{border-inline-start:3px solid var(--teal)}
.compare-box-arrow{font-size:24px;color:var(--teal);text-align:center}
.compare-box-score{font-family:'Outfit',sans-serif;font-size:32px;font-weight:700}
.compare-box-delta{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;color:var(--green)}
/* ── Streak Flame ─────────────────────────────────── */
.streak-flame{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fff7ed,#fffbeb);border:1px solid #fed7aa;border-radius:var(--r-pill);padding:6px 14px}
.streak-count{font-family:'Outfit',sans-serif;font-size:20px;font-weight:700;color:#ea580c}
.streak-label{font-size:13px;color:#92400e}
/* ── Confidence Bar ─────────────────────────────── */
.confidence-bar{display:flex;align-items:center;gap:var(--space-3)}
.confidence-bar-track{flex:1;block-size:4px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.confidence-bar-fill{block-size:100%;background:linear-gradient(90deg,var(--amber),var(--green));border-radius:var(--r-pill)}
.confidence-bar-label{font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;color:var(--ash);min-inline-size:36px;text-align:end}
/* ── Lab Launcher ─────────────────────────────────── */
.lab-launcher{display:flex;align-items:center;gap:var(--space-4);background:linear-gradient(135deg,var(--white),var(--paper));border:1px solid var(--line);border-radius:var(--r-card);padding:var(--space-5);cursor:pointer;transition:all var(--t-base)}
.lab-launcher:hover{border-color:var(--teal);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.lab-launcher-icon{inline-size:48px;block-size:48px;border-radius:14px;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.lab-launcher-info{flex:1}
.lab-launcher-title{font-size:15px;font-weight:700;color:var(--ink)}
.lab-launcher-desc{font-size:13px;color:var(--ash);margin-block-start:2px}
/* ── Identity Card Display ─────────────────────── */
.identity-card{background:var(--white);border-radius:24px;padding:var(--space-8);box-shadow:var(--shadow-xl);position:relative;overflow:hidden}
.identity-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(13,148,136,.04),rgba(124,58,237,.04))}
.identity-card-type{font-family:'Markazi Text','Tajawal',serif;font-size:clamp(28px,5vw,48px);font-weight:500;line-height:1.1;color:var(--ink);margin-block-end:var(--space-3)}
.identity-card-art{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--paper);border-radius:var(--r-pill);padding:6px 16px;margin-block-end:var(--space-6)}


/* ── Utilities ─────────────────────────────────── */
.w-full{inline-size:100%}.h-full{block-size:100%}
.rounded{border-radius:var(--r-btn)}.rounded-full{border-radius:var(--r-pill)}.rounded-card{border-radius:var(--r-card)}
.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}
.bg-white{background:var(--white)}.bg-paper{background:var(--paper)}.bg-ivory{background:var(--ivory)}
.border{border:1px solid var(--line)}.border-teal{border-color:var(--teal)}
.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}
.cursor-pointer{cursor:pointer}
.opacity-50{opacity:.5}
/* Empty state */
.empty-state{text-align:center;padding:var(--space-16) var(--space-8);color:var(--ash)}
.empty-state-icon{font-size:48px;margin-block-end:var(--space-4);opacity:.4}
.empty-state-title{font-size:18px;font-weight:600;color:var(--ink);margin-block-end:var(--space-2)}
.empty-state-desc{font-size:14px;color:var(--ash);max-inline-size:400px;margin-inline:auto}
/* Loading skeleton */
.skeleton{background:linear-gradient(90deg,var(--paper) 25%,var(--line) 50%,var(--paper) 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:8px}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Page transition badge for phased arts — DECISIONS #019 */
.phased-badge{display:inline-flex;align-items:center;gap:6px;background:#fffbeb;border:1px solid #fcd34d;color:#92400e;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--r-pill)}


/* ── Animations ─────────────────────────────────── */
/* Respect prefers-reduced-motion — M-T08 */
@media(prefers-reduced-motion:no-preference){
  @keyframes art-reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
  @keyframes score-count-up{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes subtle-glow{0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,0)}50%{box-shadow:0 0 0 6px rgba(13,148,136,.15)}}
  @keyframes toast-in{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes slide-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  .animate-reveal{animation:art-reveal .4s ease both}
  .animate-score{animation:score-count-up .3s ease both}
  .animate-fade{animation:fade-in .3s ease both}
  .animate-slide-up{animation:slide-up .4s ease both}
  [data-stagger]>*:nth-child(1){animation-delay:.05s}
  [data-stagger]>*:nth-child(2){animation-delay:.1s}
  [data-stagger]>*:nth-child(3){animation-delay:.15s}
  [data-stagger]>*:nth-child(4){animation-delay:.2s}
  [data-stagger]>*:nth-child(5){animation-delay:.25s}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}