/* =====================================================================
   Skins: five alternative looks on top of the house style.

   A skin is chosen per person (Theme::skin) and stamped on <html> as
   data-skin; the house style stamps nothing, so none of this applies to
   it. Every skin redefines the same tokens app.css uses, in a light block
   and a dark block, so the light / dark / system setting keeps working
   with each one -- the dark blocks carry one more attribute than the light
   ones, which is what lets them win.

   Everything sits inside @media screen: a cheque, an invoice or a report
   prints the same whatever anybody's screen looks like.

   Also here, because it applies under every skin: the picture a person or
   the company puts behind the pages (data-bg, --user-bg, --bg-dim).
   ===================================================================== */

@font-face{font-family:"RetroMono"; src:local("Courier New"), local("CourierNewPSMT"), local("Courier");
  unicode-range:U+0000-00FF, U+2000-206F, U+20AC}

@media screen {

/* ------------------------------------------ background picture (any skin) */

:root[data-bg] body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--user-bg) center / cover no-repeat}
:root[data-bg] body::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--surface); opacity:var(--bg-dim, .45)}
:root[data-bg] .chooser{background:transparent}
/* A tool opened in the floating panel is a page of its own; the picture and
   the glass colour field belong to the window behind it, not inside it. */
body.tool-window::before, body.tool-window::after{content:none !important}
:root[data-skin="glass"] body.tool-window{background:var(--glass-solid)}

/* ------------------------------------------------- the pickers themselves */

.sk-pick{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px}
.sk-opt{position:relative; display:flex; flex-direction:column; gap:4px; padding:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--card)}
.sk-opt input{position:absolute; opacity:0; pointer-events:none}
.sk-opt:has(input:checked){border-color:var(--brand); box-shadow:0 0 0 2px var(--brand)}
.sk-opt:has(input:focus-visible){outline:3px solid color-mix(in srgb, var(--brand) 55%, transparent)}
.sk-opt strong{color:var(--ink); font-size:.92rem}
.sk-opt small{color:var(--muted); font-size:.78rem; line-height:1.4}

/* Four little blocks drawn the way each skin draws a page: rail, two
   cards, a button. Fixed colours -- these are pictures of the skins. */
.sk-prev{position:relative; display:block; height:84px; overflow:hidden; margin-bottom:4px}
.sk-prev i{position:absolute; display:block}
.sk-prev .a{inset-block:0; inset-inline-start:0; width:26%}
.sk-prev .b{top:12%; inset-inline-start:32%; width:30%; height:38%}
.sk-prev .c{top:12%; inset-inline-start:66%; width:28%; height:38%}
.sk-prev .d{bottom:12%; inset-inline-start:32%; width:24%; height:18%}

