/* =====================================================================
   ui-upgrade.css  —  ارتقای ظاهر (بعد از style.css لود می‌شود)
   ۱) سوییچ انیمیشنی روز/شب
   ۲) سایدبار جدید (کارت شناور، پروفایل، جستجو، نشانگر تب فعال)
   ۳) جابه‌جایی نرم بین تب‌ها
   ۴) دکمه‌های هاور درخشان
   ۵) دو تم جدید: Claymorphism (clay) و Neumorphism (neo)
   همه‌چیز با متغیرهای موجود پروژه (--primary-rgb, --surface, ...) کار می‌کند،
   پس با همه‌ی تم‌های رنگی و هر دو حالت روشن/تیره هماهنگ می‌ماند.
   ===================================================================== */

:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------------------------------------------------------------
   ۱) سوییچ روز/شب
   --------------------------------------------------------------- */
.dn-switch{position:relative;flex:none;width:68px;height:34px;padding:0;border:0;border-radius:999px;
  background:transparent;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;}
.dn-track{position:absolute;inset:0;border-radius:inherit;overflow:hidden;direction:ltr;
  background:linear-gradient(135deg,#8FD6FF 0%,#4FA9FF 100%);
  box-shadow:inset 0 2px 7px rgba(0,40,110,.35), 0 0 0 1px rgba(255,255,255,.35), 0 4px 14px rgba(60,140,255,.35);
  transition:background .6s ease, box-shadow .6s ease;}
html[data-mode="dark"] .dn-track{
  background:linear-gradient(135deg,#232A5C 0%,#0B0F2B 100%);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6), 0 0 0 1px rgba(160,175,255,.25), 0 4px 16px rgba(30,40,120,.45);}
.dn-clouds,.dn-stars{position:absolute;inset:0;transition:opacity .5s ease, transform .6s var(--ease-out);}
.dn-clouds{
  background:
    radial-gradient(circle at 70% 68%,#fff 0 6px,transparent 6.5px),
    radial-gradient(circle at 80% 58%,#fff 0 8px,transparent 8.5px),
    radial-gradient(circle at 90% 72%,#fff 0 6px,transparent 6.5px),
    radial-gradient(ellipse at 80% 80%,#fff 0 12px,transparent 13px);
  opacity:.95;}
.dn-stars{
  background:
    radial-gradient(circle at 18% 30%,#fff 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 30% 68%,#fff 0 1px,transparent 1.6px),
    radial-gradient(circle at 44% 24%,#fff 0 1.4px,transparent 2px),
    radial-gradient(circle at 12% 74%,#cfd6ff 0 1px,transparent 1.6px),
    radial-gradient(circle at 52% 62%,#fff 0 .9px,transparent 1.5px);
  opacity:0;transform:translateX(14px);}
html[data-mode="dark"] .dn-clouds{opacity:0;transform:translateX(-18px);}
html[data-mode="dark"] .dn-stars{opacity:1;transform:none;animation:dnTwinkle 3.2s ease-in-out infinite;}
@keyframes dnTwinkle{0%,100%{filter:brightness(1);}50%{filter:brightness(1.6);}}
.dn-thumb{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFE98A,#FFC42E 70%);
  box-shadow:0 0 0 3px rgba(255,205,70,.35), 0 0 16px rgba(255,196,46,.95), 0 2px 5px rgba(0,0,0,.25);
  transition:transform .6s cubic-bezier(.68,-.4,.27,1.4), background .5s ease, box-shadow .5s ease, width .2s ease;}
html[data-mode="dark"] .dn-thumb{transform:translateX(34px);
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#CBD2F5 75%);
  box-shadow:0 0 0 3px rgba(190,200,255,.18), 0 0 14px rgba(190,200,255,.55), 0 2px 5px rgba(0,0,0,.5);}
.dn-crater{position:absolute;border-radius:50%;background:rgba(120,130,190,.35);opacity:0;transform:scale(.3);
  transition:opacity .4s ease .15s, transform .5s var(--ease-spring) .15s;}
.dn-crater.c1{width:8px;height:8px;top:5px;left:14px;}
.dn-crater.c2{width:5px;height:5px;top:15px;left:6px;}
.dn-crater.c3{width:4px;height:4px;top:17px;left:17px;}
html[data-mode="dark"] .dn-crater{opacity:1;transform:scale(1);}
.dn-switch:hover .dn-thumb{filter:brightness(1.06);}
.dn-switch:active .dn-thumb{width:33px;}
html[data-mode="dark"] .dn-switch:active .dn-thumb{transform:translateX(29px);}
.dn-switch:focus-visible{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.55);}
.dn-switch.dn-sm{width:54px;height:28px;}
.dn-switch.dn-sm .dn-thumb{width:22px;height:22px;top:3px;left:3px;}
html[data-mode="dark"] .dn-switch.dn-sm .dn-thumb{transform:translateX(26px);}

/* موج دایره‌ای تعویض حالت (View Transitions) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:2;}
/* مسیر جایگزین برای مرورگرهایی که View Transitions ندارند: محو نرم رنگ‌ها */
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,fill .45s ease !important;}

.login-mode-corner{position:fixed;top:16px;left:16px;z-index:20;}

/* ---------------------------------------------------------------
   ۲) سایدبار جدید (کارت شناور)
   --------------------------------------------------------------- */
.topheader{align-items:center;}
.topheader-title{flex:1;min-width:0;}
.topheader h1.swap,.topheader .sub.swap{animation:titleSwap .55s var(--ease-out) both;}
.topheader .sub.swap{animation-delay:.05s;}
@keyframes titleSwap{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

.sidebar{
  width:300px;max-width:calc(100vw - 24px);
  top:12px;bottom:12px;height:auto;inset-inline-start:12px;
  padding:18px 14px 14px;overflow:hidden;
  border:1px solid var(--border);border-radius:28px;
  background:linear-gradient(180deg,rgba(var(--primary-rgb),.13) 0%,transparent 34%),var(--sidebar-bg);
  box-shadow:0 34px 70px -22px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03) inset, 0 1px 0 rgba(255,255,255,.07) inset;
  transform:translateX(calc(100% + 30px));
  visibility:hidden;
  transition:transform .32s cubic-bezier(.4,0,1,1), visibility 0s linear .32s;}
.sidebar.open{transform:translateX(0);visibility:visible;
  transition:transform .55s cubic-bezier(.19,1.25,.34,1), visibility 0s;}
html[data-mode="light"] .sidebar{box-shadow:0 30px 60px -24px rgba(40,50,110,.35), 0 0 0 1px rgba(255,255,255,.6) inset;}
.sidebar-overlay{background:rgba(6,9,20,.55);}

.sidebar-brand{padding:0 4px 12px;gap:10px;}
.sidebar-brand-text{font-size:13px;flex:1;min-width:0;}
.sidebar-close-btn{margin-inline-start:0;}

.sidebar-profile{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;
  padding:6px 8px 14px;cursor:pointer;border-radius:18px;transition:background .25s ease;}
.sidebar-profile:hover{background:rgba(var(--primary-rgb),.07);}
.sp-avatar{position:relative;width:72px;height:72px;border-radius:50%;padding:3px;margin-bottom:6px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  box-shadow:0 8px 24px -6px rgba(var(--primary-rgb),.65);
  transition:transform .4s var(--ease-spring);}
.sidebar-profile:hover .sp-avatar{transform:scale(1.06) rotate(-2deg);}
.sp-avatar-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--surface-raised);color:var(--ink);font-weight:800;font-size:22px;border:2px solid var(--sidebar-bg);}
.sp-dot{position:absolute;bottom:2px;inset-inline-end:2px;width:15px;height:15px;border-radius:50%;
  background:#22C55E;border:3px solid var(--sidebar-bg);box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:spPulse 2.4s ease-out infinite;}
@keyframes spPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55);}70%{box-shadow:0 0 0 9px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
.sp-name{font-size:15px;font-weight:800;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sp-role{font-size:11.5px;color:var(--text-muted);font-weight:600;}

.sidebar-search{display:flex;align-items:center;gap:9px;height:44px;padding:0 12px;margin:2px 0 12px;
  border:1px solid var(--border);border-radius:15px;background:var(--surface-alt);color:var(--text-muted);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;}
.sidebar-search:focus-within{border-color:rgba(var(--primary-rgb),.75);box-shadow:0 0 0 4px rgba(var(--primary-rgb),.16), 0 0 22px -4px rgba(var(--primary-rgb),.5);color:var(--primary);}
.sidebar-search svg{flex:none;}
.sidebar-search input[type=text]{flex:1;min-width:0;width:auto;border:0;background:transparent;box-shadow:none;padding:0;
  font-size:13px;color:var(--text);outline:none;border-radius:0;}
.sidebar-search input[type=text]:focus{box-shadow:none;border:0;}
.sidebar-search kbd{direction:ltr;font-family:var(--font);font-size:10px;font-weight:700;padding:3px 7px;border-radius:7px;
  border:1px solid var(--border);color:var(--text-muted);background:var(--surface);}

.sidebar-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;margin-inline:-14px;padding:2px 14px 8px;gap:4px;
  scrollbar-width:thin;scrollbar-color:rgba(var(--primary-rgb),.35) transparent;}
.sidebar-nav::-webkit-scrollbar{width:5px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(var(--primary-rgb),.35);border-radius:9px;}

.nav-item{position:relative;padding:11px 12px;border-radius:15px;gap:13px;font-size:13.5px;
  transition:background .3s ease, color .3s ease, box-shadow .35s ease;}
.nav-item > span:not(.nav-ic-badge):not(.nav-badge){display:inline-block;transition:transform .3s var(--ease-out);}
.nav-item:hover{background:rgba(var(--primary-rgb),.09);color:var(--ink);}
.nav-item:hover > span:not(.nav-ic-badge):not(.nav-badge){transform:translateX(-4px);}
.nav-item.active{
  background:linear-gradient(to left,rgba(var(--primary-rgb),.24),rgba(var(--primary-rgb),.05));
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(var(--primary-rgb),.34), 0 10px 22px -12px rgba(var(--primary-rgb),.7);}
/* نشانگر رنگی لبه‌ی سایدبار برای تب فعال */
.nav-item::before{content:"";position:absolute;inset-inline-start:-13px;top:50%;height:58%;width:4px;border-radius:4px 0 0 4px;
  background:var(--primary);box-shadow:0 0 14px 1px var(--primary);
  transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform .45s var(--ease-spring);}
.nav-item.active::before{transform:translateY(-50%) scaleY(1);}

/* آیکون‌ها: خطی و ساده مثل تصویر مرجع (رنگ معنایی مالی/هشدار حفظ شده) */
html .sidebar .nav-item .nav-ic-badge{width:22px;height:22px;border-radius:0;background:none !important;box-shadow:none !important;}
html .sidebar .nav-item .nav-ic-badge svg{width:20px;height:20px;color:var(--text-muted);filter:none;
  transition:color .3s ease, transform .4s var(--ease-spring);}
html .sidebar .nav-item .nav-ic-badge.money svg{color:rgba(245,166,35,.85);}
html .sidebar .nav-item .nav-ic-badge.alert svg{color:rgba(240,70,107,.85);}
html .sidebar .nav-item:hover .nav-ic-badge svg{color:var(--primary);transform:scale(1.14);}
html .sidebar .nav-item.active .nav-ic-badge svg{color:var(--primary);transform:scale(1.08);}
html .sidebar .nav-item.active .nav-ic-badge.money svg{color:var(--gold);}
html .sidebar .nav-item.active .nav-ic-badge.alert svg{color:var(--danger);}

.nav-category-header{padding:12px 12px 8px;font-size:11.5px;letter-spacing:.3px;transition:color .25s ease;}
.nav-category-caret{transition:transform .4s var(--ease-spring);}
.nav-category-items{margin-inline:-14px;padding-inline:14px;
  transition:max-height .45s var(--ease-out), opacity .3s ease;opacity:0;}
.nav-category.open .nav-category-items,
.nav-category.searching .nav-category-items{opacity:1;}
.nav-category.searching .nav-category-items{max-height:1400px;}
.nav-category.searching .nav-category-caret{opacity:.3;}
.nav-category.no-match{display:none;}
.nav-item.nav-hidden{display:none;}
.nav-empty{display:none;text-align:center;color:var(--text-muted);font-size:12.5px;padding:22px 8px;}
.nav-empty.show{display:block;animation:tabIn .35s var(--ease-out) both;}

.sidebar-footer{border-top:1px solid var(--border);margin-top:8px;padding-top:12px;}
.sidebar-footer-actions{margin-top:0;}

/* ---------------------------------------------------------------
   ۳) جابه‌جایی نرم بین تب‌ها
   --------------------------------------------------------------- */
#tabContent{position:relative;}
#tabContent.tab-leaving{opacity:0;transform:translateY(10px) scale(.994);
  transition:opacity .16s ease, transform .16s ease;}
#tabContent.tab-entering > *{animation:tabIn .62s var(--ease-out) both;}
#tabContent.tab-entering > *:nth-child(2){animation-delay:.05s;}
#tabContent.tab-entering > *:nth-child(3){animation-delay:.10s;}
#tabContent.tab-entering > *:nth-child(4){animation-delay:.15s;}
#tabContent.tab-entering > *:nth-child(5){animation-delay:.19s;}
#tabContent.tab-entering > *:nth-child(6){animation-delay:.23s;}
#tabContent.tab-entering > *:nth-child(n+7){animation-delay:.27s;}
#tabContent.tab-entering .grid-2 > *,
#tabContent.tab-entering .grid-3 > *,
#tabContent.tab-entering .grid-4 > *{animation:tabIn .6s var(--ease-out) both;}
#tabContent.tab-entering .grid-4 > *:nth-child(1),#tabContent.tab-entering .grid-3 > *:nth-child(1),#tabContent.tab-entering .grid-2 > *:nth-child(1){animation-delay:.10s;}
#tabContent.tab-entering .grid-4 > *:nth-child(2),#tabContent.tab-entering .grid-3 > *:nth-child(2),#tabContent.tab-entering .grid-2 > *:nth-child(2){animation-delay:.16s;}
#tabContent.tab-entering .grid-4 > *:nth-child(3),#tabContent.tab-entering .grid-3 > *:nth-child(3){animation-delay:.22s;}
#tabContent.tab-entering .grid-4 > *:nth-child(4){animation-delay:.28s;}
@keyframes tabIn{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}

.tab-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 20px;}
.tab-spinner{width:22px;height:22px;border-radius:50%;border:3px solid rgba(var(--primary-rgb),.22);
  border-top-color:var(--primary);animation:tabSpin .8s linear infinite;}
@keyframes tabSpin{to{transform:rotate(360deg);}}

/* ---------------------------------------------------------------
   ۴) دکمه‌های هاور درخشان (Hover Glow)
   --------------------------------------------------------------- */
.btn-primary,.btn-glow{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .35s ease, filter .3s ease;}
.btn-primary::after,.btn-glow::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.38) 50%,transparent 68%);
  transform:translateX(-130%);transition:transform .75s var(--ease-out);}
.btn-primary:hover:not(:disabled),.btn-glow:hover:not(:disabled){
  transform:translateY(-2px);filter:brightness(1.07);
  box-shadow:0 0 22px rgba(var(--primary-rgb),.85), 0 10px 30px -6px rgba(var(--primary-rgb),.55);}
.btn-primary:hover:not(:disabled)::after,.btn-glow:hover:not(:disabled)::after{transform:translateX(130%);}
.btn-primary:active:not(:disabled),.btn-glow:active:not(:disabled){transform:translateY(0) scale(.97);
  box-shadow:0 0 14px rgba(var(--primary-rgb),.7);transition-duration:.1s;}
.btn-primary:disabled::after{display:none;}
.btn-primary:focus-visible,.btn-small:focus-visible,.icon-btn:focus-visible,.hamburger-btn:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(var(--primary-rgb),.5);}

.btn-small{transition:transform .25s var(--ease-out), box-shadow .3s ease, background .2s ease, border-color .2s ease;}
.btn-small:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(var(--primary-rgb),.6), 0 0 16px rgba(var(--primary-rgb),.4);}
.btn-small:active{transform:scale(.97);}
.btn-ghost:hover{box-shadow:0 0 16px rgba(240,70,107,.4);}
.hamburger-btn:hover{box-shadow:0 0 16px rgba(var(--primary-rgb),.45);}
.card{transition:box-shadow .35s ease, transform .35s var(--ease-out), border-color .3s ease;}

