/* BEM Charis - shared "tech" look. One file, loaded by every page. Only colours/effects: no layout changes. */
:root{
  --t-bg:#04060d; --t-cyan:#22d3ee; --t-indigo:#6366f1; --t-violet:#8b5cf6;
  --t-line:rgba(99,102,241,.22); --t-glow:rgba(99,102,241,.35);
}
html.dark{color-scheme:dark}
html.dark body{background-color:var(--t-bg)}
/* living background: drifting aurora + moving grid + a slow scanning beam */
@keyframes t-aurora{0%{transform:translate3d(-4%,-3%,0) scale(1)}50%{transform:translate3d(5%,4%,0) scale(1.12)}100%{transform:translate3d(-2%,6%,0) scale(1.04)}}
@keyframes t-grid{0%{background-position:0 0,0 0,0 -260px}100%{background-position:44px 44px,44px 44px,0 110vh}}
html.dark body::before{
  content:"";position:fixed;inset:-25%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 34% at 78% 14%,rgba(99,102,241,.40),transparent 70%),
    radial-gradient(34% 34% at 14% 82%,rgba(34,211,238,.26),transparent 70%),
    radial-gradient(30% 30% at 55% 55%,rgba(139,92,246,.20),transparent 70%);
  filter:blur(30px);animation:t-aurora 22s ease-in-out infinite alternate;
}
html.dark body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(125,170,255,.10) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(125,170,255,.10) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(180deg,transparent,rgba(34,211,238,.10) 50%,transparent) 0 -260px/100% 260px no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 25%,transparent 100%);
  animation:t-grid 14s linear infinite;
}
/* top bar: glass with a glowing edge */
html.dark nav.sticky{
  background:rgba(5,8,18,.94)!important;
  border-bottom:1px solid transparent!important;
  border-image:linear-gradient(90deg,transparent,rgba(34,211,238,.55),rgba(99,102,241,.7),rgba(139,92,246,.5),transparent) 1;
  box-shadow:0 6px 28px rgba(2,6,23,.6)!important;
}
/* cards / panels: glass, neon top edge, soft outer glow */
html.dark [class~="dark:bg-slate-900"]:not(input):not(select):not(textarea):not(button):not(option):not(nav),
html.dark div[class~="bg-slate-900"]:not(.fixed){
  background-image:
    linear-gradient(90deg,transparent,rgba(34,211,238,.35) 50%,transparent) top center/40% 1px no-repeat,
    linear-gradient(180deg,rgba(18,26,50,.78),rgba(8,13,28,.72))!important;
  background-color:transparent!important;
  border-color:rgba(99,102,241,.20)!important;
  box-shadow:0 8px 24px rgba(2,6,23,.45)!important;
}
/* section titles glow softly */
/* accent numbers / links */
html.dark [class~="dark:text-indigo-400"]{color:#7dd3fc!important;text-shadow:none}
html.dark .items-end.h-16 > div{background-image:linear-gradient(180deg,#22d3ee,#6366f1)!important;box-shadow:0 0 10px rgba(34,211,238,.35)}
/* a slow light sweep along the bottom of the top bar */
@keyframes t-sweep{0%{background-position:-60% 0}100%{background-position:160% 0}}
html.dark nav.sticky::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.95),transparent) -60% 0/35% 100% no-repeat;animation:t-sweep 6s linear infinite}
/* inner tiles */
html.dark [class~="dark:bg-slate-800/50"],html.dark [class~="dark:bg-slate-800/40"],html.dark [class~="dark:bg-slate-800/60"]{
  background-color:rgba(30,41,75,.38)!important;border-color:rgba(99,102,241,.16)!important;
}
/* primary buttons and active tabs */
html.dark .bg-indigo-600:not([style*="background-image"]),html.dark [class~="dark:bg-indigo-600"]:not([style*="background-image"]),html.dark .bg-indigo-500:not([style*="background-image"]){
  background-image:linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#0ea5e9 130%)!important;
  box-shadow:0 0 12px rgba(99,102,241,.35),inset 0 1px 0 rgba(255,255,255,.18);
  border-color:transparent!important;
}
html.dark .bg-indigo-600:not([style*="background-image"]):hover,html.dark [class~="dark:bg-indigo-600"]:not([style*="background-image"]):hover{box-shadow:0 0 26px rgba(34,211,238,.45),inset 0 1px 0 rgba(255,255,255,.22)}
html.dark .bg-indigo-600:disabled{box-shadow:none;filter:saturate(.6)}
/* rows, folders: glow on hover */
html.dark .hover-row-effect{transition:box-shadow .15s,background-color .15s}
html.dark .hover-row-effect:hover{box-shadow:inset 3px 0 0 var(--t-cyan);background-color:rgba(34,211,238,.045)}
html.dark .folder-search-card:hover{border-color:rgba(34,211,238,.5)!important}
/* inputs */
html.dark input:not([type=checkbox]):not([type=radio]):not([type=file]),html.dark select,html.dark textarea{
  background-color:rgba(8,12,26,.75)!important;border-color:rgba(100,116,139,.35)!important;transition:border-color .15s,box-shadow .15s;
}
html.dark input:focus,html.dark select:focus,html.dark textarea:focus{
  outline:none!important;border-color:var(--t-cyan)!important;box-shadow:0 0 0 3px rgba(34,211,238,.16)!important;
}
/* headings and accents */
html.dark h1,html.dark h2{letter-spacing:-.01em}
html.dark .text-indigo-400{color:#8ea2ff}
html.dark .font-mono{font-feature-settings:"zero" 1}
/* thin tech scrollbars */
html.dark *{scrollbar-width:thin;scrollbar-color:rgba(99,102,241,.5) transparent}
html.dark ::-webkit-scrollbar{width:8px;height:8px}
html.dark ::-webkit-scrollbar-thumb{background:rgba(99,102,241,.45);border-radius:8px}
html.dark ::selection{background:rgba(34,211,238,.35);color:#fff}
/* quiet breathing glow on the logo / avatar tiles */
@keyframes t-pulse{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}50%{box-shadow:0 0 22px 0 rgba(34,211,238,.28)}}
html.dark #dashboard-avatar-preview,html.dark img[alt="Logo"]{animation:t-pulse 4.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){html.dark *{animation:none!important}}
/* light theme: keep it calm, only unify the primary colour */
html:not(.dark) .bg-indigo-600{background-image:linear-gradient(135deg,#4f46e5,#6366f1 60%,#0ea5e9 140%)}