.sk-prev-mak{background:#F5F9FC; border-radius:10px; border:1px solid #E3EAEF}
.sk-prev-mak .a{background:#0A1B29}
.sk-prev-mak .b,.sk-prev-mak .c{background:#FFF; border-radius:8px; box-shadow:0 2px 8px rgba(10,27,41,.12)}
.sk-prev-mak .d{background:#00AEEF; border-radius:99px}

.sk-prev-retro{background:#C0C0C0; border:2px solid #000; border-radius:0}
.sk-prev-retro .a{background:#000; box-shadow:inset -2px 0 0 #33FF66}
.sk-prev-retro .b,.sk-prev-retro .c{background:#C0C0C0; border:2px solid; border-color:#FFF #404040 #404040 #FFF;
  box-shadow:inset 0 7px 0 #000080}
.sk-prev-retro .d{background:#C0C0C0; border:2px solid; border-color:#FFF #404040 #404040 #FFF; outline:1px solid #000}

.sk-prev-flat{background:#F3F4F6; border-radius:8px; border:1px solid #E5E7EB}
.sk-prev-flat .a{background:#FFF; box-shadow:inset -1px 0 0 #E5E7EB}
.sk-prev-flat .b{background:#FFF; border-radius:6px; border:1px solid #E5E7EB}
.sk-prev-flat .c{background:#00AEEF; border-radius:6px}
.sk-prev-flat .d{background:#111827; border-radius:6px}

.sk-prev-glass{border-radius:14px; background:
  radial-gradient(60% 70% at 85% 10%, #00AEEF, transparent 70%),
  radial-gradient(55% 65% at 15% 95%, #E31F25, transparent 70%),
  radial-gradient(50% 60% at 50% 55%, #8B5CF6, transparent 70%), #1B2A4A}
.sk-prev-glass i{background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.sk-prev-glass .a{inset-block:6%; inset-inline-start:4%; width:22%; border-radius:10px}
.sk-prev-glass .b,.sk-prev-glass .c{border-radius:12px}
.sk-prev-glass .d{border-radius:99px; background:rgba(255,255,255,.4)}

.sk-prev-linen{border-radius:10px; border:1px solid #CFC2A4; background:#EDE6D6;
  background-image:repeating-linear-gradient(0deg, rgba(120,100,60,.08) 0 1px, transparent 1px 3px),
                   repeating-linear-gradient(90deg, rgba(120,100,60,.07) 0 1px, transparent 1px 3px)}
.sk-prev-linen .a{background:#E3D9C3; box-shadow:inset -1px 0 0 #CFC2A4}
.sk-prev-linen .b,.sk-prev-linen .c{background:#FBF8F0; border:1px solid #DDD0B3; border-radius:8px;
  box-shadow:0 3px 8px -3px rgba(90,70,30,.3)}
.sk-prev-linen .d{background:#5F6F2E; border-radius:6px; box-shadow:0 2px 0 #46521F}

.sk-prev-neon{background:#07080F; border:1px solid rgba(0,229,255,.35);
  background-image:radial-gradient(60% 70% at 90% 0%, rgba(255,0,170,.35), transparent 70%)}
.sk-prev-neon .a{background:#0A0C18; box-shadow:inset -1px 0 0 rgba(0,229,255,.4)}
.sk-prev-neon .b,.sk-prev-neon .c{background:#0C1020; border:1px solid rgba(0,229,255,.45);
  clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px))}
.sk-prev-neon .d{background:#00E5FF; box-shadow:0 0 10px #00E5FF;
  clip-path:polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px))}

/* The row of swatches in the user menu. The colour is on a pseudo-element so
   no skin's ".menu button:hover" can paint over it. */
.sk-row{display:flex; flex-wrap:wrap; gap:8px; padding:4px 11px 8px}
.menu .sk-row .sk-dot{position:relative; flex:none; width:30px; height:30px; padding:0;
  border-radius:50%; border:2px solid var(--line-2); background:var(--card); overflow:hidden}
.menu .sk-row .sk-dot::before{content:""; position:absolute; inset:2px; border-radius:50%}
.menu .sk-row .sk-dot.is-on{border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent)}
.sk-dot.sk-prev-mak::before{background:linear-gradient(135deg, #0A1B29 0 50%, #00AEEF 50%)}
.sk-dot.sk-prev-retro::before{background:linear-gradient(#000080 0 34%, #C0C0C0 34%)}
.sk-dot.sk-prev-flat::before{background:linear-gradient(90deg, #FFF 0 50%, #111827 50%)}
.sk-dot.sk-prev-linen::before{background:linear-gradient(135deg, #E3D9C3 0 50%, #5F6F2E 50%)}
.sk-dot.sk-prev-neon::before{background:linear-gradient(135deg, #00E5FF 0 50%, #FF00AA 50%); box-shadow:inset 0 0 0 5px #07080F}
.sk-dot.sk-prev-glass::before{background:radial-gradient(circle at 70% 25%, #00AEEF, transparent 60%),
  radial-gradient(circle at 25% 80%, #E31F25, transparent 60%), #8B5CF6}

/* A person's saved backgrounds: pick one, or tick its bin to delete it. */
.bg-lib{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px}
.bg-item{position:relative}
.bg-pick{display:block; cursor:pointer; border-radius:var(--radius-sm); overflow:hidden;
  border:2px solid var(--line); aspect-ratio:16/10}
.bg-pick input{position:absolute; opacity:0; pointer-events:none}
.bg-pick img{display:block; width:100%; height:100%; object-fit:cover}
.bg-pick:has(input:checked){border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in srgb, var(--brand) 35%, transparent)}
.bg-pick:has(input:focus-visible){outline:2px solid var(--brand); outline-offset:2px}
.bg-del{position:absolute; top:4px; inset-inline-end:4px; width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff}
.bg-del input{position:absolute; opacity:0; pointer-events:none}
.bg-del:has(input:checked){background:var(--bad, #D33)}
.bg-item:has(.bg-del input:checked) img{opacity:.35}

/* The background preview on the appearance page. */
.ap-prev{position:relative; height:190px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--surface)}
.ap-prev i{position:absolute; inset:0}
.ap-prev-img{background:var(--ap-img, none) center / cover no-repeat}
.ap-prev-veil{background:var(--surface); opacity:var(--ap-dim, 0)}
.ap-prev-card{position:absolute; inset:22% 14% auto 14%; display:flex; flex-direction:column; gap:8px;
  padding:14px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line)}
.ap-prev-card b{display:block; height:8px; border-radius:4px; background:var(--line-2)}
.ap-prev-card b:first-child{width:45%; background:var(--ink)}
.ap-prev-card b:last-child{width:70%}
.ap-thumb{width:100%; max-width:260px; height:90px; object-fit:cover; border-radius:var(--radius-sm);
  border:1px solid var(--line); margin-bottom:6px}

/* ------------------------------------------- shared by every named skin */

:root[data-skin] .side-nav a{color:var(--rail-link)}
:root[data-skin] .side-nav a:hover{background:var(--rail-hover-bg); color:var(--rail-hover-fg)}
:root[data-skin] .side-nav a.is-active{background:var(--rail-active-bg); color:var(--rail-active-fg)}
:root[data-skin] .sidebar .lockup-text strong{color:var(--rail-title)}
:root[data-skin] .sidebar .lockup-text small{color:var(--rail-sub)}
:root[data-skin] .side-sep{color:var(--rail-sep)}
:root[data-skin] .sidebar-foot{border-top-color:var(--rail-line)}
:root[data-skin] .rail-toggle:hover{background:var(--rail-hover-bg)}
:root[data-skin] .field.has-error :is(input, select, textarea){border-color:var(--bad)}


/* =====================================================================
   1. RETRO 80s -- a beige-box desktop in light, a green CRT in dark.
   ===================================================================== */

:root[data-skin="retro"]{
  --ink:#000000; --ink-2:#000080; --body:#111111; --muted:#4A4A4A;
  --rail:#000000; --rail-fg:#33FF66; --rail-line:#1F5F2F;
  --line:#808080; --line-2:#808080;
  --bg:#FFFFFF; --surface:#C0C0C0; --card:#C0C0C0; --veil:#C0C0C0;
  --brand-wash:#FFFFCC; --flax:#E8E0C8;
  --on-solid:#FFFFFF;
  --radius:0px; --radius-lg:0px; --radius-sm:0px;
  --shadow-sm:none; --shadow:none; --shadow-lg:4px 4px 0 rgba(0,0,0,.5);
  --f-display:"RetroMono", Tahoma, "Courier New", monospace;
  --f-body:"RetroMono", Tahoma, "Courier New", monospace;
  --f-mono:"RetroMono", "Courier New", monospace;
  --bv-hi:#FFFFFF; --bv-lo:#404040; --bv-face:#C0C0C0; --bv-field:#FFFFFF;
  --title-bg:#000080; --title-fg:#FFFFFF;
  --rail-link:#33FF66; --rail-hover-bg:#0B2A12; --rail-hover-fg:#9CFFB4;
  --rail-active-bg:#33FF66; --rail-active-fg:#000000;
  --rail-title:#33FF66; --rail-sub:#1F9F45; --rail-sep:#1F9F45;
  --crt-glow:none; --crt-lines:none;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="retro"]:not([data-theme="light"]){
    --ink:#7CFF9C; --ink-2:#33FF66; --body:#33FF66; --muted:#1FA64A;
    --rail:#000000; --rail-fg:#FFB000; --rail-line:#3A2A00;
    --line:#1F6F35; --line-2:#1F6F35;
    --bg:#000000; --surface:#020702; --card:#041004; --veil:#020702;
    --brand-wash:#06220E; --flax:#1A1400;
    --on-brand:#000000; --on-solid:#000000;
    --ok:#33FF66; --ok-bg:#062A10; --warn:#FFB000; --warn-bg:#2A1E00;
    --bad:#FF5F5F; --bad-bg:#2A0808; --info:#3FE8FF; --info-bg:#032A30;
    --idle:#1FA64A; --idle-bg:#041A08;
    --danger-wash:#2A0808; --danger-line:#7A1F1F; --danger-ink:#FF9C9C;
    --bv-hi:#1F6F35; --bv-lo:#1F6F35; --bv-face:#041004; --bv-field:#000000;
    --title-bg:#33FF66; --title-fg:#000000;
    --rail-link:#FFB000; --rail-hover-bg:#2A1E00; --rail-hover-fg:#FFD066;
    --rail-active-bg:#FFB000; --rail-active-fg:#000000;
    --rail-title:#FFB000; --rail-sub:#B37B00; --rail-sep:#B37B00;
    --crt-glow:0 0 3px rgba(51,255,102,.45);
    --crt-lines:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
                radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%);
  }
}
:root[data-skin="retro"][data-theme="dark"]{
  --ink:#7CFF9C; --ink-2:#33FF66; --body:#33FF66; --muted:#1FA64A;
  --rail:#000000; --rail-fg:#FFB000; --rail-line:#3A2A00;
  --line:#1F6F35; --line-2:#1F6F35;
  --bg:#000000; --surface:#020702; --card:#041004; --veil:#020702;
  --brand-wash:#06220E; --flax:#1A1400;
  --on-brand:#000000; --on-solid:#000000;
  --ok:#33FF66; --ok-bg:#062A10; --warn:#FFB000; --warn-bg:#2A1E00;
  --bad:#FF5F5F; --bad-bg:#2A0808; --info:#3FE8FF; --info-bg:#032A30;
  --idle:#1FA64A; --idle-bg:#041A08;
  --danger-wash:#2A0808; --danger-line:#7A1F1F; --danger-ink:#FF9C9C;
  --bv-hi:#1F6F35; --bv-lo:#1F6F35; --bv-face:#041004; --bv-field:#000000;
  --title-bg:#33FF66; --title-fg:#000000;
  --rail-link:#FFB000; --rail-hover-bg:#2A1E00; --rail-hover-fg:#FFD066;
  --rail-active-bg:#FFB000; --rail-active-fg:#000000;
  --rail-title:#FFB000; --rail-sub:#B37B00; --rail-sep:#B37B00;
  --crt-glow:0 0 3px rgba(51,255,102,.45);
  --crt-lines:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
              radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%);
}

:root[data-skin="retro"] body{text-shadow:var(--crt-glow); letter-spacing:0}
/* Scan lines over everything, in dark only (none in light). */
:root[data-skin="retro"]::before{content:""; position:fixed; inset:0; z-index:2147483000;
  pointer-events:none; background:var(--crt-lines)}
:root[data-skin="retro"] :is(h1,h2,h3,h4){font-weight:700; letter-spacing:0}
:root[data-skin="retro"] :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px dotted var(--ink); outline-offset:1px; border-radius:0}

/* Raised: buttons, windows, menus. */
:root[data-skin="retro"] :is(.btn, .pg, .chip, .session-timer,
  .kpi, .kpi-card, .tile, .card, .menu, .tp, .cp, .flash, .notice, .board-col, .kcard, .cp-toast,
  .cal-dlg, .cal-toast-item, .cal-ag-day){
  background:var(--bv-face); color:var(--ink); border:2px solid;
  border-color:var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi);
  border-radius:0; box-shadow:none}
:root[data-skin="retro"] .btn:hover:not(:disabled), :root[data-skin="retro"] .icon-btn:hover{
  background:var(--bv-face); color:var(--ink); transform:none;
  border-color:var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi)}
:root[data-skin="retro"] .icon-btn{border-radius:0}
:root[data-skin="retro"] :is(.card, .menu, .tp, .cp){box-shadow:var(--shadow-lg)}
:root[data-skin="retro"] .btn{font-weight:700; transition:none}
:root[data-skin="retro"] .btn:not(.btn-soft):not(.btn-ghost):not(.btn-danger){box-shadow:0 0 0 1px var(--ink)}
:root[data-skin="retro"] .btn:active:not(:disabled),
:root[data-skin="retro"] .chip.is-on, :root[data-skin="retro"] .pg.is-active{
  border-color:var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo)}
:root[data-skin="retro"] .btn-danger, :root[data-skin="retro"] .btn-danger:hover:not(:disabled){color:var(--bad)}
:root[data-skin="retro"] .pg.is-active{color:var(--ink); font-weight:700}
/* A chosen chip is pressed in, and says so in bold. */
:root[data-skin="retro"] :is(.chip.is-on, .chip:has(input:checked), .chip[aria-pressed="true"]){
  background:var(--bv-field); color:var(--ink); font-weight:700;
  border-color:var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo)}
:root[data-skin="retro"] .kpi:hover, :root[data-skin="retro"] .tile:hover{transform:none; outline:2px dotted var(--ink); outline-offset:-6px}

/* A window's title bar. */
:root[data-skin="retro"] .card-head{background:var(--title-bg); color:var(--title-fg); border-bottom:0; padding:5px 10px}
:root[data-skin="retro"] .card-head :is(h2,h3,.ico){color:var(--title-fg)}
:root[data-skin="retro"] .card-head a:not(.btn){color:var(--title-fg); text-decoration:underline}
:root[data-skin="retro"] .card-foot{background:var(--bv-face); border-top:1px solid var(--line)}
:root[data-skin="retro"] :is(.tp-head, .cp-head){background:var(--title-bg); color:var(--title-fg)}
:root[data-skin="retro"] :is(.tp-head, .cp-head) :is(button, a, strong, span, .ico){color:var(--title-fg)}
:root[data-skin="retro"] :is(.tp-head, .cp-head) button:hover{background:transparent; border-color:var(--title-fg)}

/* Sunken: fields and the white well a table sits in. */
:root[data-skin="retro"] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):where(:not([type=range]):not([type=color]):not([type=file])){
  background:var(--bv-field); color:var(--ink); border:2px solid; border-radius:0;
  border-color:var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo); box-shadow:none}
:root[data-skin="retro"] :is(input, select, textarea):focus{box-shadow:none; outline:1px dotted var(--ink)}
:root[data-skin="retro"] .table-wrap{background:var(--bv-field); border:2px solid; border-radius:0;
  border-color:var(--bv-lo) var(--bv-hi) var(--bv-hi) var(--bv-lo)}
:root[data-skin="retro"] table.data thead th{background:var(--bv-face); color:var(--ink);
  border:1px solid; border-color:var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi); text-transform:none}
:root[data-skin="retro"] table.data tbody tr{border-bottom:1px dotted var(--line)}
:root[data-skin="retro"] table.data tbody tr:hover{background:var(--brand-wash)}

:root[data-skin="retro"] .topbar{background:var(--bv-face); -webkit-backdrop-filter:none; backdrop-filter:none;
  border-bottom:2px solid var(--bv-lo)}
:root[data-skin="retro"] .search-box input{border-radius:0}
:root[data-skin="retro"] .side-nav a{border-radius:0; text-shadow:0 0 4px currentColor}
:root[data-skin="retro"] .side-nav a.is-active{text-shadow:none}
:root[data-skin="retro"] .side-nav a.is-active .nav-label::after{content:"_"; animation:sk-blink 1s steps(1) infinite}
@keyframes sk-blink{50%{opacity:0}}
:root[data-skin="retro"] .side-nav .nav-count, :root[data-skin="retro"] .icon-btn .dot{border-radius:0}
:root[data-skin="retro"] .menu a:hover, :root[data-skin="retro"] .menu button:not(.sk-dot):hover{
  background:var(--title-bg); color:var(--title-fg); border-radius:0}
:root[data-skin="retro"] .menu .sep{background:var(--bv-lo); box-shadow:0 1px 0 var(--bv-hi)}
:root[data-skin="retro"] :is(.badge, .avatar, .avatar-img, .tile-icon, .tabs a, .sk-opt, .ap-prev, .ap-prev-card){border-radius:0}
:root[data-skin="retro"] .badge{border:1px solid currentColor}
:root[data-skin="retro"] .tile::after{display:none}
:root[data-skin="retro"] .tile-icon{box-shadow:none; border:2px solid; border-color:var(--bv-hi) var(--bv-lo) var(--bv-lo) var(--bv-hi)}

/* Icons, retro: blocky -- square ends, mitred corners, no anti-aliasing,
   a heavier line -- and on a grey button face in the module colour, with a
   hard one-pixel shadow, the way a 1980s desktop drew its icons. On the
   CRT they turn phosphor green and glow. */
:root[data-skin="retro"] .ico{stroke-width:2.3; stroke-linecap:square; stroke-linejoin:miter;
  shape-rendering:crispEdges}
:root[data-skin="retro"] .tile-icon{background:var(--bv-face); color:var(--tile-color, var(--brand))}
:root[data-skin="retro"] .tile-icon .ico, :root[data-skin="retro"] .kpi-top .ico{filter:drop-shadow(1px 1px 0 #404040)}
@media (prefers-color-scheme: dark){
  /* On the CRT the "Open" links go phosphor too: violet on black was unreadable. */
  :root[data-skin="retro"]:not([data-theme="light"]) .tile-go{color:var(--ink-2)}
  :root[data-skin="retro"]:not([data-theme="light"]) :is(.tile-icon, .kpi-top) .ico{color:var(--ink);
    filter:drop-shadow(0 0 3px rgba(51,255,102,.7))}
}
:root[data-skin="retro"][data-theme="dark"] .tile-go{color:var(--ink-2)}
:root[data-skin="retro"][data-theme="dark"] :is(.tile-icon, .kpi-top) .ico{color:var(--ink); filter:drop-shadow(0 0 3px rgba(51,255,102,.7))}
:root[data-skin="retro"] .kpi-value{font-weight:700}
:root[data-skin="retro"] .chooser{background:var(--surface)}
:root[data-skin="retro"] .tabs a.is-active{background:var(--bv-face); border:2px solid; border-bottom:0;
  border-color:var(--bv-hi) var(--bv-lo) transparent var(--bv-hi)}


/* =====================================================================
   2. MODERN FLAT -- no shadows, no gradients, crisp lines, denser tables.
   ===================================================================== */

:root[data-skin="flat"]{
  --ink:#111827; --ink-2:#1F2937; --body:#374151; --muted:#6B7280;
  --rail:#FFFFFF; --rail-fg:#374151; --rail-line:#E5E7EB;
  --line:#E5E7EB; --line-2:#D1D5DB;
  --bg:#FFFFFF; --surface:#F3F4F6; --card:#FFFFFF; --veil:#FFFFFF;
  --radius:8px; --radius-lg:12px; --radius-sm:6px;
  --shadow-sm:none; --shadow:none; --shadow-lg:0 12px 32px rgba(17,24,39,.12);
  --f-display:system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --f-body:system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --rail-link:#4B5563; --rail-hover-bg:#F3F4F6; --rail-hover-fg:#111827;
  --rail-active-bg:var(--brand-wash); --rail-active-fg:var(--brand-700);
  --rail-title:#111827; --rail-sub:#6B7280; --rail-sep:#9CA3AF;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="flat"]:not([data-theme="light"]){
    --ink:#F3F4F6; --ink-2:#E5E7EB; --body:#D1D5DB; --muted:#9CA3AF;
    --rail:#111318; --rail-fg:#D1D5DB; --rail-line:#23262D;
    --line:#262A31; --line-2:#343944;
    --bg:#0B0D10; --surface:#0B0D10; --card:#15181D; --veil:#15181D;
    --shadow-lg:0 12px 32px rgba(0,0,0,.55);
    --rail-link:#AEB4BE; --rail-hover-bg:#1C1F25; --rail-hover-fg:#FFFFFF;
    --rail-active-bg:color-mix(in srgb, var(--brand) 18%, transparent); --rail-active-fg:var(--brand-700);
    --rail-title:#F3F4F6; --rail-sub:#8A919C; --rail-sep:#6B7280;
  }
}
:root[data-skin="flat"][data-theme="dark"]{
  --ink:#F3F4F6; --ink-2:#E5E7EB; --body:#D1D5DB; --muted:#9CA3AF;
  --rail:#111318; --rail-fg:#D1D5DB; --rail-line:#23262D;
  --line:#262A31; --line-2:#343944;
  --bg:#0B0D10; --surface:#0B0D10; --card:#15181D; --veil:#15181D;
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);
  --rail-link:#AEB4BE; --rail-hover-bg:#1C1F25; --rail-hover-fg:#FFFFFF;
  --rail-active-bg:color-mix(in srgb, var(--brand) 18%, transparent); --rail-active-fg:var(--brand-700);
  --rail-title:#F3F4F6; --rail-sub:#8A919C; --rail-sep:#6B7280;
}

:root[data-skin="flat"] :is(h1,h2,h3,h4){font-weight:650; letter-spacing:-.015em}
:root[data-skin="flat"] .btn{border-radius:var(--radius); transition:background .12s, border-color .12s}
:root[data-skin="flat"] .btn:hover:not(:disabled), :root[data-skin="flat"] .kpi:hover,
:root[data-skin="flat"] .tile:hover{transform:none}
:root[data-skin="flat"] .btn-icon{border-radius:var(--radius)}
:root[data-skin="flat"] :is(.btn-soft, .card, .kpi, .kpi-card, .tile, .kpi:hover, .tile:hover){box-shadow:none}
:root[data-skin="flat"] .tile:hover, :root[data-skin="flat"] .kpi:hover{border-color:var(--line-2)}
:root[data-skin="flat"] .tile{min-height:150px; padding:20px 18px 18px}
:root[data-skin="flat"] .tile::after{display:none}
:root[data-skin="flat"] .tile-icon{width:48px; height:48px; border-radius:10px; box-shadow:none}

/* Icons, flat: a firm two-pixel line with the closed shapes washed in their
   own colour (duotone), on a pale tint of the module colour rather than a
   solid block. */
:root[data-skin="flat"] .ico{stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
:root[data-skin="flat"] .ico :is(rect, circle, ellipse):not([fill]){fill:currentColor; fill-opacity:.16}
:root[data-skin="flat"] .tile-icon{background:color-mix(in srgb, var(--tile-color, var(--brand)) 14%, var(--card));
  color:var(--tile-color, var(--brand))}
:root[data-skin="flat"] .kpi-value{font-family:var(--f-body); font-weight:650}
:root[data-skin="flat"] .topbar{background:var(--card); -webkit-backdrop-filter:none; backdrop-filter:none}
:root[data-skin="flat"] :is(.search-box input, .session-timer, .pg, .chip, .icon-btn){border-radius:var(--radius-sm)}
:root[data-skin="flat"] .badge{border-radius:4px}
:root[data-skin="flat"] .side-nav a{border-radius:var(--radius-sm)}
:root[data-skin="flat"] .side-nav a.is-active{font-weight:600}
:root[data-skin="flat"] .content{padding:18px}
:root[data-skin="flat"] table.data th, :root[data-skin="flat"] table.data td{padding:7px 12px}
:root[data-skin="flat"] table.data thead th{background:var(--card); text-transform:none; letter-spacing:0;
  font-size:.8rem; border-bottom-color:var(--line-2)}
:root[data-skin="flat"] .field input:focus, :root[data-skin="flat"] .field select:focus,
:root[data-skin="flat"] .field textarea:focus{box-shadow:0 0 0 1px var(--brand)}
:root[data-skin="flat"] .chooser{background:var(--surface)}
:root[data-skin="flat"] :is(.menu, .tp, .cp){border-radius:10px}


/* =====================================================================
   3. LIQUID GLASS -- frosted layers over a slowly drifting colour field.
   ===================================================================== */

:root[data-skin="glass"]{
  --ink:#0B1B2B; --ink-2:#12314A; --body:#1F3647; --muted:#4F6576;
  --rail:rgba(255,255,255,.36); --rail-fg:#0B1B2B; --rail-line:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.55); --line-2:rgba(11,27,43,.14);
  --bg:rgba(255,255,255,.6); --surface:rgba(255,255,255,.3); --card:rgba(255,255,255,.5);
  --veil:rgba(255,255,255,.4);
  --glass-base:#D6E3F0; --glass-solid:#F2F6FA;
  --glass-a:color-mix(in srgb, var(--brand) 60%, transparent);
  --glass-b:color-mix(in srgb, var(--accent) 42%, transparent);
  --glass-c:rgba(139,92,246,.45);
  --glass-blur:blur(14px) saturate(140%);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(255,255,255,.25);
  --field-bg:rgba(255,255,255,.55); --menu-bg:rgba(255,255,255,.94); --thead-bg:rgba(240,246,252,.85);
  --radius:18px; --radius-lg:26px; --radius-sm:12px;
  --shadow-sm:0 4px 16px rgba(20,40,70,.08); --shadow:0 8px 32px rgba(20,40,70,.12);
  --shadow-lg:0 20px 60px rgba(20,40,70,.22);
  --f-display:-apple-system, "SF Pro Display", system-ui, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --f-body:-apple-system, "SF Pro Text", system-ui, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --rail-link:#1F3647; --rail-hover-bg:rgba(255,255,255,.45); --rail-hover-fg:#0B1B2B;
  --rail-active-bg:rgba(255,255,255,.8); --rail-active-fg:var(--brand-700);
  --rail-title:#0B1B2B; --rail-sub:#4F6576; --rail-sep:#4F6576;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="glass"]:not([data-theme="light"]){
    --ink:#F1F6FB; --ink-2:#D6E3EE; --body:#C7D6E2; --muted:#8FA3B5;
    --rail:rgba(14,22,38,.42); --rail-fg:#C7D6E2; --rail-line:rgba(255,255,255,.1);
    --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.2);
    --bg:rgba(20,30,50,.6); --surface:rgba(255,255,255,.05); --card:rgba(22,32,54,.5);
    --veil:rgba(14,22,38,.45);
    --glass-base:#060B17; --glass-solid:#141E30;
    --glass-c:rgba(139,92,246,.4);
    --glass-edge:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
    --field-bg:rgba(255,255,255,.06); --menu-bg:rgba(18,28,46,.95); --thead-bg:rgba(16,24,40,.88);
    --shadow-sm:0 4px 16px rgba(0,0,0,.3); --shadow:0 8px 32px rgba(0,0,0,.4);
    --shadow-lg:0 20px 60px rgba(0,0,0,.55);
    --rail-link:#C7D6E2; --rail-hover-bg:rgba(255,255,255,.08); --rail-hover-fg:#FFFFFF;
    --rail-active-bg:rgba(255,255,255,.16); --rail-active-fg:#FFFFFF;
    --rail-title:#F1F6FB; --rail-sub:#8FA3B5; --rail-sep:#8FA3B5;
  }
}
:root[data-skin="glass"][data-theme="dark"]{
  --ink:#F1F6FB; --ink-2:#D6E3EE; --body:#C7D6E2; --muted:#8FA3B5;
  --rail:rgba(14,22,38,.42); --rail-fg:#C7D6E2; --rail-line:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.2);
  --bg:rgba(20,30,50,.6); --surface:rgba(255,255,255,.05); --card:rgba(22,32,54,.5);
  --veil:rgba(14,22,38,.45);
  --glass-base:#060B17; --glass-solid:#141E30;
  --glass-c:rgba(139,92,246,.4);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
  --field-bg:rgba(255,255,255,.06); --menu-bg:rgba(18,28,46,.95); --thead-bg:rgba(16,24,40,.88);
  --shadow-sm:0 4px 16px rgba(0,0,0,.3); --shadow:0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
  --rail-link:#C7D6E2; --rail-hover-bg:rgba(255,255,255,.08); --rail-hover-fg:#FFFFFF;
  --rail-active-bg:rgba(255,255,255,.16); --rail-active-fg:#FFFFFF;
  --rail-title:#F1F6FB; --rail-sub:#8FA3B5; --rail-sep:#8FA3B5;
}

/* The colour field: four soft lights drifting on a slow loop. */
:root[data-skin="glass"] body{background:var(--glass-base)}
:root[data-skin="glass"] body::before{content:""; position:fixed; inset:-15%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%, var(--glass-a), transparent 70%),
    radial-gradient(34% 40% at 82% 18%, var(--glass-c), transparent 70%),
    radial-gradient(42% 48% at 72% 84%, var(--glass-b), transparent 70%),
    radial-gradient(30% 36% at 14% 86%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%);
  /* Still (2.5.8). The lights used to drift on an endless 40 s loop, and every pane
     blurring what is behind it had to be blurred again on every frame of it --
     the graphics card busy all day on a page nobody was touching. */
  animation:none; transform:none}
@keyframes sk-drift{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(4%,-3%,0) rotate(8deg) scale(1.05)}
  100%{transform:translate3d(-3%,4%,0) rotate(-6deg)}
}
/* A person's own picture replaces the colour field. */
:root[data-skin="glass"][data-bg] body::before{inset:0; animation:none; transform:none; will-change:auto;
  background:var(--user-bg) center / cover no-repeat}
:root[data-skin="glass"][data-bg] body::after{background:var(--glass-base)}
:root[data-skin="glass"] .chooser{background:transparent}

/* Glass panes. A pane inside the top bar -- the menus -- cannot blur what
   is under the bar (the bar's own blur is the limit of what it can see), so
   those are kept nearly opaque through --menu-bg. */
:root[data-skin="glass"] :is(.card, .kpi, .kpi-card, .tile, .flash, .notice, .board-col,
  .alert-list, .tp, .cp, .cp-toast, .sk-opt, .ap-prev-card,
  .cal-month, .cal-wk, .cal-ag-day, .cal-toast-item, .cal-dlg){
  background:var(--card); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--line); box-shadow:var(--glass-edge), var(--shadow-sm)}
/* A table's frame and the small controls that come by the dozen (soft and ghost
   buttons, chips, page numbers, the active tab) are tinted, not blurred: each blur
   is a layer the browser draws again whenever anything moves behind it. */
:root[data-skin="glass"] .table-wrap{background:color-mix(in srgb, var(--glass-solid) 62%, transparent);
  border:1px solid var(--line); box-shadow:var(--glass-edge), var(--shadow-sm)}
/* One layer of blur is enough: a pane inside a pane just tints. */
:root[data-skin="glass"] :is(.card, .tp, .cp, .tp-body) :is(.card, .table-wrap, .kpi, .notice){
  -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); box-shadow:var(--glass-edge)}
:root[data-skin="glass"] :is(.tp, .cp, .cal-dlg, .cal-toast-item){box-shadow:var(--glass-edge), var(--shadow-lg)}
/* A dialog needs to read clearly over whatever is behind it. */
:root[data-skin="glass"] :is(.cal-dlg, .cal-toast-item){background:var(--menu-bg)}
:root[data-skin="glass"] .kpi:hover, :root[data-skin="glass"] .tile:hover{box-shadow:var(--glass-edge), var(--shadow)}
/* Icons, glass: a fine line with a faint luminous fill, set in a lozenge of
   tinted glass with a highlight across its top half. */
:root[data-skin="glass"] .ico{stroke-width:1.45}
:root[data-skin="glass"] .ico :is(rect, circle, ellipse):not([fill]){fill:currentColor; fill-opacity:.1}
:root[data-skin="glass"] .tile-icon{position:relative; overflow:hidden; color:#FFF;
  background:linear-gradient(150deg, color-mix(in srgb, var(--tile-color, var(--brand)) 88%, #FFF 12%),
                              color-mix(in srgb, var(--tile-color, var(--brand)) 50%, transparent));
  border:1px solid rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7), inset 0 -10px 18px rgba(0,0,0,.08),
             0 10px 24px -10px var(--tile-color, var(--brand))}
:root[data-skin="glass"] .tile-icon::before{content:""; position:absolute; inset:1px 1px 52% 1px;
  border-radius:inherit; border-bottom-left-radius:50% 30%; border-bottom-right-radius:50% 30%;
  background:linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0)); pointer-events:none}
:root[data-skin="glass"] .tile-icon .ico{position:relative; stroke-width:1.7;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}

:root[data-skin="glass"] .sidebar{background:var(--rail); -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur); border-inline-end:1px solid var(--rail-line); box-shadow:var(--glass-edge)}
:root[data-skin="glass"] .side-nav a{border-radius:14px}
:root[data-skin="glass"] .side-nav a.is-active{box-shadow:var(--glass-edge), var(--shadow-sm)}
:root[data-skin="glass"] .topbar{background:var(--veil); -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur); border-bottom:1px solid var(--line)}
:root[data-skin="glass"] .menu{background:var(--menu-bg); -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur); border:1px solid var(--line); box-shadow:var(--glass-edge), var(--shadow-lg)}
:root[data-skin="glass"] table.data thead th{background:var(--thead-bg)}

:root[data-skin="glass"] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):where(:not([type=range]):not([type=color]):not([type=file])){
  background:var(--field-bg); border-color:var(--line-2)}
:root[data-skin="glass"] :is(input, select, textarea):not([type=checkbox]):focus{border-color:var(--brand)}
:root[data-skin="glass"] select option{background:var(--glass-solid); color:var(--ink)}
:root[data-skin="glass"] .field :is(input, select, textarea){border-radius:var(--radius-sm)}
/* The rule above tints every box, not only those in a form -- the messages
   search, the composer, filter bars -- so every box gets the corners too.
   The top search keeps its own capsule. */
:root[data-skin="glass"] :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]), select, textarea):where(:not(.search-box *)){
  border-radius:var(--radius-sm)}

:root[data-skin="glass"] .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
  0 6px 18px -8px color-mix(in srgb, var(--brand) 70%, transparent)}
:root[data-skin="glass"] :is(.btn-soft, .btn-ghost, .pg, .chip, .session-timer){
  background:color-mix(in srgb, var(--glass-solid) 62%, transparent);
  border:1px solid var(--line); box-shadow:var(--glass-edge)}
:root[data-skin="glass"] :is(.btn-soft, .btn-ghost):hover:not(:disabled){background:var(--bg); color:var(--ink); border-color:var(--line)}
:root[data-skin="glass"] :is(.chip.is-on, .chip:has(input:checked), .chip[aria-pressed="true"], .pg.is-active){
  background:color-mix(in srgb, var(--brand) 82%, transparent); color:var(--on-brand); border-color:transparent}
:root[data-skin="glass"] .btn-danger{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
  0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent)}
:root[data-skin="glass"] .icon-btn:hover{background:var(--card); border-color:var(--line)}

/* ---- Glass: everything rounded, the way the style promises. -------------

   The rail and the top bar float as panels instead of being glued to the
   window's edges; the smaller parts that carried their own fixed corners
   (menu rows, pager, board cards, bubbles, calendar entries...) take the
   skin's radii; a table sitting inside a card follows the card's corners;
   the module tabs become capsules. */

:root[data-skin="glass"] .sidebar{margin:10px; margin-inline-end:0; top:10px; height:calc(100vh - 20px);
  border-radius:var(--radius-lg); border:1px solid var(--rail-line); overflow:hidden}
:root[data-skin="glass"] .topbar{margin:10px 10px 0; margin-inline-start:12px; top:10px;
  border-radius:var(--radius-lg); border:1px solid var(--line)}
@media (max-width:1000px){
  /* The drawer: pushed fully off screen, gap and all. */
  :root[data-skin="glass"] .sidebar{margin:0; top:auto; inset-block:10px; inset-inline-start:10px; height:auto;
    transform:translateX(calc(-100% - 24px))}
  :root[data-skin="glass"][dir="rtl"] .sidebar, [dir="rtl"]:root[data-skin="glass"] .sidebar{transform:translateX(calc(100% + 24px))}
  :root[data-skin="glass"] .sidebar.is-open{transform:none}
  :root[data-skin="glass"] .topbar{margin:8px 8px 0}
}

/* Rows and small parts. */
:root[data-skin="glass"] :is(.menu a, .menu button:not(.sk-dot), .notif, .pg, .msg-file, .alert-icon, .el-row,
  .social-tags, .tl-out, .tl-stat, .cp-badge, .cp-attach, .cp-send, .tp-head button, .cp-head button,
  .stage-letter, .label-preview, .role-opt){border-radius:12px}
:root[data-skin="glass"] :is(.kbd, .mention){border-radius:8px}
:root[data-skin="glass"] .alert-list{border-radius:var(--radius); overflow:hidden}
:root[data-skin="glass"] :where(a, button, input, select, textarea, [tabindex]):focus-visible{border-radius:12px}
:root[data-skin="glass"] .kcard{border-radius:16px}
:root[data-skin="glass"] .bubble{border-radius:20px}
:root[data-skin="glass"] .cp-b{border-radius:18px}
:root[data-skin="glass"] :is(.cal-ev, .cal-lay, .cal-notechip, .cal-more, .cal-tev){border-radius:10px}
:root[data-skin="glass"] :is(.fl-drop, .cp-toast, .idle-warn, .vs-map){border-radius:var(--radius)}
:root[data-skin="glass"] .vs-map{overflow:hidden}
:root[data-skin="glass"] :is(.tp, .cp){border-radius:var(--radius-lg)}
@media (max-width:699px){
  :root[data-skin="glass"] .cp{border-radius:var(--radius-lg) var(--radius-lg) 0 0}
}

/* A table inside a card: many screens flatten its corners inline, which
   left square header and hover rows poking past the card's round corner. */
:root[data-skin="glass"] .card > .table-wrap:last-child{
  border-bottom-left-radius:calc(var(--radius) - 1px) !important; border-bottom-right-radius:calc(var(--radius) - 1px) !important}
:root[data-skin="glass"] .card > .table-wrap:first-child{
  border-top-left-radius:calc(var(--radius) - 1px) !important; border-top-right-radius:calc(var(--radius) - 1px) !important}
:root[data-skin="glass"] .card > .card-head:first-child{border-radius:var(--radius) var(--radius) 0 0}

/* Module tabs as glass capsules. */
:root[data-skin="glass"] .tabs{border-bottom:0; gap:6px; padding:2px}
:root[data-skin="glass"] .tabs a{border:1px solid transparent; border-radius:100px; padding:7px 15px}
:root[data-skin="glass"] .tabs a:hover{background:var(--surface); color:var(--ink)}
:root[data-skin="glass"] .tabs a.is-active{background:color-mix(in srgb, var(--glass-solid) 70%, transparent); border-color:var(--line);
  color:var(--brand-700); box-shadow:var(--glass-edge), var(--shadow-sm)}

/* Without backdrop blur the panes would be see-through smears: fall back to
   near-solid surfaces. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root[data-skin="glass"] :is(.card, .kpi, .kpi-card, .tile, .table-wrap, .flash, .notice, .board-col,
    .alert-list, .tp, .cp, .cp-toast, .menu, .sidebar, .topbar,
    .cal-month, .cal-wk, .cal-ag-day, .cal-toast-item, .cal-dlg){background:var(--glass-solid)}
}

/* =====================================================================
   4. LINEN -- raw flax cloth, olive and warm brown; heavy paper cards and
      book-face headings. Dark is river silt with cream type.
   ===================================================================== */

:root[data-skin="linen"]{
  --brand:#5F6F2E; --brand-600:#4E5B25; --brand-700:#46521F;
  --accent:#9A5B3C; --accent-600:#834A2F; --on-brand:#FBF7EC; --on-solid:#FBF7EC;
  --ink:#3A2E1A; --ink-2:#4A3B22; --body:#4B402E; --muted:#86775A;
  --rail:#E3D9C3; --rail-fg:#5E5039; --rail-line:#CFC2A4;
  --line:#DDD0B3; --line-2:#CDBE9E;
  --bg:#FBF8F0; --surface:#EDE6D6; --card:#FBF8F0; --veil:rgba(237,230,214,.92);
  --brand-wash:#E6EBD3; --flax:#F3EADA;
  --ok:#4E6B2A; --ok-bg:#E3EBD0; --warn:#96641A; --warn-bg:#F4E6C4;
  --bad:#A33B2A; --bad-bg:#F3DCD3; --info:#2F6D7A; --info-bg:#D9E8E9;
  --idle:#86775A; --idle-bg:#ECE4D2; --badge-bg:#A33B2A;
  --radius:12px; --radius-lg:16px; --radius-sm:8px;
  --shadow-sm:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 10px -4px rgba(90,70,30,.22);
  --shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px -8px rgba(90,70,30,.3);
  --shadow-lg:0 18px 44px -12px rgba(70,52,20,.35);
  --f-display:Georgia, "Iowan Old Style", "Palatino Linotype", "Noto Naskh Arabic", "Times New Roman", serif;
  --linen-weave:rgba(120,100,60,.05);
  --thead-bg:#F3ECDC;
  --rail-link:#5E5039; --rail-hover-bg:rgba(255,255,255,.42); --rail-hover-fg:#3A2E1A;
  --rail-active-bg:#F7F2E5; --rail-active-fg:#4E5B25;
  --rail-title:#4A3B22; --rail-sub:#86775A; --rail-sep:#9A8A6C;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="linen"]:not([data-theme="light"]){
    --brand:#A9BC6A; --brand-600:#B8C97E; --brand-700:#C9D796;
    --accent:#D58F6A; --accent-600:#E0A283; --on-brand:#1E1A10; --on-solid:#1E1A10;
    --ink:#F1E9D6; --ink-2:#E3D8BF; --body:#CFC3A8; --muted:#9C8F74;
    --rail:#1E1A13; --rail-fg:#CFC3A8; --rail-line:#332C20;
    --line:#3A3226; --line-2:#4A4031;
    --bg:#26211A; --surface:#1A1712; --card:#26211A; --veil:rgba(26,23,18,.92);
    --brand-wash:#2E3320; --flax:#2A2214;
    --ok:#A9BC6A; --ok-bg:#2A3019; --warn:#E0B062; --warn-bg:#3A2E16;
    --bad:#E88A76; --bad-bg:#3D2019; --info:#86C3CC; --info-bg:#1D3033;
    --idle:#9C8F74; --idle-bg:#2A251C; --badge-bg:#B5503A;
    --shadow-sm:inset 0 1px 0 rgba(255,240,200,.05), 0 3px 10px -4px rgba(0,0,0,.5);
    --shadow:inset 0 1px 0 rgba(255,240,200,.05), 0 8px 22px -8px rgba(0,0,0,.6);
    --shadow-lg:0 18px 44px -12px rgba(0,0,0,.7);
    --linen-weave:rgba(255,240,200,.028);
    --thead-bg:#2C261D;
    --rail-link:#CFC3A8; --rail-hover-bg:rgba(255,240,200,.06); --rail-hover-fg:#F1E9D6;
    --rail-active-bg:#2E2A1F; --rail-active-fg:#C9D796;
    --rail-title:#F1E9D6; --rail-sub:#9C8F74; --rail-sep:#7E735C;
  }
}
:root[data-skin="linen"][data-theme="dark"]{
  --brand:#A9BC6A; --brand-600:#B8C97E; --brand-700:#C9D796;
  --accent:#D58F6A; --accent-600:#E0A283; --on-brand:#1E1A10; --on-solid:#1E1A10;
  --ink:#F1E9D6; --ink-2:#E3D8BF; --body:#CFC3A8; --muted:#9C8F74;
  --rail:#1E1A13; --rail-fg:#CFC3A8; --rail-line:#332C20;
  --line:#3A3226; --line-2:#4A4031;
  --bg:#26211A; --surface:#1A1712; --card:#26211A; --veil:rgba(26,23,18,.92);
  --brand-wash:#2E3320; --flax:#2A2214;
  --ok:#A9BC6A; --ok-bg:#2A3019; --warn:#E0B062; --warn-bg:#3A2E16;
  --bad:#E88A76; --bad-bg:#3D2019; --info:#86C3CC; --info-bg:#1D3033;
  --idle:#9C8F74; --idle-bg:#2A251C; --badge-bg:#B5503A;
  --shadow-sm:inset 0 1px 0 rgba(255,240,200,.05), 0 3px 10px -4px rgba(0,0,0,.5);
  --shadow:inset 0 1px 0 rgba(255,240,200,.05), 0 8px 22px -8px rgba(0,0,0,.6);
  --shadow-lg:0 18px 44px -12px rgba(0,0,0,.7);
  --linen-weave:rgba(255,240,200,.028);
  --thead-bg:#2C261D;
  --rail-link:#CFC3A8; --rail-hover-bg:rgba(255,240,200,.06); --rail-hover-fg:#F1E9D6;
  --rail-active-bg:#2E2A1F; --rail-active-fg:#C9D796;
  --rail-title:#F1E9D6; --rail-sub:#9C8F74; --rail-sep:#7E735C;
}