/* احترام به تنظیم «کاهش حرکت» سیستم‌عامل */
@media (prefers-reduced-motion: reduce){
  .sidebar,.sidebar.open,.nav-item,.nav-item::before,.btn-primary,.btn-primary::after,.btn-small,.dn-thumb,.dn-track,
  .dn-clouds,.dn-stars,#tabContent.tab-leaving{transition-duration:.01ms !important;}
  #tabContent.tab-entering > *,#tabContent.tab-entering .grid-2 > *,#tabContent.tab-entering .grid-3 > *,
  #tabContent.tab-entering .grid-4 > *,.topheader h1.swap,.topheader .sub.swap,.sp-dot,.tab-spinner,.dn-stars{animation:none !important;}
}

/* ---------------------------------------------------------------
   موبایل
   --------------------------------------------------------------- */
@media (max-width:600px){
  .sidebar{top:8px;bottom:8px;inset-inline-start:8px;border-radius:24px;width:min(300px,calc(100vw - 16px));}
  .dn-switch{width:60px;height:30px;}
  .dn-thumb{width:24px;height:24px;}
  html[data-mode="dark"] .dn-thumb{transform:translateX(30px);}
  .sidebar-search kbd{display:none;}
}

/* =====================================================================
   ۵-الف) تم Claymorphism  (data-theme="clay")
   پاستلی، بادکنکی و نرم؛ سایه‌ی بیرونی رنگی + هایلایت و سایه‌ی داخلی
   ===================================================================== */
