/*
Theme Name: Tholth Clean
Theme URI: https://mall.tholth.com
Description: Single-page overlay storefront for Tholth Mall (KSA). One index.php, one overlay-engine.js, one style.css. Snow landing, souq grid, overlay panels for product/cart/checkout/account/wallet. WooCommerce pages redirect home with ?tm_open= flags.
Author: Tholth Commerce
Version: 1.0.0
Requires PHP: 8.0
License: Proprietary
Text Domain: tholth-clean
Tags: e-commerce, one-column, custom-colors
WooCommerce: yes
*/

@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Manrope:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;600;700&display=swap");

/* ============ 1. SKINS — everything themes through custom properties ============ */
:root { --radius: 4px; }

body.skin-default {
  --bg:#0b0d10; --bg2:#101318; --card:#151920; --field:#0d1015;
  --ink:#ece7dc; --mut:#97a0ae; --a:#c9a24b; --line:#242a34; --lineA:#3a3320;
  --ok:#7fc98f; --warn:#d9a441; --err:#e07a6b; --abtn:#171204;
  --glow: rgba(201,162,75,.16); --shadow: rgba(0,0,0,.55);
}
body.skin-ivory {
  --bg:#f4efe6; --bg2:#fbf8f1; --card:#ffffff; --field:#f1ece1;
  --ink:#23262d; --mut:#6d7480; --a:#a8802f; --line:#e2dccb; --lineA:#d8c99a;
  --ok:#3e8e5a; --warn:#a8781f; --err:#bb4f3f; --abtn:#fffdf6;
  --glow: rgba(168,128,47,.14); --shadow: rgba(84,66,20,.14);
}
body.skin-azure {
  --bg:#0a1220; --bg2:#0e1830; --card:#12203c; --field:#0b1428;
  --ink:#e6edf7; --mut:#8fa3bf; --a:#5aa2e8; --line:#1e3050; --lineA:#27456e;
  --ok:#63c7a0; --warn:#e0b054; --err:#e0736b; --abtn:#06121f;
  --glow: rgba(90,162,232,.16); --shadow: rgba(0,0,0,.55);
}
body.skin-rose {
  --bg:#170f14; --bg2:#201419; --card:#2a1a20; --field:#1c1116;
  --ink:#f6e8ea; --mut:#b79aa1; --a:#e08ba0; --line:#3d2730; --lineA:#5c3a46;
  --ok:#8fce9f; --warn:#e0b054; --err:#e06b6b; --abtn:#240a12;
  --glow: rgba(224,139,160,.16); --shadow: rgba(0,0,0,.55);
}
body.skin-forest {
  --bg:#0b130e; --bg2:#101a13; --card:#15231a; --field:#0d1710;
  --ink:#e8f1e8; --mut:#93ab98; --a:#7fb069; --line:#22382a; --lineA:#2f4d38;
  --ok:#8fce9f; --warn:#e0b054; --err:#e0736b; --abtn:#0c1a10;
  --glow: rgba(127,176,105,.16); --shadow: rgba(0,0,0,.55);
}

/* ============ 2. BASE ============ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family:"Manrope", "Segoe UI", sans-serif;
  font-size:15px; line-height:1.55;
  transition: background-color .5s ease, color .5s ease;
  overflow-x:hidden;
}
body.tm-locked { overflow:hidden; }
.font-display, h1, h2, h3 { font-family:"Marcellus", Georgia, serif; font-weight:400; }
.font-ar, [dir="rtl"] { font-family:"Noto Naskh Arabic", serif; }
img { max-width:100%; display:block; }
button { font-family:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, select, textarea { font-family:inherit; }
::selection { background: var(--a); color: var(--abtn); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius:8px; }
::-webkit-scrollbar-track { background: transparent; }

.hairline { border-color: var(--line); }
.lbl { display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mut); margin-bottom:7px; }
.mut { color: var(--mut); }
.tabular { font-variant-numeric: tabular-nums; }

/* ambient layers */
.tm-lattice {
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--a) 14%, transparent) 1px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.tm-noise {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}
.tm-glow {
  position:fixed; z-index:0; pointer-events:none; width:70vw; height:70vw; left:50%; top:-30vw;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, var(--glow), transparent 70%);
}