/* The weave: two fine grids of thread, too faint to read as a pattern. */
:root[data-skin="linen"] body{background-color:var(--surface); background-image:
  repeating-linear-gradient(0deg, var(--linen-weave) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(90deg, var(--linen-weave) 0 1px, transparent 1px 3px)}
:root[data-skin="linen"] .chooser{background:transparent}
:root[data-skin="linen"] .sidebar{box-shadow:inset -8px 0 18px -14px rgba(80,60,20,.3)}
:root[dir="rtl"][data-skin="linen"] .sidebar{box-shadow:inset 8px 0 18px -14px rgba(80,60,20,.3)}
:root[data-skin="linen"] .side-nav a{border-radius:10px}
:root[data-skin="linen"] .side-nav a.is-active{font-weight:600; box-shadow:var(--shadow-sm)}
:root[data-skin="linen"] .topbar{-webkit-backdrop-filter:none; backdrop-filter:none}
:root[data-skin="linen"] .kpi::before{width:3px; opacity:.8}
:root[data-skin="linen"] .kpi-value{font-weight:600}
:root[data-skin="linen"] .btn{border-radius:10px}
:root[data-skin="linen"] .btn:not(.btn-soft):not(.btn-ghost){box-shadow:0 2px 0 var(--brand-700)}
:root[data-skin="linen"] .btn-danger:not(.btn-soft):not(.btn-ghost){box-shadow:0 2px 0 var(--accent-600)}
:root[data-skin="linen"] .btn:hover:not(:disabled){transform:none}
:root[data-skin="linen"] .btn:active:not(:disabled){transform:translateY(1px); box-shadow:none}
:root[data-skin="linen"] .btn-icon{border-radius:10px}
:root[data-skin="linen"] :is(.chip, .pg, .icon-btn, .search-box input){border-radius:10px}
:root[data-skin="linen"] .tabs{border-bottom:0; gap:4px}
:root[data-skin="linen"] .tabs a{border:1px solid transparent; border-radius:10px}
:root[data-skin="linen"] .tabs a.is-active{background:var(--card); border-color:var(--line-2);
  color:var(--brand); font-weight:600; box-shadow:var(--shadow-sm)}
:root[data-skin="linen"] table.data thead th{background:var(--thead-bg); color:var(--muted)}
:root[data-skin="linen"] table.data tbody tr:hover td{background:var(--brand-wash)}
:root[data-skin="linen"] .tile::after{opacity:.06}
:root[data-skin="linen"] .tile:hover{transform:translateY(-2px)}
/* Card and dialog titles in the book face too. */
:root[data-skin="linen"] :is(.card-head, .cal-dlg-head) :is(h2, h3){font-family:var(--f-display)}

/* Icons, linen: a fine pen line with softened ends, the module's colour
   washed into the paper rather than a solid block. */
:root[data-skin="linen"] .ico{stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
:root[data-skin="linen"] .tile-icon{border-radius:14px; box-shadow:none; color:var(--tile-color, var(--brand));
  background:color-mix(in srgb, var(--tile-color, var(--brand)) 15%, var(--card));
  border:1px solid color-mix(in srgb, var(--tile-color, var(--brand)) 32%, var(--line))}


/* =====================================================================
   5. NEON -- a night city: cut corners, lit edges and glowing figures.
      Light keeps the shapes and the colours, without the glow.
   ===================================================================== */

:root[data-skin="neon"]{
  --brand:#0091AD; --brand-600:#007C95; --brand-700:#00677C;
  --accent:#C8007F; --accent-600:#A8006B; --on-brand:#FFFFFF; --on-solid:#FFFFFF;
  --ink:#0E1426; --ink-2:#1B2440; --body:#2E3A55; --muted:#5E6C88;
  --rail:#FFFFFF; --rail-fg:#2E3A55; --rail-line:rgba(0,145,173,.3);
  --line:#D3DAE8; --line-2:#BFC9DD;
  --bg:#FFFFFF; --surface:#EEF1F7; --card:#FFFFFF; --veil:rgba(238,241,247,.92);
  --brand-wash:rgba(0,145,173,.1);
  --ok:#0A8A4A; --ok-bg:rgba(10,138,74,.1); --warn:#8A7A00; --warn-bg:rgba(170,150,0,.12);
  --bad:#D1204A; --bad-bg:rgba(209,32,74,.1); --info:#0091AD; --info-bg:rgba(0,145,173,.1);
  --idle:#5E6C88; --idle-bg:rgba(94,108,136,.1); --badge-bg:#C8007F; --badge-fg:#FFFFFF;
  --radius:3px; --radius-lg:4px; --radius-sm:2px;
  --shadow-sm:0 1px 0 rgba(14,20,38,.05); --shadow:0 6px 18px -8px rgba(14,20,38,.2);
  --shadow-lg:0 14px 40px -12px rgba(14,20,38,.3);
  --f-display:system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --f-body:system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --neon-glow:0; --neon-bg:none;
  --neon-cut:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  --neon-cut-sm:polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  --menu-bg:#FFFFFF;
  --rail-link:#3B4866; --rail-hover-bg:rgba(0,145,173,.07); --rail-hover-fg:#0E1426;
  --rail-active-bg:linear-gradient(90deg, rgba(0,145,173,.16), rgba(0,145,173,.02)); --rail-active-fg:#00677C;
  --rail-title:#0E1426; --rail-sub:#5E6C88; --rail-sep:#8792AA;
}
@media (prefers-color-scheme: dark){
  :root[data-skin="neon"]:not([data-theme="light"]){
    --brand:#00E5FF; --brand-600:#5CEFFF; --brand-700:#8CF4FF;
    --accent:#FF00AA; --accent-600:#FF4DC4; --on-brand:#041018; --on-solid:#041018;
    --ink:#EAF7FF; --ink-2:#C9DCEB; --body:#B4C6D8; --muted:#7F93A8;
    --rail:#0A0C18; --rail-fg:#8FA3B8; --rail-line:rgba(0,229,255,.25);
    --line:rgba(0,229,255,.2); --line-2:rgba(0,229,255,.34);
    --bg:#0C1020; --surface:#07080F; --card:#0C1020; --veil:rgba(7,8,15,.9);
    --brand-wash:rgba(0,229,255,.1);
    --ok:#39FF88; --ok-bg:rgba(57,255,136,.12); --warn:#E4FF3A; --warn-bg:rgba(228,255,58,.12);
    --bad:#FF4D6D; --bad-bg:rgba(255,77,109,.14); --info:#00E5FF; --info-bg:rgba(0,229,255,.12);
    --idle:#7F93A8; --idle-bg:rgba(127,147,168,.14); --badge-bg:#FF00AA; --badge-fg:#0B0212;
    --shadow-sm:none; --shadow:0 0 22px -6px rgba(0,229,255,.35); --shadow-lg:0 0 40px -10px rgba(0,229,255,.4);
    --neon-glow:1;
    --neon-bg:radial-gradient(900px 500px at 85% -10%, rgba(255,0,170,.16), transparent 60%),
              radial-gradient(800px 500px at 0% 110%, rgba(0,229,255,.14), transparent 60%);
    --menu-bg:#0C1020;
    --rail-link:#8FA3B8; --rail-hover-bg:rgba(0,229,255,.07); --rail-hover-fg:#EAF7FF;
    --rail-active-bg:linear-gradient(90deg, rgba(0,229,255,.22), rgba(0,229,255,.04)); --rail-active-fg:#00E5FF;
    --rail-title:#EAF7FF; --rail-sub:#7F93A8; --rail-sep:#5F7389;
  }
}
:root[data-skin="neon"][data-theme="dark"]{
  --brand:#00E5FF; --brand-600:#5CEFFF; --brand-700:#8CF4FF;
  --accent:#FF00AA; --accent-600:#FF4DC4; --on-brand:#041018; --on-solid:#041018;
  --ink:#EAF7FF; --ink-2:#C9DCEB; --body:#B4C6D8; --muted:#7F93A8;
  --rail:#0A0C18; --rail-fg:#8FA3B8; --rail-line:rgba(0,229,255,.25);
  --line:rgba(0,229,255,.2); --line-2:rgba(0,229,255,.34);
  --bg:#0C1020; --surface:#07080F; --card:#0C1020; --veil:rgba(7,8,15,.9);
  --brand-wash:rgba(0,229,255,.1);
  --ok:#39FF88; --ok-bg:rgba(57,255,136,.12); --warn:#E4FF3A; --warn-bg:rgba(228,255,58,.12);
  --bad:#FF4D6D; --bad-bg:rgba(255,77,109,.14); --info:#00E5FF; --info-bg:rgba(0,229,255,.12);
  --idle:#7F93A8; --idle-bg:rgba(127,147,168,.14); --badge-bg:#FF00AA; --badge-fg:#0B0212;
  --shadow-sm:none; --shadow:0 0 22px -6px rgba(0,229,255,.35); --shadow-lg:0 0 40px -10px rgba(0,229,255,.4);
  --neon-glow:1;
  --neon-bg:radial-gradient(900px 500px at 85% -10%, rgba(255,0,170,.16), transparent 60%),
            radial-gradient(800px 500px at 0% 110%, rgba(0,229,255,.14), transparent 60%);
  --menu-bg:#0C1020;
  --rail-link:#8FA3B8; --rail-hover-bg:rgba(0,229,255,.07); --rail-hover-fg:#EAF7FF;
  --rail-active-bg:linear-gradient(90deg, rgba(0,229,255,.22), rgba(0,229,255,.04)); --rail-active-fg:#00E5FF;
  --rail-title:#EAF7FF; --rail-sub:#7F93A8; --rail-sep:#5F7389;
}

/* The glow only where it is dark enough to glow: --neon-glow is 1 or 0. */
:root[data-skin="neon"]{
  --glow-a:0 0 calc(var(--neon-glow) * 14px) color-mix(in srgb, var(--brand) calc(var(--neon-glow) * 70%), transparent);
  --glow-b:0 0 calc(var(--neon-glow) * 14px) color-mix(in srgb, var(--accent) calc(var(--neon-glow) * 70%), transparent);
}

/* Scan lines over the city glow. */
:root[data-skin="neon"] body{background-color:var(--surface); background-attachment:fixed; background-image:
  repeating-linear-gradient(0deg, rgba(255,255,255,calc(var(--neon-glow) * .022)) 0 1px, transparent 1px 3px), var(--neon-bg)}
:root[data-skin="neon"] .chooser{background:transparent}

/* Cut corners on the things that hold nothing that could open over their
   edge; cards and menus keep a square box, marked at two corners instead,
   because a clip would cut off a drop-down inside them. */
:root[data-skin="neon"] :is(.kpi, .tile, .btn, .chip, .side-nav a, .search-box input, .pg){clip-path:var(--neon-cut)}
:root[data-skin="neon"] :is(.badge, .tile-icon, .btn-sm, .icon-btn .dot){clip-path:var(--neon-cut-sm)}
:root[data-skin="neon"] :is(.kpi, .tile, .btn, .chip, .side-nav a, .pg):focus-visible{clip-path:none}
:root[data-skin="neon"] :is(.btn, .btn-icon, .chip, .pg, .icon-btn, .badge, .search-box input, .side-nav a, .tabs a){border-radius:2px}
:root[data-skin="neon"] .card{background:
  linear-gradient(var(--brand), var(--brand)) left top / 16px 2px no-repeat,
  linear-gradient(var(--brand), var(--brand)) left top / 2px 16px no-repeat,
  linear-gradient(var(--accent), var(--accent)) right bottom / 16px 2px no-repeat,
  linear-gradient(var(--accent), var(--accent)) right bottom / 2px 16px no-repeat,
  var(--card); box-shadow:var(--shadow-sm), inset 0 0 24px color-mix(in srgb, var(--brand) calc(var(--neon-glow) * 6%), transparent)}
:root[data-skin="neon"] :is(.menu, .tp, .cp, .cal-dlg){background-color:var(--menu-bg); border-color:var(--line-2);
  box-shadow:var(--shadow-lg), var(--glow-a)}

:root[data-skin="neon"] .sidebar{border-inline-end-color:var(--rail-line)}
:root[data-skin="neon"] .side-nav a.is-active{box-shadow:inset 3px 0 0 var(--brand); text-shadow:var(--glow-a)}
:root[dir="rtl"][data-skin="neon"] .side-nav a.is-active{box-shadow:inset -3px 0 0 var(--brand);
  background:linear-gradient(270deg, color-mix(in srgb, var(--brand) 20%, transparent), transparent)}
:root[data-skin="neon"] .topbar{border-bottom-color:color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow:0 1px 14px -6px color-mix(in srgb, var(--accent) calc(var(--neon-glow) * 60%), transparent)}
:root[data-skin="neon"] .icon-btn{color:var(--brand)}
:root[data-skin="neon"] .icon-btn .ico{filter:drop-shadow(var(--glow-a))}

:root[data-skin="neon"] .btn:not(.btn-soft):not(.btn-ghost){box-shadow:var(--glow-a)}
:root[data-skin="neon"] .btn-danger:not(.btn-soft):not(.btn-ghost){box-shadow:var(--glow-b)}
:root[data-skin="neon"] .btn:hover:not(:disabled){transform:none; filter:brightness(1.12)}
:root[data-skin="neon"] .btn-soft{background:color-mix(in srgb, var(--accent) 10%, var(--card)); color:var(--accent-600);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); box-shadow:none}
:root[data-skin="neon"] .btn-soft:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 18%, var(--card)); color:var(--accent-600)}
:root[data-skin="neon"] .btn-ghost:hover:not(:disabled){background:var(--brand-wash); color:var(--brand); border-color:var(--brand)}

