/* ─────────────────────────────────────────────────
   Home variants — V09..V14 (six more alternative Homes)
   ───────────────────────────────────────────────── */

/* ============ V09 — TIMELINE / agenda day ============ */
function HomeV09() {
  const events = [
    { t:"08:00", l:"виньяса", who:"алена", c:"#c4b5fd", live:false },
    { t:"10:30", l:"инь",     who:"маша",  c:"#a7f3d0", live:false },
    { t:"12:00", l:"аштанга", who:"денис", c:"#fde68a", live:false, full:true },
    { t:"14:00", l:"break",   who:"",      c:"#fff", spacer:true },
    { t:"18:00", l:"медитация",who:"ира",  c:"#f9a8d4", live:false },
    { t:"19:30", l:"растяжка", who:"маша", c:"#fed7aa", live:false },
  ];
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"22px 24px 8px",display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
        <div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:32,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>среда</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#9d6b8a",marginTop:6,letterSpacing:"0.06em"}}>29 апреля · сегодня</div>
        </div>
        <div style={{padding:"8px 14px",borderRadius:18,background:"#e91e8c",color:"#fff",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13}}>+ записаться</div>
      </div>

      {/* timeline */}
      <div style={{padding:"18px 24px",position:"relative"}}>
        {/* vertical rail */}
        <div style={{position:"absolute",left:64,top:18,bottom:18,width:2,background:"#f0c8dc"}}/>

        {events.map((e,i)=>(
          e.spacer ? (
            <div key={i} style={{display:"flex",alignItems:"center",margin:"10px 0",gap:14,paddingLeft:14}}>
              <div style={{width:46,fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.14em"}}>{e.t}</div>
              <div style={{width:20,height:20,position:"relative"}}>
                <div style={{width:8,height:8,borderRadius:"50%",border:"2px dashed #9d6b8a",position:"absolute",left:6,top:6}}/>
              </div>
              <div style={{flex:1,fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",letterSpacing:"0.12em",fontStyle:"italic"}}>перерыв</div>
            </div>
          ) : (
            <div key={i} style={{display:"flex",alignItems:"flex-start",marginBottom:14,gap:14,paddingLeft:14}}>
              <div style={{width:46,paddingTop:12,fontFamily:"'Nunito',sans-serif",fontSize:13,color:"#2d2d2d",fontWeight:900,letterSpacing:"-0.01em"}}>{e.t}</div>
              {/* dot */}
              <div style={{width:20,height:20,position:"relative",flexShrink:0,marginTop:14}}>
                <div style={{width:14,height:14,borderRadius:"50%",background:e.c,border:"3px solid #fff",position:"absolute",left:3,top:3,boxShadow:"0 0 0 2px #f0c8dc"}}/>
              </div>
              {/* card */}
              <div style={{flex:1,padding:"10px 14px",background:e.c,borderRadius:14,border:"1.5px solid rgba(255,255,255,0.7)",boxShadow:"0 3px 0 rgba(233,30,140,0.15)",opacity:e.full?0.55:1}}>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>{e.l}</div>
                <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:6}}>
                  <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d",opacity:0.7}}>{e.who.toLowerCase()}</div>
                  <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:e.full?"#9d6b8a":"#e91e8c",fontWeight:700}}>{e.full?"мест нет":"свободно"}</div>
                </div>
              </div>
            </div>
          )
        ))}
      </div>

      <div style={{padding:"4px 24px 24px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#9d6b8a",margin:"4px 0 8px",textTransform:"lowercase"}}>заметка</div>
        <div style={{padding:"12px 14px",background:"#fff",borderRadius:14,border:"1.5px dashed #f0c8dc",fontFamily:"'Space Mono',monospace",fontSize:12,color:"#2d2d2d",lineHeight:1.5}}>
          {NEWS[0].title}. {NEWS[0].summary}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V10 — CIRCULAR / orbit ============ */
function HomeV10() {
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"22px 22px 0"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",letterSpacing:"0.14em"}}>ОРБИТА · СРЕДА</div>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:30,color:"#2d2d2d",lineHeight:1,letterSpacing:"-0.02em",marginTop:4}}>день <em style={{color:"#e91e8c",fontStyle:"italic"}}>как круг</em></div>
      </div>

      {/* The orbit */}
      <div style={{position:"relative",width:340,height:340,margin:"4px auto 0"}}>
        {/* concentric rings */}
        <div style={{position:"absolute",inset:20,borderRadius:"50%",border:"1px dashed #f0c8dc"}}/>
        <div style={{position:"absolute",inset:60,borderRadius:"50%",border:"1px dashed #f0c8dc"}}/>
        <div style={{position:"absolute",inset:100,borderRadius:"50%",border:"1.5px solid #e91e8c"}}/>

        {/* center: NOW */}
        <div style={{position:"absolute",inset:120,borderRadius:"50%",background:"#e91e8c",color:"#fff",display:"grid",placeItems:"center",boxShadow:"0 6px 0 rgba(233,30,140,0.25)"}}>
          <div style={{textAlign:"center"}}>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,letterSpacing:"0.18em",opacity:0.85}}>NOW</div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,letterSpacing:"-0.02em",lineHeight:1,marginTop:2}}>06:37</div>
          </div>
        </div>

        {/* class dots on outer ring */}
        {CLASSES.map((c,i)=>{
          // hours 8..20 mapped to angle. 8h=top, going clockwise.
          const [hh,mm] = c.time.split(":").map(Number);
          const hours = hh + mm/60;
          const angle = ((hours - 6) / 14) * 360 - 90; // -90 to start at top
          const r = 138;
          const cx = 170 + r*Math.cos(angle*Math.PI/180);
          const cy = 170 + r*Math.sin(angle*Math.PI/180);
          const pastel = classCategoryColor(c.name);
          return (
            <div key={c.id} style={{
              position:"absolute",left:cx-20,top:cy-20,width:40,height:40,
              borderRadius:"50%",background:pastel,
              border:"2px solid #fff",
              boxShadow:"0 3px 0 rgba(233,30,140,0.15)",
              display:"grid",placeItems:"center",
              fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:11,color:"#2d2d2d",letterSpacing:"-0.01em",
            }}>{c.time.slice(0,2)}</div>
          );
        })}

        {/* hour ticks */}
        {[6,9,12,15,18,21].map((h,i)=>{
          const angle = ((h - 6) / 14) * 360 - 90;
          const r = 168;
          const cx = 170 + r*Math.cos(angle*Math.PI/180);
          const cy = 170 + r*Math.sin(angle*Math.PI/180);
          return <div key={h} style={{position:"absolute",left:cx-10,top:cy-7,width:20,fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",textAlign:"center"}}>{h}h</div>;
        })}
      </div>

      {/* legend */}
      <div style={{padding:"4px 22px 18px"}}>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,marginTop:4}}>
          {CLASSES.slice(0,4).map(c=>(
            <div key={c.id} style={{display:"flex",alignItems:"center",gap:8,padding:"6px 8px",borderRadius:10,background:"#fff",border:"1px solid #fce4ec"}}>
              <div style={{width:14,height:14,borderRadius:"50%",background:classCategoryColor(c.name)}}/>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#2d2d2d"}}>
                <b style={{fontFamily:"'Nunito',sans-serif"}}>{c.time}</b> {c.name.split(" ")[0].toLowerCase()}
              </div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

/* ============ V11 — SPA ZEN / minimal monochrome ============ */
function HomeV11() {
  return (
    <HomeFrame bg="#fffafc" tabSkin={{ bg:"#fff", border:"1px solid #f0c8dc", activeBg:"#fff", activeFg:"#e91e8c", inactiveFg:"#cba9bd" }}>
      <div style={{padding:"32px 28px 0"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#cba9bd",letterSpacing:"0.32em"}}>·   ·   ·</div>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:400,fontSize:36,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1.1,marginTop:18,fontStyle:"italic"}}>
          день начинается<br/>с дыхания.
        </div>
      </div>

      <div style={{padding:"32px 28px 0"}}>
        <div style={{height:1,background:"#f0c8dc"}}/>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",padding:"18px 0",borderBottom:"1px solid #f0c8dc"}}>
          <div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.16em"}}>NEXT</div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:700,fontSize:22,color:"#2d2d2d",letterSpacing:"-0.02em",marginTop:6}}>виньяса флоу</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:2}}>алена · 60мин</div>
          </div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:300,fontSize:38,color:"#e91e8c",letterSpacing:"-0.04em"}}>08:00</div>
        </div>

        {CLASSES.slice(1,4).map(c=>(
          <div key={c.id} style={{display:"flex",justifyContent:"space-between",alignItems:"baseline",padding:"14px 0",borderBottom:"1px solid #f0c8dc"}}>
            <div>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:700,fontSize:16,color:"#2d2d2d",letterSpacing:"-0.01em"}}>{c.name.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",marginTop:2}}>{c.teacher.toLowerCase()} · {c.duration}мин</div>
            </div>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:300,fontSize:22,color:"#9d6b8a",letterSpacing:"-0.02em"}}>{c.time}</div>
          </div>
        ))}
      </div>

      {/* breath circle */}
      <div style={{padding:"28px 0 8px",display:"flex",justifyContent:"center"}}>
        <div style={{width:120,height:120,borderRadius:"50%",border:"1px solid #e91e8c",position:"relative",display:"grid",placeItems:"center"}}>
          <div style={{position:"absolute",inset:14,borderRadius:"50%",border:"1px solid #f0c8dc"}}/>
          <div style={{position:"absolute",inset:30,borderRadius:"50%",background:"#fde2ec"}}/>
          <div style={{position:"relative",fontFamily:"'Nunito',sans-serif",fontWeight:300,fontSize:13,color:"#e91e8c",fontStyle:"italic",letterSpacing:"0.08em"}}>вдох</div>
        </div>
      </div>

      <div style={{padding:"4px 28px 24px",textAlign:"center"}}>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#cba9bd",letterSpacing:"0.18em"}}>{NEWS[0].title.toLowerCase()}</div>
      </div>
    </HomeFrame>
  );
}

