/* UX refresh: clear hierarchy, thumb-friendly controls, accessible contrast */
:root{--ux-ink:#102a30;--ux-muted:#587078;--ux-line:#d8e5e8;--ux-card:#fff;--ux-bg:#f4f8f9}
body{background:var(--ux-bg)}
header{padding:22px 18px 32px}
header .brand{font-weight:850}
header .sub{max-width:700px}
main{max-width:1040px}
.nav{position:sticky;top:0;z-index:20;margin-inline:-2px;padding:10px 2px 12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid #d8e5e877}
.tab{flex:0 0 auto}
.panel{animation:ux-enter .18s ease-out}
@keyframes ux-enter{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.ux-hero{position:relative;overflow:hidden;margin:2px 0 14px;padding:clamp(20px,4vw,34px);border-radius:24px;background:linear-gradient(130deg,#0b625d,#0f766e 52%,#164e63);color:white;box-shadow:0 12px 30px #0f766e20}
.ux-hero:after{content:"";position:absolute;width:190px;height:190px;right:-55px;bottom:-105px;border:1px solid #ffffff30;border-radius:50%;box-shadow:0 0 0 24px #ffffff0a,0 0 0 48px #ffffff08;pointer-events:none}
.ux-eyebrow{font-size:.8rem;font-weight:800;opacity:.9;letter-spacing:.02em}
.ux-hero h1{position:relative;z-index:1;font-size:clamp(1.45rem,4vw,2.15rem);line-height:1.35;margin:10px 0 8px;max-width:680px}
.ux-hero p{position:relative;z-index:1;line-height:1.8;max-width:680px;margin:0 0 14px;color:#e5f5f3}
.ux-prototype{display:inline-flex;border:1px solid #ffffff55;background:#ffffff14;padding:5px 10px;border-radius:999px;font-size:.78rem;font-weight:750}
.ux-safety{display:flex;gap:12px;align-items:flex-start;background:#fff8eb;border:1px solid #f2d6a8;color:#70410c;border-radius:17px;padding:14px 16px;margin:0 0 18px}
.ux-safety-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:#f5dfb7;font-weight:900}
.ux-safety h2{font-size:.98rem;margin:0 0 3px}.ux-safety p{font-size:.88rem;line-height:1.75;margin:0}
.ux-overview h2,.ux-section-head h2{font-size:1.1rem;margin:0 0 10px}
.ux-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:20px}
.ux-stat{display:flex;flex-direction:column;gap:6px;min-width:0;padding:15px;border:1px solid var(--line);border-radius:17px;background:var(--card);box-shadow:0 4px 15px #102a3008}
.ux-stat span{font-size:.82rem;color:var(--ux-muted);font-weight:700}.ux-stat strong{font-size:1.75rem;line-height:1.2;font-variant-numeric:tabular-nums}
.ux-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
.ux-action{display:flex;align-items:center;gap:12px;text-align:start;width:100%;min-width:0;min-height:94px;padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ux-ink);font:inherit;cursor:pointer;box-shadow:0 4px 16px #102a3008;transition:transform .15s,border-color .15s,box-shadow .15s}
.ux-action:hover{transform:translateY(-2px);border-color:#75b9b0;box-shadow:0 8px 20px #102a3010}
.ux-action-primary{border-color:#8ac9bf;background:linear-gradient(145deg,#effbf8,#fff)}
.ux-action-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:#e2f4f0;color:#0f766e;font-size:1.4rem;font-weight:800}
.ux-action b,.ux-action small{display:block}.ux-action b{font-size:.98rem;line-height:1.45}.ux-action small{font-size:.78rem;line-height:1.6;color:var(--ux-muted);margin-top:4px}.ux-arrow{margin-inline-start:auto;color:#0f766e;font-size:1.1rem}
.ux-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.ux-section-head h2{margin:0}
.ux-link{border:0;background:transparent;color:#0f766e;font:inherit;font-size:.85rem;font-weight:800;padding:8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ux-record{padding:14px 15px;margin:0 0 9px;border:1px solid var(--line);border-radius:15px;background:var(--card)}
.ux-record-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.ux-record-top b{overflow-wrap:anywhere}.ux-record p{margin:7px 0;color:var(--ux-muted);font-size:.9rem;line-height:1.7;overflow-wrap:anywhere}.ux-record small{color:var(--ux-muted)}
.ux-status{display:inline-block;flex:0 0 auto;max-width:46%;padding:3px 8px;border-radius:999px;background:#e7f5f2;color:#115e59;font-size:.72rem;font-weight:800;overflow-wrap:anywhere}
.ux-empty{text-align:center;padding:25px 18px;border:1px dashed var(--ux-line);border-radius:18px;background:var(--ux-card);color:var(--ux-muted)}.ux-empty>span{font-size:2rem;color:#0f766e}.ux-empty p{margin:8px auto 14px;max-width:360px}
:focus-visible{outline:3px solid #0d948855!important;outline-offset:3px!important}
:root[data-theme="dark"] body{background:#101a1e}
:root[data-theme="dark"] .nav{background:#101a1eeF;border-color:#33474d}
:root[data-theme="dark"] .ux-safety{background:#382b19;border-color:#795c2a;color:#ffe7b8}
:root[data-theme="dark"] .ux-safety-icon{background:#6a4a1b;color:#fff0c7}
:root[data-theme="dark"] .ux-stat,:root[data-theme="dark"] .ux-action,:root[data-theme="dark"] .ux-record,:root[data-theme="dark"] .ux-empty{background:#17262b;color:#edf5f6;border-color:#33474d}
:root[data-theme="dark"] .ux-action-primary{background:linear-gradient(145deg,#153b36,#17262b);border-color:#28675f}
:root[data-theme="dark"] .ux-action-icon{background:#214b46;color:#b9f1e8}
:root[data-theme="dark"] .ux-stat span,:root[data-theme="dark"] .ux-action small,:root[data-theme="dark"] .ux-record p,:root[data-theme="dark"] .ux-record small{color:#b5c6ca}
:root[data-theme="dark"] .ux-status{background:#214b46;color:#d5fff6}
:root[data-theme="dark"] .ux-link{color:#6ee7d8}
@media(max-width:560px){main{padding-inline:10px}.ux-actions{grid-template-columns:1fr;gap:9px}.ux-action{min-height:82px;padding:13px}.ux-stats{gap:7px}.ux-stat{padding:12px 9px;border-radius:14px}.ux-stat span{font-size:.72rem;line-height:1.45}.ux-stat strong{font-size:1.5rem}.ux-safety{padding:12px}.ux-record-top{flex-direction:column;gap:5px}.ux-status{max-width:100%}.ux-hero{border-radius:20px}.nav{top:0}}
@media(prefers-reduced-motion:reduce){.panel{animation:none}.ux-action{transition:none}}
@media print{.ux-hero,.ux-safety,.ux-overview,.ux-actions,.ux-recent,.nav{display:none!important}}


/* Five-item mobile bottom navigation with safe-area spacing. */
.bottom-navigation{display:flex;align-items:stretch;justify-content:space-around;gap:4px}
.bottom-tab{display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;padding:7px 3px;border-radius:13px;font-size:.72rem;font-weight:750;line-height:1.2;white-space:normal}
.bottom-tab-icon{font-size:1.15rem;line-height:1.2}
.bottom-tab-label{overflow-wrap:anywhere}
#ai{scroll-margin-top:20px}
@media(max-width:700px){
  main{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .bottom-navigation{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:1000;margin:0;padding:7px max(8px,env(safe-area-inset-left)) calc(7px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(16px);box-shadow:0 -6px 24px #102a3010}
  .bottom-navigation .tab{border:0;background:transparent;color:var(--muted)}
  .bottom-navigation .tab.active{background:var(--soft);color:var(--brand)}
  :root[data-theme="dark"] .bottom-navigation{background:#142126f2;border-color:#33474d}
  :root[data-theme="dark"] .bottom-navigation .tab.active{background:#1d3d3a;color:#a8e5d9}
}

/* App-shell redesign: real home screen and persistent thumb navigation */
:root{--app-nav-height:76px}
body{padding-bottom:calc(var(--app-nav-height) + env(safe-area-inset-bottom,0px))}
header{padding-bottom:42px}
main{padding-bottom:20px}
.nav.bottom-navigation{position:fixed;z-index:1000;inset:auto 0 0;margin:0;padding:8px 7px calc(8px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;overflow:visible;border:1px solid #d7e3e6;border-bottom:0;border-radius:18px 18px 0 0;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);box-shadow:0 -8px 28px #102a3014}
.nav.bottom-navigation .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:58px;padding:6px 2px;border:0;border-radius:12px;background:transparent;color:#587078;box-shadow:none;white-space:normal;font-size:.68rem;line-height:1.25}
.nav.bottom-navigation .tab.active{background:#e4f5f1;color:#0f766e;font-weight:850}
.bottom-tab-icon{display:block;font-size:1.2rem;line-height:1.2;font-weight:800}
.bottom-tab-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#homeDashboard.panel.active{display:block}
#homeDashboard .ux-hero{margin-top:3px}
#homeDashboard .ux-actions{margin-top:4px}
#diagnose.panel.active{display:block}
#diagnose #ai{margin-top:16px}
#diagnose #ai .card{border-color:#a8d9d0}
#diagnose #ai .card:before{content:"مساعد الذكاء الاصطناعي";display:block;margin-bottom:10px;color:#0f766e;font-size:.9rem;font-weight:850}
@media(min-width:760px){.nav.bottom-navigation{left:50%;right:auto;transform:translateX(-50%);width:min(680px,calc(100% - 32px));bottom:12px;border:1px solid #d7e3e6;border-radius:20px;padding:8px;box-shadow:0 8px 32px #102a3020}body{padding-bottom:32px}}
@media(max-width:380px){.nav.bottom-navigation{gap:1px;padding-inline:3px}.nav.bottom-navigation .tab{font-size:.62rem}.bottom-tab-icon{font-size:1.05rem}}
:root[data-theme="dark"] .nav.bottom-navigation{background:rgba(17,31,36,.97);border-color:#33474d}
:root[data-theme="dark"] .nav.bottom-navigation .tab{color:#b5c6ca}
:root[data-theme="dark"] .nav.bottom-navigation .tab.active{background:#214b46;color:#b9f1e8}


/* Industrial visual system refinement — presentation-only layer */
:root{
  --surface-0:#f3f7f8;
  --surface-1:#ffffff;
  --surface-2:#edf5f5;
  --text-primary:#102a30;
  --text-secondary:#526c73;
  --border-subtle:#d6e3e6;
  --accent:#0f766e;
  --accent-strong:#115e59;
  --focus-ring:#14b8a6;
}
body{
  color:var(--text-primary);
  background-color:var(--surface-0);
  background-image:radial-gradient(ellipse at 95% 0%,rgba(20,184,166,.075),transparent 34%);
}
header{
  box-shadow:0 8px 30px rgba(16,42,48,.10);
}
header .brand{
  letter-spacing:-.035em;
  text-wrap:balance;
}
header .sub{color:rgba(255,255,255,.9)}
main{isolation:isolate}
.nav.bottom-navigation{
  border-color:rgba(148,171,177,.55);
  box-shadow:0 -8px 30px rgba(16,42,48,.12);
}
.nav.bottom-navigation .tab{
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.nav.bottom-navigation .tab:active{transform:scale(.97)}
.panel.active{animation:ux-enter .18s ease-out}
.card,.record,#recordFilters,#draftPanel{
  border-color:var(--border-subtle);
  box-shadow:0 5px 18px rgba(16,42,48,.045),0 1px 2px rgba(16,42,48,.035);
}
.card h2{letter-spacing:-.012em;text-wrap:balance}
input,select,textarea{
  border-color:#c3d4d8;
  box-shadow:inset 0 1px 1px rgba(16,42,48,.025);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(20,184,166,.24)!important;
  border-color:var(--focus-ring)!important;
  box-shadow:0 0 0 1px var(--focus-ring);
}
.btn{
  background-image:linear-gradient(180deg,rgba(255,255,255,.07),transparent);
  letter-spacing:.005em;
}
.btn.secondary{background:#edf3f4;color:#18383e}
.btn.danger{background:#fff0ef;color:#9f2424;border:1px solid #f2c8c4}
.notice{box-shadow:0 1px 2px rgba(16,42,48,.025)}
.result{box-shadow:0 5px 16px rgba(15,118,110,.06)}
.pill{border:1px solid rgba(148,171,177,.25)}
.ux-hero{
  box-shadow:0 16px 38px rgba(11,98,93,.18);
  background-image:linear-gradient(125deg,#0a5552 0%,#0f766e 48%,#164e63 100%);
}
.ux-stat,.ux-action,.ux-record,.ux-empty{
  box-shadow:0 5px 18px rgba(16,42,48,.045);
}
.ux-stat strong{letter-spacing:-.04em}
.ux-action:focus-visible,.ux-link:focus-visible{
  outline:3px solid rgba(20,184,166,.5)!important;
  outline-offset:3px!important;
}
.ux-action-primary{background:linear-gradient(145deg,#e9f8f4,#fff)}
.ux-status{border:1px solid rgba(15,118,110,.12)}
#recordFilters,#draftPanel{background:var(--surface-2)}
.author{border-top-color:rgba(15,118,110,.35)}
:root[data-theme="dark"]{
  --surface-0:#0d171b;
  --surface-1:#17262b;
  --surface-2:#142429;
  --text-primary:#edf5f6;
  --text-secondary:#b5c6ca;
  --border-subtle:#33474d;
  --accent:#55c9b8;
  --accent-strong:#8de3d5;
  --focus-ring:#5eead4;
}
:root[data-theme="dark"] body{
  color:var(--text-primary);
  background-color:var(--surface-0);
  background-image:radial-gradient(ellipse at 95% 0%,rgba(20,184,166,.09),transparent 35%);
}
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .record,
:root[data-theme="dark"] #recordFilters,
:root[data-theme="dark"] #draftPanel{
  background:var(--surface-1);
  border-color:var(--border-subtle);
  color:var(--text-primary);
  box-shadow:0 5px 20px rgba(0,0,0,.12);
}
:root[data-theme="dark"] #recordFilters,
:root[data-theme="dark"] #draftPanel{background:var(--surface-2)}
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea{
  background:#0e1c20;
  color:var(--text-primary);
  border-color:#4a6269;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder{color:#9aafb5}
:root[data-theme="dark"] .btn.secondary{
  background:#263a40;
  color:#edf5f6;
  border-color:#41575e;
}
:root[data-theme="dark"] .btn.danger{
  background:#482626;
  color:#ffd9d5;
  border-color:#78413c;
}
:root[data-theme="dark"] .result{
  background:#173a37;
  border-color:#28675f;
  color:#edf5f6;
}
:root[data-theme="dark"] .pill{
  background:#263a40;
  color:#d7e9eb;
  border-color:#41575e;
}
:root[data-theme="dark"] .ux-action-primary{
  background:linear-gradient(145deg,#153b36,#17262b);
}
:root[data-theme="dark"] .ux-status{
  border-color:#37665f;
}
:root[data-theme="dark"] .author{border-top-color:#37665f}
@media(min-width:900px){
  main{max-width:1080px}
  .panel .card{border-radius:22px}
  .ux-hero{padding:34px}
}
@media(max-width:560px){
  .ux-hero{box-shadow:0 10px 26px rgba(11,98,93,.16)}
  .ux-stat,.ux-action,.ux-record{box-shadow:0 3px 12px rgba(16,42,48,.045)}
  .card h2{font-size:1.04rem}
}
@media(prefers-reduced-motion:reduce){
  .panel.active{animation:none}
  .nav.bottom-navigation .tab:active{transform:none}
}