:root[data-skin="neon"] .tabs a.is-active{color:var(--accent-600); border-bottom-color:var(--accent); text-shadow:var(--glow-b)}
:root[data-skin="neon"] .kpi::before{box-shadow:0 0 calc(var(--neon-glow) * 10px) var(--kpi-color, var(--brand))}
:root[data-skin="neon"] .kpi-value{font-family:var(--f-mono); font-weight:600; color:var(--kpi-color, var(--brand));
  text-shadow:0 0 calc(var(--neon-glow) * 12px) color-mix(in srgb, var(--kpi-color, var(--brand)) 70%, transparent)}
:root[data-skin="neon"] .kpi:hover{transform:none}
:root[data-skin="neon"] .tile::after{display:none}
:root[data-skin="neon"] .tile:hover{transform:none; border-color:var(--tile-color, var(--brand));
  box-shadow:0 0 calc(var(--neon-glow) * 22px) -4px var(--tile-color, var(--brand))}
:root[data-skin="neon"] table.data thead th{color:var(--brand); background:transparent;
  border-bottom-color:color-mix(in srgb, var(--brand) 35%, transparent)}
:root[data-skin="neon"] table.data tbody tr:hover td{background:var(--brand-wash)}
:root[data-skin="neon"] :is(table.data td.num, table.data .num, .mono){font-family:var(--f-mono)}
:root[data-skin="neon"] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):focus{
  box-shadow:0 0 0 1px var(--brand), var(--glow-a)}