/* ============ V12 — ICONIC TILES / huge sticker icons ============ */
function HomeV12() {
  const tiles = [
    { l:"в студию",   sub:"5 классов",   c:"#f9a8d4", icon:"🌸" },
    { l:"онлайн",     sub:"4 курса",     c:"#a7f3d0", icon:"▶" },
    { l:"абонемент",  sub:"7 из 12",     c:"#fde68a", icon:"♡" },
    { l:"ретриты",    sub:"скоро",       c:"#c4b5fd", icon:"☼" },
  ];
  return (
    <HomeFrame bg="#fff" tabSkin={{ activeBg:"#e91e8c", iconKind:"lotus" }}>
      <div style={{padding:"20px 18px 10px",display:"flex",justifyContent:"space-between",alignItems:"flex-end"}}>
        <div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:30,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>привет!</div>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:12,color:"#9d6b8a",marginTop:4}}>с чего начнём?</div>
        </div>
        <div style={{width:48,height:48,borderRadius:"50%",background:"#fde2ec",display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,color:"#e91e8c",border:"2px solid #fff",boxShadow:"0 3px 0 rgba(233,30,140,0.18)"}}>А</div>
      </div>

      {/* 2x2 huge tiles */}
      <div style={{padding:"14px 18px",display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
        {tiles.map((t,i)=>(
          <div key={i} style={{
            position:"relative",aspectRatio:"1/1",borderRadius:28,background:t.c,
            padding:"18px",
            border:"2px solid rgba(255,255,255,0.7)",
            boxShadow:"0 6px 0 rgba(233,30,140,0.18)",
            display:"flex",flexDirection:"column",justifyContent:"space-between",
            overflow:"hidden",
          }}>
            <div style={{position:"absolute",right:-14,bottom:-22,fontSize:120,opacity:0.25,fontFamily:"'Nunito',sans-serif",fontWeight:900,color:"#fff",lineHeight:1}}>{t.icon}</div>
            <div style={{position:"relative",fontFamily:"'Space Mono',monospace",fontSize:10,color:"#2d2d2d",opacity:0.6,letterSpacing:"0.14em",textTransform:"uppercase"}}>{t.sub}</div>
            <div style={{position:"relative",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:24,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>{t.l}</div>
          </div>
        ))}
      </div>

      {/* compact "next class" strip */}
      <div style={{padding:"4px 18px"}}>
        <div style={{padding:"14px 18px",background:"#e91e8c",color:"#fff",borderRadius:24,boxShadow:"0 4px 0 rgba(233,30,140,0.3)",display:"flex",alignItems:"center",gap:12}}>
          <div style={{width:48,height:48,borderRadius:"50%",background:"#fff",color:"#e91e8c",display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13}}>08:00</div>
          <div style={{flex:1}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:16,letterSpacing:"-0.01em"}}>виньяса флоу</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,opacity:0.85}}>алена · через 1ч 23мин</div>
          </div>
          <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:20}}>›</div>
        </div>
      </div>

      <div style={{padding:"14px 18px 24px"}}>
        {NEWS.slice(0,2).map(n=>(
          <div key={n.id} style={{display:"flex",alignItems:"center",gap:12,padding:"10px 0",borderBottom:"1px dashed #f0c8dc"}}>
            <div style={{width:36,height:36,borderRadius:12,background:newsBadgeColor(n.category),display:"grid",placeItems:"center",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#2d2d2d"}}>♥</div>
            <div style={{flex:1}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em"}}>{n.title.toLowerCase()}</div>
              <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>{n.date}</div>
            </div>
          </div>
        ))}
      </div>
    </HomeFrame>
  );
}

/* ============ V13 — SLOT MACHINE / 3 columns reels ============ */
function HomeV13() {
  return (
    <HomeFrame bg="#fde2ec" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"20px 18px 8px",display:"flex",justifyContent:"space-between",alignItems:"baseline"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:26,color:"#2d2d2d",letterSpacing:"-0.02em"}}>выбирай <em style={{color:"#e91e8c",fontStyle:"italic"}}>с собой</em></div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a",letterSpacing:"0.12em"}}>3 КОЛОНКИ</div>
      </div>

      {/* 3 columns reels */}
      <div style={{padding:"6px 18px",display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10,height:340}}>
        {[
          { title:"когда",  items:[
            {l:"сейчас",   s:"08:00", c:"#e91e8c", fg:"#fff"},
            {l:"утром",    s:"10:30", c:"#fff", fg:"#2d2d2d"},
            {l:"днём",     s:"12:00", c:"#fff", fg:"#2d2d2d"},
            {l:"вечером",  s:"18:00", c:"#fff", fg:"#2d2d2d"},
            {l:"поздно",   s:"19:30", c:"#fff", fg:"#2d2d2d"},
          ]},
          { title:"что",   items:[
            {l:"виньяса",   c:"#c4b5fd", fg:"#2d2d2d"},
            {l:"инь",       c:"#a7f3d0", fg:"#2d2d2d"},
            {l:"аштанга",   c:"#fde68a", fg:"#2d2d2d"},
            {l:"медитация", c:"#f9a8d4", fg:"#2d2d2d"},
            {l:"растяжка",  c:"#fed7aa", fg:"#2d2d2d"},
          ]},
          { title:"с кем", items:[
            {l:"алена", c:"#fff", fg:"#2d2d2d"},
            {l:"маша",  c:"#fff", fg:"#2d2d2d"},
            {l:"денис", c:"#e91e8c", fg:"#fff"},
            {l:"ира",   c:"#fff", fg:"#2d2d2d"},
            {l:"любой", c:"#fff", fg:"#9d6b8a", italic:true},
          ]},
        ].map((col,ci)=>(
          <div key={ci} style={{display:"flex",flexDirection:"column",gap:6}}>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.16em",textAlign:"center",marginBottom:2}}>{col.title.toUpperCase()}</div>
            <div style={{flex:1,background:"#fff",borderRadius:18,border:"1.5px solid rgba(255,255,255,0.7)",padding:6,boxShadow:"0 4px 0 rgba(233,30,140,0.15)",display:"flex",flexDirection:"column",gap:4,overflow:"hidden"}}>
              {col.items.map((it,i)=>(
                <div key={i} style={{flex:1,minHeight:0,background:it.c,borderRadius:11,display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column",padding:"4px",border: it.c==="#fff"?"1px solid #fce4ec":"none"}}>
                  <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:it.fg,letterSpacing:"-0.01em",fontStyle:it.italic?"italic":"normal",lineHeight:1}}>{it.l}</div>
                  {it.s && <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:it.fg,opacity:0.8,marginTop:2}}>{it.s}</div>}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* result strip */}
      <div style={{padding:"14px 18px 8px"}}>
        <div style={{padding:"14px 18px",background:"#fff",borderRadius:20,boxShadow:"0 4px 0 rgba(233,30,140,0.18)",border:"1.5px solid #fff",display:"flex",alignItems:"center",gap:12}}>
          <div style={{fontFamily:"'Space Mono',monospace",fontSize:9,color:"#9d6b8a",letterSpacing:"0.18em",writingMode:"vertical-rl",transform:"rotate(180deg)"}}>RESULT</div>
          <div style={{flex:1}}>
            <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:22,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>сейчас · виньяса · алена</div>
            <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:4}}>08:00 · зал 1 · ещё 8 мест</div>
          </div>
          <div style={{padding:"10px 14px",borderRadius:14,background:"#e91e8c",color:"#fff",fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13}}>гоу →</div>
        </div>
      </div>

      <div style={{padding:"4px 18px 24px",display:"flex",gap:8}}>
        {["+ ещё раз","♥ сохранить","↗ поделиться"].map((l,i)=>(
          <div key={i} style={{flex:1,padding:"8px",background:"#fff",border:"1px solid #f0c8dc",borderRadius:12,textAlign:"center",fontFamily:"'Space Mono',monospace",fontSize:11,fontWeight:700,color:"#9d6b8a"}}>{l}</div>
        ))}
      </div>
    </HomeFrame>
  );
}