html[data-theme="clay"]{
  --primary-rgb:79,158,255;--primary:#4F9EFF;--primary-dark:#2F80F0;--primary-2:#2C6BF0;
  --radius:26px;
  --gold:#FFB347;--gold-deep:#F59A1F;--gold-tint:rgba(255,179,71,.20);
  --success-tint:rgba(34,197,94,.18);--danger-tint:rgba(240,70,107,.16);
}
html[data-theme="clay"][data-mode="light"]{
  --bg:#D9ECFF;--sidebar-bg:#F3F9FF;--surface:#F5FAFF;--surface-alt:#E6F1FF;--surface-raised:#FFFFFF;
  --border:rgba(110,150,215,.24);--ink:#182A4D;--ink-2:#31476F;--text:#25385E;--text-muted:#5A6F98;--placeholder:#8CA1C6;
  --shadow:0 20px 34px -16px rgba(60,110,200,.42), inset 0 -7px 14px rgba(90,140,230,.12), inset 0 7px 14px rgba(255,255,255,.95);
  --clay-in:inset 0 3px 7px rgba(70,110,190,.16), inset 0 -3px 6px rgba(255,255,255,.9);
  color-scheme:light;
}
html[data-theme="clay"][data-mode="dark"]{
  --bg:#0D1630;--sidebar-bg:#15234A;--surface:#1A2A54;--surface-alt:#13214A;--surface-raised:#243868;
  --border:rgba(150,180,255,.17);--ink:#F2F6FF;--ink-2:#D3DEFA;--text:#DCE6FF;--text-muted:#95A8D6;--placeholder:#6E82B4;
  --shadow:0 20px 34px -14px rgba(0,0,0,.6), inset 0 -7px 14px rgba(0,0,0,.28), inset 0 7px 14px rgba(160,195,255,.14);
  --clay-in:inset 0 3px 8px rgba(0,0,0,.4), inset 0 -2px 5px rgba(150,190,255,.10);
  color-scheme:dark;
}
html[data-theme="clay"] body{
  background:
    radial-gradient(900px 520px at 92% -8%,rgba(150,215,255,.75),transparent 60%),
    radial-gradient(760px 520px at 0% 18%,rgba(205,190,255,.55),transparent 60%),
    radial-gradient(700px 500px at 60% 110%,rgba(255,200,225,.45),transparent 60%),
    var(--bg);
  background-attachment:fixed;}
