/* =========================================================
   Avenir Main Styles — Therapist Emphasis Layout (compact)
   2025-11-17f
   ========================================================= */

:root{
  --bg: #e0f2fe;
  --bg-2: #fdf2ff;
  --ink: #0f172a;
  --muted: #64748b;
  --brand-1: #22c55e;
  --brand-2: #0ea5e9;
  --brand-3: #6366f1;
  --card: #ffffff;
  --card-2: #f1f5f9;
  --border: rgba(148,163,184,0.6);
  --radius: 20px;
  --shadow: 0 14px 36px rgba(15,23,42,.16);
}

body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  line-height:1.7;
  color:var(--ink);
  background:
    radial-gradient(circle at 0% 0%, #bae6fd 0, transparent 50%),
    radial-gradient(circle at 100% 100%, #bbf7d0 0, transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg-2));
  overflow-x:hidden;
}

/* Reset */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{opacity:.92}
button,input,select,textarea{font:inherit;color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}

/* ===== Layout ===== */
.container{max-width:1060px;margin:0 auto;padding:32px 18px;}
.wrap{max-width:1060px;margin:0 auto;padding:12px 18px;}
.grid{display:grid;gap:16px;}
.grid-2{display:grid;gap:24px;}
@media(min-width:960px){ .grid-2{grid-template-columns:1.1fr 0.9fr;} }

.section{padding:16px 0 4px;}
.section-panel{
  background:radial-gradient(circle at 0 0,rgba(56,189,248,.18),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(34,197,94,.14),transparent 55%),
             var(--card);
  border-radius:26px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:var(--shadow);
  padding:24px 20px 24px;
}
.section-panel--center{text-align:center;}
@media(min-width:960px){
  .section-panel{padding:28px 32px 30px;}
}

/* Section header */
.section-header{margin-bottom:18px;}
.section-header--center{text-align:center;}
.section-header h2{
  margin:0 0 6px;
  font-size:clamp(22px,3vw,26px);
}
.section-lead{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
@media(min-width:960px){.section-lead{font-size:15px;}}

.section-actions{
  margin-top:16px;
  display:flex;
  justify-content:center;
}
.section-actions--center{justify-content:center;}

.br-lg{display:none;}
@media(min-width:880px){.br-lg{display:inline;}}

/* ===== Header & Logo ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:30;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9),transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(148,163,184,0.35);
}
.header__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.logo__mark{
  position:relative;
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, #bbf7d0 0%, transparent 55%),
    conic-gradient(from 200deg,var(--brand-1),var(--brand-2),var(--brand-3));
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 10px 22px rgba(15,23,42,.25);
  overflow:hidden;
}
.logo__spark{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0 0,rgba(255,255,255,.6),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(59,130,246,.4),transparent 60%);
  opacity:.7;
}
.logo__initial{
  position:relative;
  z-index:1;
  font-weight:800;
  color:#0f172a;
}
.logo__text{
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-size:13px;
  background:linear-gradient(120deg,#0f172a,#1d4ed8,#0f766e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  font-size:13px;
}
.nav a{color:var(--muted);text-decoration:none;}
.nav a:hover{color:var(--ink);opacity:1;}
.only-sp{display:none;}

@media(max-width:780px){
  .header__row{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ===== Buttons & Inputs ===== */
.btn{
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  user-select:none;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  background:#ffffff;
  color:var(--ink);
  padding:9px 18px;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 32px rgba(148,163,184,.4);
}
.btn:active{
  transform:translateY(0);
  opacity:.9;
  box-shadow:var(--shadow);
}
.btn--primary{
  border:none;
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  color:#0f172a;
  font-weight:600;
}
.btn--ghost{
  background:transparent;
  box-shadow:none;
}
.input{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(255,255,255,.9);
  color:var(--ink);
  min-width:0;
}

/* ===== Hero ===== */
.hero{position:relative;padding:62px 0 18px;}
.hero__inner{text-align:center;}
.hero__tag{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  font-size:12px;
  color:var(--muted);
  background:rgba(255,255,255,.9);
}
.hero__title{
  font-size:clamp(24px,4.4vw,34px);
  line-height:1.25;
  margin:14px 0 8px;
}
.grad{
  background:linear-gradient(130deg,var(--brand-1),var(--brand-2),var(--brand-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero__lead{
  color:var(--muted);
  margin:0 0 18px;
  font-size:14px;
}
.hero__lead strong{font-weight:700;color:#0f172a;}
.hero__sub{
  font-size:13px;
  color:var(--muted);
}
.hero__sub span{color:#0ea5e9;font-weight:600;}

/* ===== Sample ===== */
.sample__grid{
  display:grid;
  gap:10px;
  margin-top:12px;
  justify-items:center;
}
@media(min-width:720px){
  .sample__grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.sample-item{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  padding:9px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:rgba(255,255,255,.96);
  box-shadow:var(--shadow);
  cursor:pointer;
}
.sample-item__label{font-weight:600;font-size:14px;}
.sample-item__meta{font-size:12px;color:var(--muted);}
.sample__player{
  margin-top:16px;
  display:flex;
  justify-content:center;
}
audio#player{display:block;width:min(420px,96vw);}
.sample__note{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

/* ===== Promo / YouTube ===== */
.promo__inner{display:grid;gap:18px;}
.promo__inner--stack{width:100%;}
.frame-16x9{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#020617;
}
.frame-16x9 iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.promo__text h2{margin:0 0 8px;}
.promo__lead{color:var(--muted);margin:0;}
@media(min-width:960px){
  .promo__inner{
    grid-template-columns:1.3fr 1fr;
    align-items:center;
  }
}

/* ===== Cards / Packs ===== */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media(min-width:720px){
  .cards--compact{grid-template-columns:repeat(3,1fr);}
}
.card{
  position:relative;
  background:
    radial-gradient(circle at 0 0,rgba(56,189,248,.12),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(34,197,94,.1),transparent 55%),
    #ffffff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 14px 14px;
  box-shadow:var(--shadow);
  display:grid;
  gap:6px;
}
.card--compact{padding:12px 12px 12px;}
.card__title{margin:0;font-weight:700;font-size:14px;}
.card__meta{font-size:12px;color:var(--muted);}
.badge-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
  color:#0f172a;
  background:#e0f2fe;
}

/* ===== Plans ===== */
.plans__grid--cards{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
@media(min-width:720px){
  .plans__grid--cards{
    grid-template-columns:repeat(2,1fr);
  }
}
.plan-card{
  background:#ffffff;
  border-radius:18px;
  border:1px solid var(--border);
  padding:14px 14px 16px;
  box-shadow:var(--shadow);
  display:grid;
  gap:8px;
  text-align:center;
}
.plan-card h3{margin:0;font-size:15px;}
.plan-card__price{
  margin:0;
  font-weight:700;
  font-size:16px;
}
.plan-card__price span{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
}
.plan-card__desc{
  margin:0 0 2px;
  font-size:13px;
  color:var(--muted);
}
.note{
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
}
.note--center{text-align:center;}

/* ===== Instagram ===== */
.instagram__inner{align-items:center;}
.instagram__inner p{color:var(--muted);}
.instagram__mock{display:flex;justify-content:center;}
.insta-frame{
  width:260px;
  border-radius:24px;
  padding:12px 10px 10px;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(255,255,255,.95);
  box-shadow:var(--shadow);
}
.insta-header{
  height:24px;
  border-radius:12px;
  background:linear-gradient(90deg,#f97316,#ec4899,#6366f1);
  font-size:11px;
  font-weight:600;
  color:#f9fafb;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.insta-post{
  height:60px;
  border-radius:16px;
  background:radial-gradient(circle at 10% 0%,rgba(56,189,248,.5),transparent 55%),
             radial-gradient(circle at 90% 100%,rgba(236,72,153,.5),transparent 55%),
             #0f172a;
  margin-bottom:8px;
}
.insta-post--2{
  background:radial-gradient(circle at 20% 0%,rgba(129,140,248,.6),transparent 60%),
             radial-gradient(circle at 80% 100%,rgba(45,212,191,.6),transparent 60%),
             #0f172a;
}
.insta-post--3{
  background:radial-gradient(circle at 50% 0%,rgba(250,204,21,.7),transparent 60%),
             radial-gradient(circle at 0% 100%,rgba(96,165,250,.7),transparent 60%),
             #0f172a;
}

/* ===== Disclaimer ===== */
.disclaimer-panel{
  background:rgba(15,23,42,.85);
  color:#e5e7eb;
  border-radius:18px;
  padding:16px 16px 18px;
  font-size:12px;
  text-align:center;
  box-shadow:0 14px 30px rgba(15,23,42,.5);
}
.disclaimer-text strong{font-weight:700;}

/* ===== Footer ===== */
.site-footer{
  border-top:1px solid rgba(148,163,184,.5);
  background:#0f172a;
  color:#e5e7eb;
  padding:24px 0 30px;
}
.footer__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.footer__row .note{margin:0;}
.sns{
  display:flex;
  gap:14px;
  font-size:14px;
}
.sns a{color:#cbd5f5;}
.sns a:hover{color:#ffffff;}

/* ===== Background Canvas ===== */
#bg-canvas,
#viz-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  display:block;
}
#viz-canvas{
  z-index:-1;
  mix-blend-mode:screen;
  opacity:.2;
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-thumb{background:#94a3b8;border-radius:999px;}
::-webkit-scrollbar-track{background:rgba(148,163,184,.2);}

/* Focus */
:focus-visible{
  outline:2px solid var(--brand-2);
  outline-offset:3px;
}
/* ===== My Page / Account ===== */
.account-grid{
  display:grid;
  gap:20px;
}
@media(min-width:960px){
  .account-grid{
    grid-template-columns:1.1fr 1fr;
  }
}
.account-card{
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.4);
  padding:16px 16px 18px;
  box-shadow:var(--shadow);
}
.account-card h3{
  margin-top:0;
  margin-bottom:8px;
  font-size:15px;
}
.account-form{
  display:grid;
  gap:8px;
}
.account-form label{
  font-size:13px;
  color:var(--muted);
  display:grid;
  gap:4px;
}
.account-form input{
  border-radius:10px;
  border:1px solid rgba(148,163,184,.7);
  padding:7px 10px;
  font-size:14px;
}
.account-btn{
  justify-content:center;
  margin-top:6px;
  width:100%;
}
.account-note{
  font-size:12px;
  color:var(--muted);
  margin:6px 0 0;
}
.account-divider{
  text-align:center;
  font-size:11px;
  color:var(--muted);
  margin:10px 0;
}
.account-divider span{
  padding:2px 8px;
  border-radius:999px;
  border:1px dashed rgba(148,163,184,.7);
}

.account-text{
  font-size:13px;
  color:var(--muted);
  margin-top:0;
}
.account-separator{
  border:none;
  border-top:1px dashed rgba(148,163,184,.6);
  margin:14px 0;
}

.library-list{
  list-style:none;
  padding:0;
  margin:8px 0 0;
  display:grid;
  gap:8px;
}
.library-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border-radius:12px;
  background:#f8fafc;
}
.library-item--empty{
  justify-content:center;
  text-align:center;
  font-size:12px;
  color:var(--muted);
}
.library-title{
  font-size:13px;
  font-weight:600;
}
.library-meta{
  font-size:11px;
  color:var(--muted);
}
.library-btn{
  padding-inline:10px;
  font-size:12px;
}
/* ===== Sub Hero ===== */
.sub-hero{
  text-align:center;
}
.sub-hero__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  font-size:12px;
  color:var(--muted);
  background:rgba(255,255,255,.9);
  margin-bottom:6px;
}
.sub-hero__title{
  margin:4px 0 6px;
  font-size:clamp(22px,3.4vw,28px);
}
.sub-hero__lead{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
.sub-hero__note{
  margin:8px 0 0;
  font-size:12px;
  color:var(--muted);
}

/* ===== Music Filters ===== */
.music-filters{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.music-filters__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.music-filters__row--bottom{
  justify-content:space-between;
  align-items:center;
}
.music-filters__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--muted);
  flex:1 1 140px;
}
.music-filters__field span{
  padding-left:4px;
}
.music-filters__chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.music-filters__sort{
  min-width:150px;
}

/* ===== Chips ===== */
.chip{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.7);
  padding:4px 10px;
  font-size:11px;
  background:#ffffff;
  color:var(--muted);
  cursor:pointer;
}
.chip--on{
  background:linear-gradient(135deg,var(--brand-2),var(--brand-1));
  color:#0f172a;
  border:none;
}

/* ===== Track List ===== */
.track-list{
  display:grid;
  gap:14px;
}
.track-card{
  border-radius:18px;
  border:1px solid rgba(148,163,184,.5);
  background:#ffffff;
  box-shadow:var(--shadow);
  padding:14px 14px 14px;
}
.track-card__main{
  display:flex;
  flex-direction:column;
  gap:10px;
}
@media(min-width:900px){
  .track-card__main{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
  }
}
.track-card__info{
  flex:1;
}
.track-card__title{
  margin:0 0 4px;
  font-size:15px;
}
.track-card__desc{
  margin:0 0 6px;
  font-size:13px;
  color:var(--muted);
}
.track-card__side{
  flex:0 0 260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.track-card__side audio{
  width:100%;
}
.track-card__btn{
  width:100%;
  justify-content:center;
}
.track-card__price{
  margin:0;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}
.track-spec{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:6px 0 2px;
  font-size:11px;
  color:var(--muted);
}
.track-spec div{
  display:flex;
  gap:4px;
}
.track-spec dt{
  font-weight:600;
}
.track-spec dd{
  margin:0;
}

/* ===== Image Filters & Packs ===== */
.image-filters{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.image-filters__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.image-filters__field{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:12px;
  color:var(--muted);
  flex:1 1 160px;
}
.image-filters__field span{
  padding-left:4px;
}

.image-pack-list{
  display:grid;
  gap:14px;
}
.image-pack-card{
  display:grid;
  gap:10px;
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.5);
  box-shadow:var(--shadow);
  padding:12px 12px 14px;
}
@media(min-width:860px){
  .image-pack-card{
    grid-template-columns:220px 1fr;
    align-items:stretch;
  }
}
.image-pack-thumb{
  border-radius:14px;
  background:#0f172a;
  min-height:140px;
}
.image-pack-thumb--forest{
  background:radial-gradient(circle at 20% 0%,rgba(34,197,94,.7),transparent 60%),
             radial-gradient(circle at 80% 100%,rgba(45,212,191,.7),transparent 60%),
             #022c22;
}
.image-pack-thumb--city{
  background:radial-gradient(circle at 20% 0%,rgba(56,189,248,.7),transparent 60%),
             radial-gradient(circle at 80% 100%,rgba(236,72,153,.7),transparent 60%),
             #020617;
}
.image-pack-thumb--minimal{
  background:radial-gradient(circle at 0% 0%,rgba(250,250,250,1),transparent 55%),
             radial-gradient(circle at 100% 100%,rgba(129,140,248,.5),transparent 60%),
             #0f172a;
}
.image-pack-body{
  display:grid;
  gap:6px;
}
.image-pack-title{
  margin:0;
  font-size:15px;
}
.image-pack-desc{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.image-pack-btn{
  justify-content:center;
  margin-top:4px;
}
/* ===== Track Detail (Music) ===== */
.track-hero{
  display:flex;
  flex-direction:column;
  gap:16px;
}
@media(min-width:960px){
  .track-hero{
    flex-direction:row;
    justify-content:space-between;
    align-items:flex-start;
  }
}
.track-hero__head{
  flex:1.1;
}
.track-hero__side{
  flex:0.9;
  display:grid;
  gap:10px;
}
.track-hero__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.5);
  font-size:11px;
  color:var(--muted);
  background:rgba(255,255,255,.9);
}
.track-hero__title{
  margin:6px 0 6px;
  font-size:clamp(22px,3.4vw,28px);
}
.track-hero__lead{
  margin:0;
  font-size:14px;
  color:var(--muted);
}
.track-hero__badges{
  margin-top:8px;
  justify-content:flex-start;
}
.track-hero__player audio{
  width:100%;
}
.track-hero__player-note{
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted);
}

/* layout block below hero */
.track-layout{
  display:grid;
  gap:18px;
}
@media(min-width:960px){
  .track-layout{
    grid-template-columns:1.2fr 0.9fr;
  }
}
.track-layout__col--box{
  background:#ffffff;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.4);
  padding:12px 14px 14px;
}
.track-section-title{
  margin:0 0 6px;
  font-size:15px;
}
.track-meta{
  display:grid;
  gap:6px;
  margin:8px 0 4px;
  font-size:12px;
  color:var(--muted);
}
.track-meta div{
  display:flex;
  gap:6px;
}
.track-meta dt{
  font-weight:600;
}
.track-meta dd{
  margin:0;
}
.track-meta-note{
  margin:4px 0 0;
  font-size:11px;
  color:var(--muted);
}

/* Purchase cards */
.purchase-options{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:4px;
}
@media(min-width:720px){
  .purchase-options{
    grid-template-columns:repeat(2,1fr);
  }
}
.purchase-card{
  background:#ffffff;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.55);
  padding:14px 14px 16px;
  box-shadow:var(--shadow);
  display:grid;
  gap:8px;
}
.purchase-card h3{
  margin:0;
  font-size:15px;
}
.purchase-price{
  margin:0;
  font-size:16px;
  font-weight:700;
}
.purchase-price span{
  display:block;
  font-size:11px;
  font-weight:400;
  color:var(--muted);
}
.purchase-list{
  margin:4px 0 0;
  padding-left:18px;
  font-size:12px;
  color:var(--muted);
}
.purchase-btn{
  margin-top:6px;
  width:100%;
  justify-content:center;
}
/* 時間帯別背景（グラデーション例） */
body {
  background: radial-gradient(circle at top, #e0f2fe 0, #0f172a 60%);
}

body.bg-phase-dawn {
  background: linear-gradient(160deg, #f97316 0%, #1d4ed8 60%, #020617 100%);
}

body.bg-phase-morning {
  background: linear-gradient(160deg, #bfdbfe 0%, #ffffff 45%, #e0f2fe 100%);
}

body.bg-phase-noon {
  background: linear-gradient(160deg, #e0f2fe 0%, #ffffff 50%, #bae6fd 100%);
}

body.bg-phase-afternoon {
  background: linear-gradient(160deg, #fee2e2 0%, #f9fafb 50%, #bfdbfe 100%);
}

body.bg-phase-sunset {
  background: radial-gradient(circle at top, #fb923c 0%, #7c2d12 55%, #020617 100%);
}

body.bg-phase-night {
  background: radial-gradient(circle at top, #1e293b 0%, #020617 70%);
}

body.bg-phase-latenight {
  background: radial-gradient(circle at top, #020617 0%, #020617 60%, #0f172a 100%);
}

body.bg-phase-predawn {
  background: linear-gradient(160deg, #020617 0%, #1e293b 40%, #22d3ee 100%);
}
/* ビジュアライザ用セクション */
.visualizer-section {
  margin-top: 16px;
  border-radius: 16px;
  padding: 12px 12px 16px;
  background: radial-gradient(circle at top, rgba(56,189,248,0.15), rgba(15,23,42,0.9));
  border: 1px solid rgba(148,163,184,0.5);
  backdrop-filter: blur(10px);
}

.visualizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.visualizer-title {
  font-size: 13px;
  opacity: .9;
}

.visualizer-controls {
  display: flex;
  gap: 6px;
}

.visualizer-controls .btn {
  font-size: 11px;
  padding: 3px 10px;
}

.viz-canvas {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  display: block;
  background: radial-gradient(circle at top, rgba(56,189,248,0.08), rgba(15,23,42,1));
  overflow: hidden;
}