/* ============ V14 — RIBBONS / diagonal stripes ============ */
function HomeV14() {
  const ribbons = [
    { c:"#e91e8c", fg:"#fff", t:"08:00", l:"виньяса флоу", s:"алена · 60мин · 8 мест" },
    { c:"#a7f3d0", fg:"#2d2d2d", t:"10:30", l:"инь-йога",     s:"маша · 75мин · 1 место" },
    { c:"#fde68a", fg:"#2d2d2d", t:"12:00", l:"аштанга",      s:"денис · мест нет",     dim:true },
    { c:"#c4b5fd", fg:"#2d2d2d", t:"18:00", l:"медитация",    s:"ира · 45мин · 9 мест"  },
  ];
  return (
    <HomeFrame bg="#fff5fa" tabSkin={{ activeBg:"#e91e8c" }}>
      <div style={{padding:"20px 18px 12px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:30,color:"#2d2d2d",letterSpacing:"-0.02em",lineHeight:1}}>сегодня</div>
        <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,color:"#9d6b8a",marginTop:4,letterSpacing:"0.08em"}}>СРЕДА · 29 АПРЕЛЯ</div>
      </div>

      {/* diagonal ribbons */}
      <div style={{padding:"4px 0",overflow:"hidden"}}>
        {ribbons.map((r,i)=>(
          <div key={i} style={{
            position:"relative",margin:"-2px 0",
            background:r.c,color:r.fg,
            padding:"14px 22px 14px 30px",
            transform: i%2?"skewY(-2deg)":"skewY(2deg)",
            opacity:r.dim?0.55:1,
            boxShadow:"0 6px 0 rgba(233,30,140,0.12)",
            border:"1.5px solid rgba(255,255,255,0.6)",
          }}>
            <div style={{transform: i%2?"skewY(2deg)":"skewY(-2deg)",display:"flex",alignItems:"center",gap:14}}>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:30,letterSpacing:"-0.03em",lineHeight:1,minWidth:80}}>{r.t}</div>
              <div style={{flex:1}}>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:18,letterSpacing:"-0.02em",lineHeight:1}}>{r.l}</div>
                <div style={{fontFamily:"'Space Mono',monospace",fontSize:11,opacity:0.85,marginTop:2}}>{r.s}</div>
              </div>
              <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:20}}>›</div>
            </div>
          </div>
        ))}
      </div>

      {/* news as small horizontal cards */}
      <div style={{padding:"22px 18px 24px"}}>
        <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:14,color:"#9d6b8a",margin:"4px 0 10px",textTransform:"lowercase"}}>новости</div>
        <div style={{display:"grid",gap:8}}>
          {NEWS.slice(0,2).map(n=>(
            <div key={n.id} style={{display:"flex",alignItems:"center",gap:10,padding:"10px 14px",background:"#fff",borderRadius:12,border:"1px solid #fce4ec"}}>
              <div style={{width:6,height:36,borderRadius:3,background:newsBadgeColor(n.category)}}/>
              <div style={{flex:1}}>
                <div style={{fontFamily:"'Nunito',sans-serif",fontWeight:900,fontSize:13,color:"#2d2d2d",letterSpacing:"-0.01em"}}>{n.title.toLowerCase()}</div>
                <div style={{fontFamily:"'Space Mono',monospace",fontSize:10,color:"#9d6b8a"}}>{n.date}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </HomeFrame>
  );
}

Object.assign(window, {
  HomeV09, HomeV10, HomeV11, HomeV12, HomeV13, HomeV14,
});