html[data-theme="clay"][data-mode="dark"] body{
  background:
    radial-gradient(900px 520px at 92% -8%,rgba(60,120,255,.30),transparent 60%),
    radial-gradient(760px 520px at 0% 18%,rgba(140,90,255,.22),transparent 60%),
    radial-gradient(700px 500px at 60% 110%,rgba(255,110,180,.14),transparent 60%),
    var(--bg);
  background-attachment:fixed;}
/* حباب‌های شناور پس‌زمینه */
html[data-theme="clay"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 8% 86%,rgba(255,255,255,.75) 0 46px,transparent 47px),
    radial-gradient(circle at 92% 62%,rgba(255,255,255,.55) 0 30px,transparent 31px),
    radial-gradient(circle at 78% 92%,rgba(255,255,255,.45) 0 58px,transparent 59px);
  filter:blur(5px);opacity:.75;animation:clayFloat 14s ease-in-out infinite alternate;}
html[data-theme="clay"][data-mode="dark"] body::before{opacity:.10;}
@keyframes clayFloat{from{transform:translateY(0);}to{transform:translateY(-22px);}}

html[data-theme="clay"] .card,
html[data-theme="clay"] .table-wrap,
html[data-theme="clay"] .modal-panel,
html[data-theme="clay"] .login-card{
  border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow);border-radius:var(--radius);}