/* ============ 3. SHAPES ============ */
.chamfer { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.chamfer-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.arch { border-radius: 999px 999px 6px 6px / 620px 620px 6px 6px; }
.arch-deep { border-radius: 999px 999px 4px 4px / 480px 480px 4px 4px; }

/* ============ 4. BUTTONS / FIELDS / CHIPS ============ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
  padding:0 22px; height:44px; transition: transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.btn:active { transform: scale(.97); }
.btn-a { background: var(--a); color: var(--abtn); }
.btn-a:hover { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--a) 60%, transparent); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--a); color: var(--a); }
.btn-danger { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 45%, transparent); }
.btn[disabled] { opacity:.45; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.field {
  width:100%; background: var(--field); color: var(--ink);
  border:1px solid var(--line); border-radius: var(--radius);
  padding:11px 13px; font-size:14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field:focus { outline:none; border-color: var(--a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 18%, transparent); }
.field::placeholder { color: color-mix(in srgb, var(--mut) 70%, transparent); }
.field.tm-invalid { border-color: var(--err); }

.chip {
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:3px;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.chip-a { background: color-mix(in srgb, var(--a) 14%, transparent); color: var(--a); }
.chip-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.chip-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.chip-err { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.chip-mut { background: color-mix(in srgb, var(--mut) 12%, transparent); color: var(--mut); }

/* ============ 5. SNOW ============ */
.tm-snow { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.tm-snow span {
  position:absolute; top:-4vh; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, color-mix(in srgb, #ffffff 55%, var(--a)));
  animation: tm-fall var(--d, 10s) linear var(--delay, 0s) infinite;
}
@keyframes tm-fall {
  0%   { transform: translate3d(0, -4vh, 0); }
  100% { transform: translate3d(var(--dx, 40px), 106vh, 0); }
}

/* ============ 6. LANDING ============ */
.tm-landing {
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:60px 16px 30px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--a) 9%, var(--bg)) 0%, var(--bg) 55%);
  transition: transform 1s cubic-bezier(.7,0,.3,1), opacity 1s ease, visibility 0s 1s;
}
body.tm-entered .tm-landing { transform: scale(1.28) translateY(-3%); opacity:0; visibility:hidden; pointer-events:none; }

.tm-portal { position:relative; width:100%; max-width:620px; }
.tm-portal-frame { position:absolute; inset:-8px; border:1px solid var(--lineA); pointer-events:none; }
.tm-portal-inner {
  position:relative; overflow:hidden; text-align:center; padding:56px 26px 34px;
  border:1px solid var(--lineA);
  background: linear-gradient(180deg, color-mix(in srgb, var(--a) 13%, var(--bg2)) 0%, var(--bg2) 42%, color-mix(in srgb, var(--bg2) 92%, #000) 100%);
  box-shadow: 0 40px 120px -40px color-mix(in srgb, var(--a) 30%, transparent), inset 0 0 80px color-mix(in srgb, var(--bg) 60%, transparent);
}
.tm-arch, .tm-portal-frame, .tm-portal-inner { border-radius: 999px 999px 8px 8px / 420px 420px 8px 8px; }

.tm-word { font-size: clamp(52px, 13vw, 104px); letter-spacing:.08em; line-height:1; color: var(--ink); }
.tm-word-ar { font-size: clamp(22px, 5vw, 32px); color: var(--a); margin-top:6px; }
.tm-tagline { max-width:400px; margin:20px auto 0; color: var(--mut); font-size:15px; }
.tm-tagline-ar { color: var(--mut); opacity:.8; font-size:13px; margin-top:5px; }

.tm-stats { display:flex; justify-content:center; margin-top:34px; padding-top:22px; }
.tm-stat { padding:0 18px; text-align:center; }
.tm-stat + .tm-stat { border-left:1px solid var(--line); }
.tm-stat b { display:block; font-family:"Marcellus", serif; font-weight:400; font-size:27px; color: var(--a); font-variant-numeric: tabular-nums; }
.tm-stat i { display:block; font-style:normal; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--mut); margin-top:3px; }
.tm-stat em { display:block; font-style:normal; font-size:11px; color: var(--mut); opacity:.8; }

.tm-live { margin-top:12px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color: var(--mut); opacity:.75; display:flex; align-items:center; justify-content:center; gap:8px; }
.tm-live-dot { width:6px; height:6px; border-radius:50%; background: var(--ok); animation: tm-pulse 2s ease-in-out infinite; }

.tm-landing-footer { position:absolute; bottom:22px; left:0; right:0; text-align:center; }
.tm-landing-links { display:flex; gap:20px; justify-content:center; }
.tm-landing-links button { font-size:12px; color: var(--mut); letter-spacing:.04em; transition: color .2s; }
.tm-landing-links button:hover { color: var(--a); }
.tm-landing-note { margin-top:9px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--mut); opacity:.55; }

