/* Shared materials, controls and motion. Layout and content stay in site.css. */
:root {
  --bg:#fbfcff; --primary:#5146c7; --accent:#7468e3; --soft:#eeebfd;
  --glass:rgb(255 255 255 / 78%); --glass-reading:rgb(255 255 255 / 91%);
  --glass-edge:rgb(255 255 255 / 92%); --glass-stroke:rgb(100 109 156 / 10%);
  --card-surface:linear-gradient(135deg,rgb(255 255 255 / 97%),rgb(242 246 255 / 96%) 58%,rgb(243 241 251 / 96%));
  --shadow:0 2px 5px rgb(37 44 79 / 3%),0 16px 30px -23px rgb(52 51 99 / 28%);
  --shadow-raised:0 6px 12px rgb(37 44 79 / 4%),0 23px 38px -22px rgb(64 51 117 / 30%);
  --success:#247452; --success-bg:#e9f7ef; --danger:#b62f4e; --danger-bg:#fff0f3;
  --warning:#906216; --warning-bg:#fff5df; --info:#435faa; --info-bg:#eef3ff;
  --spring:cubic-bezier(.2,1.35,.35,1); --motion-fast:180ms; --motion-normal:320ms;
}
html[data-theme="dark"] {
  --bg:#101522; --primary:#c4baff; --accent:#b7a7ff; --soft:#302c4b;
  --glass:rgb(30 37 58 / 78%); --glass-reading:rgb(27 33 51 / 94%);
  --glass-edge:rgb(168 179 224 / 16%); --glass-stroke:rgb(146 163 211 / 15%);
  --card-surface:linear-gradient(135deg,#20283a,#242d40 58%,#2a2940);
  --success:#9ee0be; --success-bg:#203d32; --danger:#ffb6c6; --danger-bg:#432735;
  --warning:#f1d090; --warning-bg:#40341f; --info:#b1c9ff; --info-bg:#25344e;
}
body { isolation:isolate; }
.ambient { display:block; position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at 8% 5%,rgb(143 147 242 / 15%),transparent 46%),radial-gradient(ellipse at 97% 45%,rgb(114 204 222 / 13%),transparent 45%),radial-gradient(ellipse at 40% 95%,rgb(193 166 235 / 11%),transparent 42%),var(--bg); }
.ambient::before { content:""; position:absolute; inset:0; z-index:2; background:url('/grain.svg'); opacity:.16; mix-blend-mode:multiply; }
.ambient::after { content:""; position:absolute; inset:-12%; z-index:0; opacity:.55;
  background:radial-gradient(ellipse at 68% 15%,rgb(192 186 253 / 13%),transparent 34%),linear-gradient(rgb(112 130 185 / 3%) 1px,transparent 1px),linear-gradient(90deg,rgb(112 130 185 / 3%) 1px,transparent 1px); background-size:auto,88px 88px,88px 88px; }