html[data-theme="clay"][data-mode="dark"] .card,
html[data-theme="clay"][data-mode="dark"] .table-wrap,
html[data-theme="clay"][data-mode="dark"] .modal-panel,
html[data-theme="clay"][data-mode="dark"] .login-card{border-color:rgba(160,195,255,.16);}
html[data-theme="clay"] .card:hover{transform:translateY(-2px);}
html[data-theme="clay"] .sidebar{border-radius:32px;border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow), 0 30px 60px -26px rgba(40,80,170,.5);}
html[data-theme="clay"][data-mode="dark"] .sidebar{border-color:rgba(160,195,255,.16);}

html[data-theme="clay"] input[type=text],
html[data-theme="clay"] input[type=number],
html[data-theme="clay"] input[type=password],
html[data-theme="clay"] input[type=date],
html[data-theme="clay"] input[type=time],
html[data-theme="clay"] select,
html[data-theme="clay"] textarea{border:1px solid transparent;border-radius:16px;box-shadow:var(--clay-in);}
html[data-theme="clay"] input:focus,
html[data-theme="clay"] select:focus,
html[data-theme="clay"] textarea:focus{border-color:rgba(var(--primary-rgb),.6);box-shadow:var(--clay-in), 0 0 0 4px rgba(var(--primary-rgb),.2);}
html[data-theme="clay"] .sidebar-search{border-color:transparent;box-shadow:var(--clay-in);border-radius:18px;}