/* ============ 7. TOPBAR ============ */
.tm-topbar {
  position:fixed; top:0; left:0; right:0; z-index:50; height:64px;
  display:flex; align-items:center; gap:12px; padding:0 18px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px); border-bottom:1px solid var(--line);
  opacity:0; transform: translateY(-8px); pointer-events:none; transition: opacity .5s ease, transform .5s ease;
}
body.tm-entered .tm-topbar { opacity:1; transform:none; pointer-events:auto; }
.tm-logo { display:flex; align-items:center; gap:10px; }
.tm-logo svg { color: var(--a); transition: transform .5s ease; }
.tm-logo:hover svg { transform: rotate(45deg); }
.tm-logo b { font-family:"Marcellus", serif; font-weight:400; letter-spacing:.16em; font-size:17px; line-height:1; }
.tm-logo small { display:block; font-size:11px; color: var(--mut); margin-top:2px; }
.tm-search { position:relative; flex:1; display:flex; justify-content:center; padding:0 14px; }
.tm-search .field { max-width:430px; border-radius:999px; padding:9px 14px 9px 36px; font-size:13.5px; }
.tm-search svg { position:absolute; left:28px; color: var(--mut); }
.tm-dots { display:flex; align-items:center; gap:7px; padding:0 12px; height:32px; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.tm-dot { width:15px; height:15px; border-radius:50%; border:1px solid var(--line); transition: transform .3s ease, box-shadow .3s ease; }
.tm-dot:hover { transform: scale(1.25); }
.tm-dot.on { transform: scale(1.15); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--a); }
.tm-iconbtn { position:relative; padding:8px; color: var(--mut); transition: color .2s; }
.tm-iconbtn:hover { color: var(--a); }
.tm-badge {
  position:absolute; top:-1px; right:-3px; min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background: var(--a); color: var(--abtn); font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center;
  font-variant-numeric: tabular-nums; animation: tm-pop .35s cubic-bezier(.2,1.6,.4,1);
}
.tm-clock { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.12em; color: var(--mut); font-variant-numeric: tabular-nums; padding-left:14px; border-left:1px solid var(--line); }
.tm-clock i { width:6px; height:6px; border-radius:50%; background: var(--ok); animation: tm-pulse 2.2s infinite; font-style:normal; }

/* ============ 8. TICKER + SOUQ ============ */
.tm-ticker { border-bottom:1px solid var(--line); overflow:hidden; background: var(--bg2); }
.tm-ticker-track { display:flex; width:max-content; animation: tm-ticker 30s linear infinite; }
.tm-ticker:hover .tm-ticker-track { animation-play-state: paused; }
.tm-ticker span { padding:8px 26px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--mut); white-space:nowrap; }
.tm-ticker b { color: var(--a); font-weight:600; }
@keyframes tm-ticker { to { transform: translateX(-50%); } }

.tm-souq { position:relative; z-index:2; padding:96px 18px 40px; max-width:1240px; margin:0 auto; opacity:0; transition: opacity .7s ease .2s; }
body.tm-entered .tm-souq { opacity:1; }
.tm-souq-head { position:relative; margin:26px 0 30px; }
.tm-souq-eyebrow { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color: var(--a); display:flex; align-items:center; gap:12px; }
.tm-souq-eyebrow::after { content:""; height:1px; width:70px; background: var(--lineA); }
.tm-souq-title { font-size: clamp(44px, 8vw, 92px); line-height:1.02; margin-top:10px; overflow:hidden; }
.tm-souq-title span { display:inline-block; animation: tm-rise .9s cubic-bezier(.2,.8,.2,1) both; }
.tm-souq-ar {
  position:absolute; right:0; top:-14px; font-size: clamp(70px, 14vw, 170px); line-height:1;
  color: color-mix(in srgb, var(--a) 10%, transparent); pointer-events:none; user-select:none;
}
.tm-souq-sub { color: var(--mut); max-width:520px; margin-top:12px; }