/* Capitals and tracking read as a display in English; in Arabic they would
   pull the joined letters apart, so they stay left-to-right only. */
:root[dir="ltr"][data-skin="neon"] :is(.topbar h1, .card-head h2, .card-head h3, .tabs a, .btn, .badge, table.data thead th){
  text-transform:uppercase; letter-spacing:.08em}
:root[dir="ltr"][data-skin="neon"] :is(.btn, .badge){font-size:.8rem}
:root[data-skin="neon"] .page-head h1{text-shadow:0 0 calc(var(--neon-glow) * 18px) color-mix(in srgb, var(--accent) 45%, transparent)}

/* Icons, neon: a thin lit line in the module's colour; the tile is an
   outline of light rather than a filled block. */
:root[data-skin="neon"] .ico{stroke-width:1.5}
:root[data-skin="neon"] :is(.kpi-top, .card-head) .ico{filter:drop-shadow(0 0 calc(var(--neon-glow) * 4px) currentColor)}
:root[data-skin="neon"] .card-head .ico{color:var(--brand)}
:root[data-skin="neon"] .tile-icon{border-radius:0; color:var(--tile-color, var(--brand));
  background:color-mix(in srgb, var(--tile-color, var(--brand)) 10%, transparent);
  border:1px solid var(--tile-color, var(--brand)); box-shadow:inset 0 0 14px color-mix(in srgb, var(--tile-color, var(--brand)) 25%, transparent)}
:root[data-skin="neon"] .tile-icon .ico{filter:drop-shadow(0 0 calc(var(--neon-glow) * 5px) currentColor)}

} /* @media screen */

@media (prefers-reduced-motion: reduce){
  :root[data-skin="glass"] body::before{animation:none}
  :root[data-skin="retro"] .side-nav a.is-active .nav-label::after{animation:none}
}

/* The Sales & Marketing group switcher follows each skin's corners. */
:root[data-skin="retro"] :is(.module-groups, .module-groups a){border-radius:0}
:root[data-skin="neon"] :is(.module-groups, .module-groups a){border-radius:2px}