html[data-theme="clay"] .btn-primary,
html[data-theme="clay"] .btn-glow{border-radius:999px;padding:12px 24px;
  background:linear-gradient(180deg,#7CBEFF 0%,#3F86F5 100%);
  box-shadow:0 14px 24px -8px rgba(var(--primary-rgb),.65), inset 0 -5px 9px rgba(0,30,110,.22), inset 0 5px 9px rgba(255,255,255,.5);}
html[data-theme="clay"] .btn-primary:hover:not(:disabled),
html[data-theme="clay"] .btn-glow:hover:not(:disabled){
  box-shadow:0 0 24px rgba(var(--primary-rgb),.9), 0 14px 30px -6px rgba(var(--primary-rgb),.6), inset 0 -5px 9px rgba(0,30,110,.22), inset 0 5px 9px rgba(255,255,255,.5);}
html[data-theme="clay"] .btn-small{border-radius:999px;border:1px solid transparent;background:var(--surface-raised);
  box-shadow:0 8px 14px -6px rgba(60,110,200,.35), inset 0 -3px 6px rgba(90,140,230,.12), inset 0 3px 6px rgba(255,255,255,.9);}
html[data-theme="clay"][data-mode="dark"] .btn-small{box-shadow:0 8px 14px -6px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 6px rgba(160,195,255,.14);}
html[data-theme="clay"] .btn-small:hover{background:var(--surface-raised);}
html[data-theme="clay"] .btn-ghost{background:var(--danger-tint);box-shadow:none;}
html[data-theme="clay"] .icon-btn,
html[data-theme="clay"] .hamburger-btn{border-radius:50%;border-color:transparent;background:var(--surface-raised);
  box-shadow:0 8px 14px -6px rgba(60,110,200,.35), inset 0 -3px 6px rgba(90,140,230,.12), inset 0 3px 6px rgba(255,255,255,.9);}
html[data-theme="clay"][data-mode="dark"] .icon-btn,
html[data-theme="clay"][data-mode="dark"] .hamburger-btn{box-shadow:0 8px 14px -6px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.25), inset 0 3px 6px rgba(160,195,255,.14);}
html[data-theme="clay"] .nav-item{border-radius:20px;}
html[data-theme="clay"] .nav-item.active{
  background:var(--surface-raised);
  box-shadow:0 12px 20px -10px rgba(var(--primary-rgb),.55), inset 0 -4px 8px rgba(90,140,230,.12), inset 0 4px 8px rgba(255,255,255,.85);}