html[data-theme="dark"] .ambient { background:radial-gradient(ellipse at 5% 8%,rgb(86 70 152 / 20%),transparent 46%),radial-gradient(ellipse at 96% 45%,rgb(43 105 137 / 18%),transparent 45%),radial-gradient(ellipse at 40% 95%,rgb(102 59 144 / 14%),transparent 42%),var(--bg); }
html[data-theme="dark"] .ambient::before { mix-blend-mode:screen; opacity:.12; }
.page,.footer { position:relative; z-index:1; }
:is(.glass,.tutorial-card,.directory-tools,.section-nav,.preparation-panel,.review-context,.tutorial-intro) {
  background:var(--glass);
  box-shadow:inset 0 1px var(--glass-edge),inset 0 0 0 1px var(--glass-stroke),var(--shadow);
}
.content-panel,.faq-list details { background:var(--glass-reading); }
.platform-ios { background:linear-gradient(120deg,var(--glass-reading),var(--soft)); }
.header { background:var(--glass); box-shadow:inset 0 1px var(--glass-edge),0 10px 28px -19px rgb(65 62 109 / 26%); }
.header.is-scrolled { background:var(--glass-reading); box-shadow:inset 0 1px var(--glass-edge),0 12px 26px -18px rgb(65 62 109 / 25%); }
.nav a.active { color:var(--primary); box-shadow:inset 0 1px var(--glass-edge),0 3px 9px rgb(56 48 103 / 8%); }
.nav a,.section-nav a,.review-index-links a { transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-normal) var(--spring); }
.section-nav a.active { box-shadow:inset 3px 0 var(--accent); }
.provider-card {
  background:var(--card-surface);
  box-shadow:inset 0 1px var(--glass-edge),var(--shadow);
  transition:transform 220ms var(--spring),box-shadow 220ms,border-color 220ms;
}
.provider-card .button-purchase { background:linear-gradient(110deg,#6253cc,#7560ce); box-shadow:inset 0 1px rgb(255 255 255 / 19%),0 7px 15px -11px rgb(95 75 184 / 40%); }
.provider-card .button-purchase:hover { background:linear-gradient(110deg,#5647c0,#6853c2); box-shadow:0 8px 17px -12px rgb(95 75 184 / 50%); }
.review-list { background:var(--glass-reading); }
.review-row { background:transparent; transition:background 220ms; }
.review-row:nth-child(even) { background:rgb(110 118 168 / 4%); }
.review-row:hover { background:rgb(118 106 218 / 7%); }
.button,.icon-button { border-radius:8px; transition:transform var(--motion-normal) var(--spring),background var(--motion-fast),box-shadow var(--motion-fast),opacity var(--motion-fast); }
.button-primary { background:linear-gradient(115deg,#6354da,#7a5ccd); box-shadow:inset 0 1px rgb(255 255 255 / 20%),0 8px 17px -11px rgb(94 72 195 / 65%); }
.button-primary:hover { background:linear-gradient(115deg,#6e60e4,#8666d9); }
.button-outline { background:transparent; box-shadow:inset 0 0 0 1px var(--control-line); }
.button-tonal { background:var(--soft); }
.button-outline:hover { background:var(--soft); }
:is(.button,.icon-button,.text-button,.nav a):active { transform:scale(.965); }
:is(button,.button)[disabled],:is(button,.button)[aria-disabled="true"] { opacity:.42; cursor:not-allowed; box-shadow:none; transform:none; }
:is(button,.button)[aria-busy="true"] { cursor:progress; opacity:.8; }
.button[aria-busy="true"]::after { content:""; width:12px; height:12px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:ui-spin 800ms linear infinite; }
:is(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.search-box { position:relative; background:rgb(130 140 180 / 8%); border-radius:10px; transition:background var(--motion-fast),box-shadow var(--motion-fast); }
.search-box:focus-within { background:var(--surface); box-shadow:0 0 0 3px rgb(125 104 217 / 18%); }
.search-box[data-loading="true"]::after { content:""; width:13px; height:13px; border:2px solid var(--control-line); border-right-color:var(--accent); border-radius:50%; flex-shrink:0; animation:ui-spin 800ms linear infinite; }
.empty-state { background:var(--glass-reading); box-shadow:inset 0 1px var(--glass-edge),var(--shadow); }
.empty-state .scene-icon { background:var(--soft); color:var(--primary); box-shadow:none; }
.note-box { box-shadow:inset 3px 0 var(--accent); border-radius:8px; }
.ui-toast { position:fixed; z-index:80; right:24px; bottom:24px; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 40px); padding:13px 18px; border-radius:12px; color:var(--text); font-size:.875rem; background:var(--glass-reading); box-shadow:inset 0 1px var(--glass-edge),inset 0 0 0 1px var(--glass-stroke),0 16px 35px -18px rgb(42 34 85 / 35%); backdrop-filter:blur(18px); }
.ui-toast::before { content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--success-bg); color:var(--success); font-weight:700; flex-shrink:0; }
.ui-toast[data-kind="info"]::before { content:"i"; color:var(--info); background:var(--info-bg); }
.ui-toast[data-kind="error"]::before { content:"!"; color:var(--danger); background:var(--danger-bg); }
.admin-body { background:radial-gradient(ellipse at 100% 0%,rgb(159 144 228 / 9%),transparent 50%),var(--bg); }
.admin-form,.admin-dialog { background:var(--glass-reading); box-shadow:inset 0 1px var(--glass-edge),var(--shadow); }
.admin-status:not(:empty) { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px; background:var(--info-bg); color:var(--info); }
.admin-status[data-state="success"] { color:var(--success); background:var(--success-bg); }
.admin-status[data-state="error"] { color:var(--danger); background:var(--danger-bg); }
.admin-status[data-state="success"]::before,.admin-status[data-state="error"]::before { font-weight:700; content:"✓"; }
.admin-status[data-state="error"]::before { content:"!"; }
.admin-status[data-state="loading"]::before { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; flex-shrink:0; animation:ui-spin 800ms linear infinite; }
.admin-dialog .admin-status { margin:16px 0 0; }
.admin-field.is-invalid { padding-left:10px; box-shadow:inset 3px 0 var(--danger); }
.admin-field :is(input,textarea,select)[aria-invalid="true"] { border-color:var(--danger); background:var(--danger-bg); }
.admin-upload-controls:has(input:focus-visible) label { outline:3px solid var(--accent); outline-offset:3px; }
.admin-upload-controls:has(input:disabled) { opacity:.5; }
.admin-upload-controls:has(input:disabled) label { pointer-events:none; cursor:progress; }
.admin-records button,.admin-sidebar button { transition:background 180ms,transform 300ms var(--spring),opacity 180ms; }
.admin-records button:active,.admin-sidebar button:active { transform:scale(.98); }
@keyframes ui-spin { to { transform:rotate(360deg); } }
@media (hover:hover) and (pointer:fine) {
  .provider-card:hover { transform:translateY(-2px); border-color:var(--control-line); box-shadow:inset 0 1px var(--glass-edge),var(--shadow-raised); }
  .tutorial-card:hover { box-shadow:inset 0 1px var(--glass-edge),var(--shadow-raised); }
  .button:not(:disabled):hover { transform:translateY(-1px); }
}
@media (max-width:680px) { .ui-toast { bottom:max(16px,env(safe-area-inset-bottom)); right:20px; left:20px; width:fit-content; margin:auto; } .ambient::after { background-size:auto,64px 64px,64px 64px; } }
@supports not (backdrop-filter:blur(1px)) { .header { background:var(--surface); } }
html.motion-muted *,html.motion-muted *::before,html.motion-muted *::after { animation:none!important; transition:none!important; }
html.motion-muted .provider-card:hover,html.motion-muted .button:hover { transform:none!important; }
.article-toolbar button,.admin-remove { min-height:44px; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .provider-card:hover,.button:hover { transform:none!important; } }