/* ===== NekoShade OFC design system (shared by site + admin) ===== */
/* Brand colours (admin can change these two) */
:root{--accent:#ff5fa2;--accent2:#7c5cff;--on-accent:#1b0a15;--r:14px;
 --fh:'Bricolage Grotesque','Segoe UI',sans-serif;--fb:'Figtree','Segoe UI',system-ui,sans-serif}
/* Dark theme tokens */
[data-theme=dark]{--bg:#110e1f;--surface:#19142d;--card:#1e1936;--field:#140f26;--text:#f4f1ff;--muted:#a59fc4;--line:#322b52;--link:#ff8fc0;--shadow:0 12px 32px #0007}
/* Light theme tokens */
[data-theme=light]{--bg:#f6f4fc;--surface:#fff;--card:#fff;--field:#fff;--text:#1d1736;--muted:#645e80;--line:#e2deef;--link:#c01a68;--shadow:0 12px 32px #3b2f7a1f}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--fb);transition:background .25s,color .25s}
h1,h2,h3{font-family:var(--fh);font-weight:700;line-height:1.15;letter-spacing:-.02em}
a{color:var(--link)}
.wrap{max-width:1120px;margin:auto;padding:0 20px}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;cursor:pointer;background:var(--accent);color:var(--on-accent);font:700 15px var(--fb);padding:10px 20px;border-radius:999px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.red{background:#ff6b6b;color:#2a0a0a}
.btn.icon{width:42px;height:42px;padding:0}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.card:focus-visible{outline:3px solid var(--accent2);outline-offset:2px}
/* Theme toggle icon: show the sun in dark mode, the moon in light mode */
[data-theme=dark] .ic-moon,[data-theme=light] .ic-sun{display:none}
/* Form fields */
input,select,textarea{width:100%;background:var(--field);color:var(--text);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit}
label{display:block;margin:12px 0 4px;color:var(--muted);font-size:14px}
/* Stat tiles (admin dashboard) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:16px}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stats b{display:block;font:700 28px var(--fh)}
.stats span{color:var(--muted);font-size:13px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ===== Cozy anime-night refresh: soft glow, floating sakura, gentle motion ===== */
:root{
 --cozy-lilac:#c8a8ff; --cozy-pink:#ffb8d2; --cozy-cream:#f5e9ff;
 --r:20px; --shadow:0 18px 50px #09051455;
}
[data-theme=dark]{
 --bg:#100d1b;--surface:#191528;--card:#201a31;--field:#171225;
 --text:#f7efff;--muted:#b7a9c9;--line:#39304c;--link:#ffc0dc;
 --on-accent:#241326;
}
[data-theme=light]{
 --bg:#fbf6ff;--surface:#fffaff;--card:#fffaff;--field:#fff;
 --text:#352743;--muted:#887891;--line:#eee1f1;--link:#a34d83;
 --on-accent:#2b1730;--shadow:0 18px 50px #a58bb51c;
}
body{overflow-x:hidden;background-image:radial-gradient(ellipse at 8% 8%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 34%),radial-gradient(ellipse at 92% 22%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 30%)}
.nav{background:color-mix(in srgb,var(--bg) 76%,transparent);backdrop-filter:blur(20px)}
.logo i{border-radius:10px 10px 12px 12px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 45%,transparent))}
.btn{box-shadow:0 5px 18px color-mix(in srgb,var(--accent) 17%,transparent);transition:transform .22s,box-shadow .22s,filter .22s}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 24%,transparent)}
.btn.ghost{box-shadow:none}
.hero{padding-top:78px;padding-bottom:54px;gap:34px}
.hero h1{max-width:12ch;letter-spacing:-.045em}
.hero h1 .accent-word{color:var(--accent)}
.hero p{line-height:1.8}
.term{border-radius:24px;position:relative;isolation:isolate;background:linear-gradient(145deg,#211a35,#120f20);border-color:#59476c;box-shadow:0 22px 60px #08051070}
.term:after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#ffb8d255,#b99cff22,transparent 65%);filter:blur(18px)}
.slider{margin:10px 0 12px;border-radius:24px}
.slide{aspect-ratio:21/7}
.sec-h{margin-top:68px}
.sec-h h2{letter-spacing:-.04em}
.sec-h h2:after{content:"";display:block;width:42px;height:4px;margin-top:10px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.chips .btn{box-shadow:none}
.grid{gap:22px}
.card{border-radius:22px;position:relative;box-shadow:0 8px 28px #09051416;transition:transform .28s,border-color .28s,box-shadow .28s}
.card:hover{transform:translateY(-7px);box-shadow:0 20px 44px #09051435}
.card .img{border-radius:0;overflow:hidden}
.card .img:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,#100b1b35);pointer-events:none}
.card .body{padding:19px}
.card h3{font-size:20px}
.badge{z-index:1;box-shadow:0 4px 12px #0002}
.contact{border-radius:26px;position:relative;overflow:hidden;box-shadow:var(--shadow);padding:42px}
.contact:after{content:"";position:absolute;right:24px;top:18px;width:62px;height:18px;background:radial-gradient(circle at 8px 9px,var(--accent) 0 2px,transparent 3px),radial-gradient(circle at 31px 5px,var(--accent2) 0 3px,transparent 4px),radial-gradient(circle at 54px 11px,var(--accent) 0 2px,transparent 3px);opacity:.55;pointer-events:none}
footer{padding-bottom:46px}
a:focus-visible,button:focus-visible{outline-offset:4px}
/* New cozy utility widgets */
.cozy-widgets{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px;margin:0 0 30px}
.cozy-widget{min-height:104px;padding:17px 19px;border:1px solid var(--line);border-radius:19px;background:color-mix(in srgb,var(--surface) 84%,transparent);box-shadow:0 8px 26px #09051412;position:relative;overflow:hidden}
.cozy-widget .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700}
.cozy-widget strong{display:block;font:700 22px var(--fh);margin-top:5px}
.cozy-widget p{font-size:13px;color:var(--muted);margin-top:3px}
.cozy-widget .widget-icon{position:absolute;right:14px;top:14px;font-size:25px;opacity:.78}
.cozy-widget.featured{background:linear-gradient(130deg,color-mix(in srgb,var(--accent2) 18%,var(--surface)),color-mix(in srgb,var(--accent) 14%,var(--surface)))}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#72dfa9;margin-right:7px;box-shadow:0 0 0 4px #72dfa922;animation:softPulse 2s infinite}
@keyframes softPulse{50%{box-shadow:0 0 0 8px #72dfa900}}
#localClock{font-variant-numeric:tabular-nums}
.sakura-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1;opacity:.48}
.petal{position:absolute;top:-35px;width:9px;height:13px;border-radius:90% 10% 90% 10%;background:linear-gradient(135deg,#ffd8e8,#c8a8ff);animation:petalFall linear infinite;filter:drop-shadow(0 2px 3px #b98ab533)}
@keyframes petalFall{0%{transform:translate3d(0,-5vh,0) rotate(0)}100%{transform:translate3d(70px,110vh,0) rotate(620deg)}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.back-top{position:fixed;right:20px;bottom:20px;z-index:30;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);box-shadow:var(--shadow);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s}
.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
@media(max-width:760px){
 .hero{padding-top:48px;gap:24px}.hero h1{max-width:15ch}
 .cozy-widgets{grid-template-columns:1fr 1fr}.cozy-widget:first-child{grid-column:1/-1}
 .cozy-widget{min-height:96px;padding:14px}
 .slide{aspect-ratio:16/9}
 .contact{padding:28px}
}
@media(max-width:420px){.cozy-widgets{grid-template-columns:1fr}.cozy-widget:first-child{grid-column:auto}}
@media(prefers-reduced-motion:reduce){
 .petal,.live-dot{animation:none!important}
 .reveal{opacity:1;transform:none;transition:none}
 .card,.btn,.back-top{transition:none}
}


/* ==========================================================
   NEKOSHADE V2 — two deliberately different cozy atmospheres
   Light = Sakura Milk Tea / Dark = Midnight Rain
   Shared tokens also theme the admin dashboard.
   ========================================================== */
:root{
 --accent:#b56b9b;--accent2:#9b83d5;--on-accent:#fffaff;
 --bg:#fff8f4;--surface:#fffdfb;--card:#fffdfb;--field:#fff;
 --text:#49384d;--muted:#927f91;--line:#f0dfe9;
 --shadow:0 16px 42px #9f78951c;
}
[data-theme="light"]{
 color-scheme:light;
 --accent:#bd78a5;--accent2:#9c8bd9;--on-accent:#fff;
 --bg:#fff8f3;--surface:#fffdfb;--card:#fffdfd;--field:#fff;
 --text:#49384d;--muted:#927f91;--line:#f0dfe9;
 --link:#a65d8e;--shadow:0 16px 42px #9f78951c;
}
[data-theme="dark"]{
 color-scheme:dark;
 --accent:#d49acb;--accent2:#a99af2;--on-accent:#21182b;
 --bg:#100f1b;--surface:#191829;--card:#211f32;--field:#171626;
 --text:#f4edf9;--muted:#b8acc7;--line:#393449;
 --link:#e7b5df;--shadow:0 18px 50px #05040c88;
}
body{
 background-color:var(--bg);
 background-image:radial-gradient(ellipse at 12% 5%,#f6d9e855,transparent 33%),radial-gradient(ellipse at 88% 24%,#dcd3ff66,transparent 31%);
}
[data-theme="dark"] body{
 background-image:radial-gradient(ellipse at 10% 4%,#40365b55,transparent 35%),radial-gradient(ellipse at 90% 28%,#26334d55,transparent 32%);
}
[data-theme="light"] .nav{background:#fff9f2d9;backdrop-filter:blur(18px)}
[data-theme="dark"] .nav{background:#11101dcc;backdrop-filter:blur(18px)}
[data-theme="light"] .term{background:linear-gradient(145deg,#fff0f6,#eeeaff);color:#5b4761;border-color:#ead8ec}
[data-theme="light"] .term .bar{background:#f2e5f2}
[data-theme="light"] .term .bar b{color:#927d9d}
[data-theme="light"] .term .g{color:#398b70}
[data-theme="light"] .term .p{color:#bd659b}
[data-theme="dark"] .term{background:linear-gradient(145deg,#1b192b,#101522);border-color:#48415f}
[data-theme="dark"] .term .bar{background:#242137}
[data-theme="dark"] .term .g{color:#9be7c5}
[data-theme="dark"] .term .p{color:#f0a8d9}
[data-theme="light"] .cozy-widget{background:#fffdf8e8}
[data-theme="dark"] .cozy-widget{background:#1b1929df}
[data-theme="light"] .cozy-widget.featured{background:linear-gradient(130deg,#fce8f1,#eeeaff)}
[data-theme="dark"] .cozy-widget.featured{background:linear-gradient(130deg,#29213a,#20283a)}
[data-theme="light"] .petal{background:linear-gradient(135deg,#f5b8d2,#c4b3ef)}
[data-theme="dark"] .petal{background:linear-gradient(135deg,#f0c6e8,#a9b7f7);opacity:.35}
[data-theme="light"] .contact{background:linear-gradient(135deg,#fbe9f0,#eeeaff)}
[data-theme="dark"] .contact{background:linear-gradient(135deg,#292139,#1b2939)}
[data-theme="light"] .card{box-shadow:0 10px 30px #98758b16}
[data-theme="dark"] .card{box-shadow:0 12px 32px #05040c44}
[data-theme="light"] .badge{background:#d9f3e6;color:#356b57}
[data-theme="dark"] .badge{background:#a3e8c8;color:#153d30}

/* First-visit loading veil */
.neko-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);color:var(--text);transition:opacity .55s,visibility .55s}
.neko-loader.loader-away{opacity:0;visibility:hidden;pointer-events:none}
.neko-loader strong{font:800 25px var(--fh);letter-spacing:-.04em}
.neko-loader small{color:var(--muted)}
.loader-track{width:128px;height:4px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:7px}
.loader-track i{display:block;width:42%;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--accent),var(--accent2));animation:loadSweep 1.2s ease-in-out infinite}
@keyframes loadSweep{0%{transform:translateX(-110%)}100%{transform:translateX(250%)}}
.loader-cat{width:54px;height:42px;position:relative;border-radius:45% 45% 40% 40%;background:linear-gradient(145deg,var(--accent),var(--accent2));animation:catBob 1.7s ease-in-out infinite}
.loader-cat:before,.loader-cat:after{content:"";position:absolute;top:-9px;width:20px;height:23px;background:var(--accent2);clip-path:polygon(0 0,100% 42%,75% 100%,20% 75%)}
.loader-cat:before{left:1px}.loader-cat:after{right:1px;transform:scaleX(-1)}
.loader-cat span,.loader-cat i{position:absolute;top:17px;width:4px;height:6px;background:#fff;border-radius:50%;z-index:1}
.loader-cat span{left:17px}.loader-cat i{right:17px}
@keyframes catBob{50%{transform:translateY(-5px) rotate(2deg)}}

/* Floating Neko companion and optional rain ambience control */
.neko-companion{position:fixed;z-index:25;left:18px;bottom:18px;display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);box-shadow:var(--shadow);max-width:calc(100vw - 36px)}
.companion-cat{width:42px;height:38px;position:relative;flex:0 0 auto}
.companion-cat .face{position:absolute;left:4px;right:4px;bottom:0;height:29px;border-radius:45% 45% 48% 48%;background:linear-gradient(145deg,var(--accent),var(--accent2))}
.companion-cat .ear{position:absolute;top:0;width:17px;height:20px;background:var(--accent2);clip-path:polygon(0 0,100% 40%,70% 100%,20% 75%)}
.companion-cat .ear.left{left:2px}.companion-cat .ear.right{right:2px;transform:scaleX(-1)}
.companion-cat .eye{position:absolute;top:10px;width:4px;height:6px;border-radius:50%;background:#fff}
.companion-cat .eye.left{left:10px}.companion-cat .eye.right{right:10px}
.companion-cat .nose{position:absolute;top:18px;left:50%;width:4px;height:3px;border-radius:50%;background:#ffd4df;transform:translateX(-50%)}
.companion-cat .whisker{position:absolute;top:19px;width:8px;height:1px;background:#fff9}
.companion-cat .whisker.left{left:1px;transform:rotate(10deg)}.companion-cat .whisker.right{right:1px;transform:rotate(-10deg)}
.companion-copy{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.companion-copy b{font:700 13px var(--fh)}.companion-copy small{font-size:10px;color:var(--muted);white-space:nowrap}
.sound-toggle{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;background:var(--field);color:var(--text);cursor:pointer;font-weight:800}
.sound-toggle[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
[data-theme="dark"] .neko-companion{box-shadow:0 10px 35px #0008}
@media(max-width:600px){.neko-companion{left:12px;bottom:12px}.neko-companion .companion-copy small{max-width:128px;overflow:hidden;text-overflow:ellipsis}.back-top{bottom:78px!important}}
@media(prefers-reduced-motion:reduce){.loader-cat,.loader-track i{animation:none!important}.neko-loader{transition:none}}


/* ==========================================================
   NEKOSHADE V3 — CINEMATIC ANIME WORLD (Option E)
   Sakura Dream daylight + Midnight Phantom night.
   No platform emoji: interface symbols are custom SVG/CSS.
   ========================================================== */
.hero{position:relative;isolation:isolate;border-radius:34px;padding:78px 34px 58px;margin-top:18px;overflow:hidden}
.hero:before{content:"";position:absolute;z-index:-2;inset:0;border-radius:inherit;transition:background .65s ease}
.hero:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.7;transition:opacity .5s ease}
[data-theme="light"] .hero:before{
 background:
 radial-gradient(circle at 78% 18%,#fff9c9 0 5%,#fff9c900 5.5%),
 radial-gradient(ellipse at 82% 22%,#f6c9d988 0 15%,transparent 38%),
 linear-gradient(165deg,#fcecf3 0%,#eee9ff 48%,#dce8f4 100%);
}
[data-theme="light"] .hero:after{
 background:
 radial-gradient(ellipse at 78% 100%,#a6c9b7 0 14%,transparent 14.5%),
 radial-gradient(ellipse at 98% 100%,#8eb6aa 0 22%,transparent 22.5%),
 radial-gradient(ellipse at 60% 100%,#c8b6d9 0 20%,transparent 20.5%),
 linear-gradient(180deg,transparent 55%,#fff5f477 100%);
}
[data-theme="dark"] .hero:before{
 background:
 radial-gradient(circle at 78% 18%,#f7e9ff 0 1.2%,#e9d7ff55 1.6%,transparent 7%),
 radial-gradient(circle at 88% 12%,#a89be955 0 1px,transparent 2px),
 radial-gradient(circle at 69% 24%,#d9c9ff99 0 1px,transparent 2px),
 linear-gradient(150deg,#211b39 0%,#171a31 54%,#101c2c 100%);
}
[data-theme="dark"] .hero:after{
 opacity:.85;
 background:
 linear-gradient(180deg,transparent 45%,#0b1220aa 100%),
 repeating-linear-gradient(90deg,transparent 0 7.5%,#d9c9ff0b 7.7% 7.9%,transparent 8.1% 15%),
 linear-gradient(0deg,#111a2b 0 13%,transparent 13.2%);
 clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.hero>*{position:relative;z-index:2}
.hero .term{backdrop-filter:blur(10px)}
[data-theme="light"] .hero .term{background:#fffaf0d9;border-color:#ffffffa8;box-shadow:0 22px 55px #8b6d9b25}
[data-theme="dark"] .hero .term{background:#111321d9;border-color:#8b80b966;box-shadow:0 22px 65px #02030b99}
[data-theme="light"] .hero h1{color:#49374e}
[data-theme="dark"] .hero h1{color:#f6efff}
[data-theme="light"] .hero p{color:#79677e}
[data-theme="dark"] .hero p{color:#c4bad7}
[data-theme="light"] .hero .accent-word{color:#a65f91}
[data-theme="dark"] .hero .accent-word{color:#d5b3ff}
[data-theme="light"] .petal{background:linear-gradient(135deg,#fff0f5,#e7b6d8 58%,#b9a6ed);filter:drop-shadow(0 2px 5px #a875a655)}
[data-theme="dark"] .petal{width:7px;height:11px;background:linear-gradient(135deg,#f7d8f0,#b7a4ff 55%,#8da9df);filter:drop-shadow(0 0 7px #c9aaffaa);opacity:.82!important}
[data-theme="dark"] .sakura-layer{opacity:.65}
[data-theme="light"] .sakura-layer{opacity:.42}
[data-theme="light"] .cozy-widget{border-color:#efdae8;background:#fffaf5d9;backdrop-filter:blur(12px)}
[data-theme="dark"] .cozy-widget{border-color:#4a4265;background:#1b1a2cdd;backdrop-filter:blur(14px)}
[data-theme="light"] .contact{background:linear-gradient(125deg,#f8e5ee,#e9e5fa 58%,#e0edf0)}
[data-theme="dark"] .contact{background:linear-gradient(125deg,#2a1d3c,#20213b 58%,#182b3b)}
.widget-icon{display:grid;place-items:center;color:var(--accent2)}
.neko-mark svg{filter:drop-shadow(0 3px 5px color-mix(in srgb,var(--accent) 35%,transparent))}
.sound-toggle svg{display:block}
.neko-companion{z-index:26}
[data-theme="light"] .neko-companion{background:#fffaf0e8;border-color:#eedce9}
[data-theme="dark"] .neko-companion{background:#17182be8;border-color:#51476c}
[data-theme="light"] .loader-cat{background:linear-gradient(145deg,#d88db4,#a99ae5)}
[data-theme="dark"] .loader-cat{background:linear-gradient(145deg,#b47cc5,#788bd2);filter:drop-shadow(0 0 18px #aa8be766)}
/* Cinematic section entrance and illustrated card treatment */
[data-theme="light"] .card{background:linear-gradient(180deg,#fffdfb,#fff8fc);border-color:#f0dce9}
[data-theme="dark"] .card{background:linear-gradient(180deg,#242139,#1a1b2d);border-color:#46405f}
.card .img{background-blend-mode:normal}
[data-theme="light"] .card .img{background-color:#eee2f2}
[data-theme="dark"] .card .img{background-color:#29253f}
@media(max-width:860px){
 .hero{padding:52px 22px 36px;border-radius:25px}
}
@media(max-width:600px){
 .hero{margin-top:10px;padding:40px 16px 28px}
 .hero:after{opacity:.45}
}
@media(prefers-reduced-motion:reduce){
 .hero:before,.hero:after{transition:none}
}


/* ==========================================================
   NEKOSHADE V4 — ANIME DIARY / OPTION B
   Real illustrated scenes, editorial journal layout, calm technical mood.
   Images are hosted by StockCake and credited in README.md.
   ========================================================== */
.hero{padding:76px 34px 62px;min-height:390px;grid-template-columns:1.05fr .95fr;gap:34px}
.hero:before{background-position:center 52%;background-size:cover;}
[data-theme="light"] .hero:before{
 background-image:linear-gradient(90deg,rgba(255,248,245,.93) 0%,rgba(255,248,245,.78) 42%,rgba(255,248,245,.12) 100%),url('https://images.stockcake.com/public/3/0/f/30f157a3-c3e4-4617-99bf-1eabbc29539c_large/cozy-window-desk-stockcake.jpg');
}
[data-theme="dark"] .hero:before{
 background-image:linear-gradient(90deg,rgba(13,14,26,.94) 0%,rgba(13,14,26,.78) 42%,rgba(13,14,26,.18) 100%),url('https://images.stockcake.com/public/5/e/0/5e0c061e-a568-481e-a76d-ecc24fad9ca7_large/cozy-desk-nostalgia-stockcake.jpg');
}
.hero:after{background:linear-gradient(0deg,rgba(17,14,25,.18),transparent 42%);opacity:.55}
[data-theme="light"] .hero:after{background:linear-gradient(0deg,rgba(255,248,245,.24),transparent 45%)}
[data-theme="dark"] .hero:after{background:linear-gradient(0deg,rgba(10,12,23,.42),transparent 48%)}
.hero .term{background:rgba(20,17,31,.83);border-color:rgba(255,255,255,.18);backdrop-filter:blur(16px)}
[data-theme="light"] .hero .term{background:rgba(255,252,249,.88);color:#594b60;border-color:rgba(255,255,255,.78)}
[data-theme="light"] .hero .term .bar{background:#eee5ed}
[data-theme="light"] .hero .term .bar b{color:#887b91}
[data-theme="light"] .hero .term .g{color:#397c68}
[data-theme="light"] .hero .term .p{color:#a75f91}




















[data-theme="light"] 
[data-theme="dark"] 
[data-theme="dark"] 
[data-theme="light"] 
@media(max-width:860px){.hero{grid-template-columns:1fr;min-height:0}}
@media(max-width:600px){.hero{padding:38px 17px 25px;gap:22px}.hero:before{background-position:58% center}}

/* Store directory and compact world-clock layouts */
.pairing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pairing-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow)}
.pairing-card h3{margin:7px 0}.pairing-card p{color:var(--muted);font-size:14px}.pairing-card .btn{align-self:flex-start}
.cozy-widgets.clocks-square{grid-template-columns:repeat(4,minmax(0,1fr))}
.cozy-widgets.clocks-square .clock-widget{aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.cozy-widgets.clocks-square .clock-widget strong{font-size:clamp(18px,2vw,27px)}
.cozy-widgets.clocks-wide{grid-template-columns:1fr 1fr}.cozy-widgets.clocks-wide .featured,.cozy-widgets.clocks-wide>.cozy-widget:last-child{grid-column:1/-1}
@media(max-width:760px){.cozy-widgets.clocks-square{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Theme Studio hooks (radius, card styles, effects, section toggles) ===== */
html .card,html .cozy-widget,html .pairing-card,html .contact,html .slider{border-radius:calc(var(--r) + 6px)}
html body{font-family:var(--fb)}html h1,html h2,html h3,html .logo{font-family:var(--fh)}
html[data-card=solid] .card,html[data-card=solid] .cozy-widget,html[data-card=solid] .pairing-card{background:var(--card);backdrop-filter:none;box-shadow:var(--shadow)}
html[data-card=outline] .card,html[data-card=outline] .cozy-widget,html[data-card=outline] .pairing-card{background:transparent;backdrop-filter:none;box-shadow:none;border:1.5px solid var(--accent)}
.drop{position:absolute;top:-20px;width:1.5px;height:16px;background:linear-gradient(transparent,var(--accent2));animation:rainFall linear infinite}
@keyframes rainFall{to{transform:translateY(112vh)}}
[data-off]{display:none!important}
@media(min-width:861px){.cozy-widgets{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
/* admin: Theme Studio layout + warning box */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px}
.studio-prev{position:sticky;top:12px;height:78vh}.studio-prev iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:14px;background:#fff}
.presets{display:flex;gap:8px;flex-wrap:wrap}.preset i{width:14px;height:14px;border-radius:50%;display:inline-block}
.warn{background:#ffe9a8;color:#3b2d00;padding:10px 14px;border-radius:12px;margin:10px 0}
.logoRow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.logoRow input[type=file]{width:auto;flex:1;min-width:180px}
#logoPrev{width:96px;height:60px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;background:var(--field);padding:6px}#logoPrev img{max-width:100%;max-height:100%}
@media(max-width:900px){.studio{grid-template-columns:1fr}.studio-prev{position:static;height:60vh}}