html[data-theme="clay"][data-mode="dark"] .nav-item.active{
  box-shadow:0 12px 20px -10px rgba(0,0,0,.55), inset 0 -4px 8px rgba(0,0,0,.25), inset 0 4px 8px rgba(160,195,255,.16);}
html[data-theme="clay"] .sp-avatar{box-shadow:0 14px 24px -8px rgba(var(--primary-rgb),.7), inset 0 -4px 8px rgba(0,30,110,.25), inset 0 4px 8px rgba(255,255,255,.55);}
html[data-theme="clay"] thead th{background:transparent;}
html[data-theme="clay"] tbody tr{transition:background .25s ease, transform .25s var(--ease-out);}
html[data-theme="clay"] tbody tr:hover{background:rgba(var(--primary-rgb),.08);}

/* =====================================================================
   ۵-ب) تم Neumorphism  (data-theme="neo")
   هم‌رنگ زمینه، برجسته/فرورفته با دو سایه‌ی روشن و تیره
   ===================================================================== */
html[data-theme="neo"]{
  --primary-rgb:98,114,255;--primary:#6272FF;--primary-dark:#4A5AF0;--primary-2:#3B48D6;
  --radius:24px;
}
html[data-theme="neo"][data-mode="light"]{
  --neo-d:#C2C9D8;--neo-l:#FFFFFF;
  --bg:#E5E9F1;--sidebar-bg:#E5E9F1;--surface:#E5E9F1;--surface-alt:#E5E9F1;--surface-raised:#DCE1EB;
  --border:rgba(150,160,190,.30);--ink:#232A3E;--ink-2:#3A4260;--text:#2C3450;--text-muted:#5F6888;--placeholder:#8E97B4;
  color-scheme:light;
}
html[data-theme="neo"][data-mode="dark"]{
  --neo-d:#15171D;--neo-l:#2E3340;
  --bg:#22262F;--sidebar-bg:#22262F;--surface:#22262F;--surface-alt:#22262F;--surface-raised:#2A2F3A;
  --border:rgba(140,150,190,.16);--ink:#F0F2FA;--ink-2:#D0D5EA;--text:#DFE3F3;--text-muted:#98A0C0;--placeholder:#6E7698;
  color-scheme:dark;
}
html[data-theme="neo"]{
  --shadow:9px 9px 20px var(--neo-d), -9px -9px 20px var(--neo-l);
  --neo-out:7px 7px 15px var(--neo-d), -7px -7px 15px var(--neo-l);
  --neo-out-sm:4px 4px 9px var(--neo-d), -4px -4px 9px var(--neo-l);
  --neo-in:inset 5px 5px 10px var(--neo-d), inset -5px -5px 10px var(--neo-l);
  --neo-in-sm:inset 3px 3px 6px var(--neo-d), inset -3px -3px 6px var(--neo-l);
}
html[data-theme="neo"] body{background:var(--bg);background-attachment:fixed;}
html[data-theme="neo"] .card,
html[data-theme="neo"] .table-wrap,
html[data-theme="neo"] .modal-panel,
html[data-theme="neo"] .login-card{border:0;box-shadow:var(--shadow);border-radius:var(--radius);}
html[data-theme="neo"] .sidebar{border:0;border-radius:32px;box-shadow:12px 12px 28px var(--neo-d), -8px -8px 22px var(--neo-l);
  background:var(--sidebar-bg);}
html[data-theme="neo"] .sidebar-overlay{background:rgba(20,24,36,.4);}