.tm-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 26px; }
.tm-pill {
  padding:9px 18px; border-radius:99px; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  color: var(--mut); box-shadow: inset 0 0 0 1px var(--line); transition: all .25s ease;
}
.tm-pill:hover { color: var(--ink); transform: translateY(-1px); }
.tm-pill.on { background: var(--a); color: var(--abtn); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--a) 65%, transparent); }
.tm-sort { margin-left:auto; }
.tm-sort select { background: var(--field); color: var(--ink); border:1px solid var(--line); border-radius: var(--radius); padding:9px 12px; font-size:13px; cursor:pointer; }

/* ============ 9. PRODUCT GRID ============ */
.tm-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap:26px 22px; }
.tm-card {
  position:relative; background: var(--card); border:1px solid var(--line); padding:14px 14px 18px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  animation: tm-rise .6s cubic-bezier(.2,.8,.2,1) both;
  transform-style: preserve-3d;
}
.tm-card:hover { border-color: var(--lineA); box-shadow: 0 26px 50px -24px var(--shadow), 0 0 0 1px color-mix(in srgb, var(--a) 25%, transparent); }
.tm-card-img { position:relative; overflow:hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 8%, var(--field)), var(--field)); border:1px solid var(--line); border-radius: 999px 999px 4px 4px / 300px 300px 4px 4px; }
.tm-card-img .ratio { aspect-ratio: 1; }
.tm-card-img img { width:100%; height:100%; object-fit:cover; transition: transform 1.4s cubic-bezier(.2,.6,.2,1); }
.tm-card:hover .tm-card-img img { transform: scale(1.09); }
.tm-card-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:"Noto Naskh Arabic", serif; font-size:64px; color: color-mix(in srgb, var(--a) 55%, transparent); }
.tm-badges { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; z-index:2; }
.tm-wish {
  position:absolute; top:8px; right:8px; z-index:2; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color: var(--mut);
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(4px);
  border:1px solid var(--line); transition: all .25s ease;
}
.tm-wish:hover, .tm-wish.on { color: var(--err); border-color: var(--err); transform: scale(1.08); }
.tm-card-body { padding:14px 4px 0; }
.tm-card-cat { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--a); }
.tm-card-name { font-family:"Marcellus", serif; font-size:19px; margin-top:5px; line-height:1.25; }
.tm-card-ar { font-size:12.5px; color: var(--mut); margin-top:1px; }
.tm-card-rate { display:flex; align-items:center; gap:7px; margin-top:7px; font-size:12px; color: var(--mut); }
.tm-stars { color: var(--a); letter-spacing:2px; font-size:12px; line-height:1; }
.tm-card-price { display:flex; align-items:baseline; gap:8px; margin-top:9px; }
.tm-card-price b { font-family:"Marcellus", serif; font-weight:400; font-size:20px; font-variant-numeric: tabular-nums; }
.tm-card-price s { color: var(--mut); font-size:13px; }
.tm-swatches { display:flex; gap:6px; margin-top:10px; }
.tm-swatches i { width:14px; height:14px; border-radius:50%; border:1px solid var(--line); }
.tm-add { margin-top:14px; width:100%; height:42px; }

.tm-empty { text-align:center; padding:70px 20px; color: var(--mut); }
.tm-empty b { display:block; font-family:"Marcellus", serif; font-weight:400; font-size:26px; color: var(--ink); margin-bottom:8px; }

/* accordion (product overlay) */
.tm-acc-b { display:none; color: var(--mut); }
.tm-acc.open .tm-acc-b { display:block; animation: tm-fade .3s ease; }
.tm-acc.open .tm-acc-h span { transform: rotate(180deg); }
.tm-acc-h { color: var(--ink); transition: color .2s; }
.tm-acc-h:hover { color: var(--a); }
@media (min-width: 980px) { .tm-pgrid2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } }

/* loading shimmer (grid skeletons, gateway boards) */
.tm-shimmer {
	position: relative; overflow: hidden; border-radius: 3px;
	background: color-mix(in srgb, var(--mut) 12%, var(--card));
}
.tm-shimmer::after {
	content: ""; position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a) 14%, transparent), transparent);
	animation: tm-sweep 1.4s ease-in-out infinite;
}
@keyframes tm-sweep { 100% { transform: translateX(100%); } }
#tm-viewer:focus-visible { outline: 2px solid var(--a); outline-offset: 4px; }
.tm-stagger { animation: tm-fade .5s both; }
.tm-2col { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tm-ckgrid { grid-template-columns: 1fr; }
@media (min-width: 980px) {
	.tm-2col { grid-template-columns: 1fr 1fr; }
	.tm-ckgrid { grid-template-columns: minmax(0, 1fr) 360px !important; }
}
#tm-ck-place:disabled, #tu-go:disabled, #wd-go:disabled { opacity: .55; cursor: not-allowed; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ============ 10. OVERLAYS ============ */
.tm-ovl { position:fixed; inset:0; z-index:70; visibility:hidden; }
.tm-ovl.open { visibility:visible; }
.tm-ovl-bg { position:absolute; inset:0; background: color-mix(in srgb, #05060a 62%, transparent); backdrop-filter: blur(5px); opacity:0; transition: opacity .35s ease; }
.tm-ovl.open .tm-ovl-bg { opacity:1; }
.tm-ovl-sheet {
  position:absolute; inset:0; overflow-y:auto; background: var(--bg2);
  opacity:0; transform: translateY(24px) scale(.985); transition: opacity .4s ease, transform .45s cubic-bezier(.2,.9,.25,1);
}
.tm-ovl.open .tm-ovl-sheet { opacity:1; transform:none; }
.tm-ovl-bar {
  position:sticky; top:0; z-index:5; height:56px; display:flex; align-items:center; gap:12px; padding:0 22px;
  border-bottom:1px solid var(--line); background: color-mix(in srgb, var(--bg2) 90%, transparent); backdrop-filter: blur(8px);
}
.tm-ovl-bar h2 { font-size:20px; }
.tm-ovl-close { margin-left:auto; padding:8px; color: var(--mut); transition: transform .3s ease, color .2s; }
.tm-ovl-close:hover { color: var(--ink); transform: rotate(90deg); }
.tm-ovl-inner { max-width:1150px; margin:0 auto; padding:30px 22px 60px; }

/* side panel (cart) */
.tm-side {
  position:absolute; top:0; right:0; bottom:0; width:min(430px, 100%); background: var(--bg2);
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  transform: translateX(103%); transition: transform .45s cubic-bezier(.2,.9,.25,1);
}
.tm-ovl.open .tm-side { transform:none; }
@media (max-width: 720px) {
  .tm-side { top:auto; left:0; right:0; width:100%; max-height:86vh; border-left:0; border-top:1px solid var(--line);
    border-radius:18px 18px 0 0; transform: translateY(103%); }
  .tm-ovl.open .tm-side { transform:none; }
}

/* ============ 11. FOOTER / TOASTS / MISC ============ */
.tm-footer { position:relative; z-index:2; border-top:1px solid var(--line); background: var(--bg2); padding:34px 18px 40px; text-align:center; }
.tm-footer-links { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.tm-footer-links button { font-size:12.5px; color: var(--mut); transition: color .2s; }
.tm-footer-links button:hover { color: var(--a); }
.tm-footer-note { margin-top:12px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color: var(--mut); opacity:.55; }

.tm-toasts { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.tm-toast {
  background: var(--card); border:1px solid var(--line); color: var(--ink); font-size:13px;
  padding:11px 18px; box-shadow: 0 16px 40px -16px var(--shadow); animation: tm-pop .4s cubic-bezier(.2,1.4,.4,1);
  max-width:min(92vw, 480px);
}
.tm-toast.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.tm-toast.err { border-color: color-mix(in srgb, var(--err) 55%, var(--line)); }

.tm-phase-note { max-width:560px; margin:60px auto; text-align:center; padding:34px 26px; border:1px dashed var(--lineA); }
.tm-phase-note h3 { font-size:26px; margin-bottom:10px; }
.tm-phase-note p { color: var(--mut); font-size:14px; }

/* ============ 12. KEYFRAMES ============ */
@keyframes tm-rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }
@keyframes tm-fade { from { opacity:0; } to { opacity:1; } }
@keyframes tm-pop { 0% { opacity:0; transform: scale(.6); } 100% { opacity:1; transform: scale(1); } }
@keyframes tm-pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }

/* ============ 13. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .tm-snow { display:none; }
  .tm-ticker-track { animation:none; }
}

/* ============ 14. RESPONSIVE ============ */
@media (max-width: 900px) { .tm-search { display:none; } .tm-clock { display:none; } }
@media (max-width: 640px) {
  .tm-dots { border:0; padding:0 4px; }
  .tm-stat { padding:0 10px; } .tm-stat b { font-size:21px; }
  .tm-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:18px 12px; }
}