html[data-theme="neo"] input[type=text],
html[data-theme="neo"] input[type=number],
html[data-theme="neo"] input[type=password],
html[data-theme="neo"] input[type=date],
html[data-theme="neo"] input[type=time],
html[data-theme="neo"] select,
html[data-theme="neo"] textarea{border:0;border-radius:15px;box-shadow:var(--neo-in);}
html[data-theme="neo"] input:focus,
html[data-theme="neo"] select:focus,
html[data-theme="neo"] textarea:focus{border:0;box-shadow:var(--neo-in), 0 0 0 2px rgba(var(--primary-rgb),.55);}
html[data-theme="neo"] .sidebar-search{border:0;box-shadow:var(--neo-in-sm);border-radius:16px;background:transparent;}
html[data-theme="neo"] .sidebar-search:focus-within{box-shadow:var(--neo-in-sm), 0 0 0 2px rgba(var(--primary-rgb),.55);}
html[data-theme="neo"] .sidebar-search kbd{border:0;background:transparent;box-shadow:var(--neo-out-sm);}

html[data-theme="neo"] .btn-primary,
html[data-theme="neo"] .btn-glow{border-radius:16px;box-shadow:var(--neo-out), 0 6px 16px -6px rgba(var(--primary-rgb),.6);}
html[data-theme="neo"] .btn-primary:active:not(:disabled),
html[data-theme="neo"] .btn-glow:active:not(:disabled){box-shadow:inset 4px 4px 9px rgba(0,0,0,.28), inset -3px -3px 7px rgba(255,255,255,.12);}
html[data-theme="neo"] .btn-small,
html[data-theme="neo"] .icon-btn,
html[data-theme="neo"] .hamburger-btn{border:0;background:var(--bg);box-shadow:var(--neo-out-sm);}
html[data-theme="neo"] .btn-small{border-radius:13px;}
html[data-theme="neo"] .btn-small:hover{background:var(--bg);box-shadow:var(--neo-out-sm), 0 0 0 1px rgba(var(--primary-rgb),.55), 0 0 16px rgba(var(--primary-rgb),.35);}
html[data-theme="neo"] .btn-small:active,
html[data-theme="neo"] .icon-btn:active,
html[data-theme="neo"] .hamburger-btn:active{box-shadow:var(--neo-in-sm);}
html[data-theme="neo"] .btn-ghost{background:var(--bg);color:var(--danger);}
html[data-theme="neo"] .icon-btn:hover{background:var(--bg);color:var(--danger);}
html[data-theme="neo"] .hamburger-btn{border-radius:14px;}
html[data-theme="neo"] .nav-item{border-radius:18px;}
html[data-theme="neo"] .nav-item:hover{background:transparent;box-shadow:var(--neo-out-sm);}
html[data-theme="neo"] .nav-item.active{background:transparent;box-shadow:var(--neo-in-sm);}
html[data-theme="neo"] .sp-avatar{box-shadow:var(--neo-out), 0 8px 18px -6px rgba(var(--primary-rgb),.5);}
html[data-theme="neo"] .sp-avatar-inner{border-color:var(--sidebar-bg);}
html[data-theme="neo"] .sidebar-profile:hover{background:transparent;}
html[data-theme="neo"] .sidebar-footer,
html[data-theme="neo"] .nav-category-header{border-color:transparent;}
html[data-theme="neo"] thead th{border-bottom:1px solid var(--border);}
html[data-theme="neo"] tbody td{border-bottom:1px solid var(--border);}
html[data-theme="neo"] tbody tr:hover{background:rgba(var(--primary-rgb),.06);}
html[data-theme="neo"] .dn-track{box-shadow:inset 0 2px 7px rgba(0,40,110,.35), var(--neo-out-sm);}
html[data-theme="neo"] .theme-swatch-btn{box-shadow:var(--neo-out-sm);}

/* فیلد جستجوی سایدبار داخل خودِ کادر است؛ استایل فیلدهای تم‌های clay/neo نباید دوباره روی آن اعمال شود */
html[data-theme] .sidebar-search input[type=text],
html[data-theme] .sidebar-search input[type=text]:focus{border:0;border-radius:0;box-shadow:none;background:transparent;}