/* LYAMIO 0.3 · interface system. All text and controls remain live HTML. */
:root{--bg:#080d14;--paper:#101b29;--ink:#f2f4f7;--muted:#a4b2c3;--line:#243446;--radius:12px;--red:#ef2638}
body{background:radial-gradient(ellipse at 90% 0,#11243755,transparent 48%),var(--bg)}
button{font-weight:600}button:focus-visible,[role=button]:focus-visible{outline:2px solid #ff6070;outline-offset:4px}
.shell>aside{background:#0a111b;border-color:#1c2b3a}
nav button.active{background:#ef26380f;box-shadow:inset 3px 0 var(--red)}
nav button.active svg{color:#ff4053}nav button:hover{background:#182536}
header{height:74px;border-color:#1f2b3a}main{padding-top:34px;max-width:1640px}
.intro{margin-bottom:28px}.intro .tiny{font-size:10px;letter-spacing:2px;margin-bottom:12px}
h1{font-size:clamp(30px,3.1vw,44px);line-height:1.2;letter-spacing:-1px}.intro p{font-size:13px;margin-top:12px}
.page-date{text-align:right;font-size:14px;line-height:1.8;color:#dce3ec}.page-date small{display:block;font-size:10px;color:var(--muted)}
.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}
.watch-main,.watch-side{min-width:0}.watch-side{display:grid;gap:18px}.watch-side .railbox{margin:0}
.hero{min-height:365px;margin:0 0 30px;border:1px solid #324558;border-radius:var(--radius);background:linear-gradient(90deg,#0c1725 0%,#0c1725ed 27%,#0c1725a8 51%,#0c172515 100%),url('assets/lyamio-circuit.webp') 70% 65%/cover}
.herocopy{padding:30px 32px;max-width:100%;width:100%;background:none}
.hero-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:10px;font-weight:600;letter-spacing:1.3px;color:#d2ddea}
.status-dot{height:6px;width:6px;border-radius:100%;background:var(--red);box-shadow:0 0 12px #ef263866}
.heroflag{margin-left:5px;font-size:9px;letter-spacing:.4px;padding:4px 8px;border:1px solid #405469;background:#152638cc}
.hero-time{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:clamp(76px,7.5vw,110px);font-style:italic;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px;line-height:1.05;margin-top:18px;text-shadow:0 3px 24px #0004}
.hero-date{font-size:11px;color:#bdcada;margin-top:5px;line-height:1.7}
.hero h2{font-size:clamp(22px,2.2vw,31px);margin:22px 0 8px;max-width:90%;line-height:1.35;letter-spacing:0}
.hero .hero-session{font-size:12px;color:#fff;margin:0;max-width:85%;line-height:1.9}.hero-session span{color:#b4c3d2}
.hero button{display:flex;gap:30px;justify-content:space-between;align-items:center;margin-top:23px;font-size:12px;min-height:44px;padding:11px 18px}
.hero button span{font-size:18px}.scene-credit{font-size:8px}
.panel-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1.5px;color:#9dafc3;margin-bottom:15px}
.panel-label .icon-tile{margin-right:auto}.icon-tile{width:36px;height:36px;display:inline-grid;place-items:center;background:#1d3045;border:1px solid #34485d;border-radius:9px;color:#b8cce1}
.railbox{background:linear-gradient(140deg,#122032,#0e1825);border-color:#26394b;padding:22px;border-radius:var(--radius)}
.railbox h3{font-size:18px;margin:0 0 16px;line-height:1.5}.settings-summary h3{font-family:'Barlow Condensed',sans-serif;font-size:32px;letter-spacing:.3px;margin-bottom:11px}
.railrow{padding:11px 0;color:#9fb0c4;border-color:#26394b;font-size:11px}.railrow b{color:#e1e8f2}
.railbox button{width:100%;margin-top:17px;text-align:left;display:flex;align-items:center;justify-content:space-between;background:#1b2c3f;border-color:#33485d;font-size:11px;min-height:44px}
.mini-follows{display:grid;gap:0}.mini-follows button{margin:0;padding:11px 0;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;color:#d6e0ed;font-size:12px;gap:8px}
.rating-promo{background:radial-gradient(ellipse at 100% 100%,#ef263814,transparent 75%),#101b2b}.rating-promo .tiny{font-size:8px;margin:16px 0 11px;letter-spacing:1px}
.rating-promo h3{font-size:20px;margin-bottom:10px}.rating-promo p{font-size:12px;margin:0}.rating-promo .icon-tile{color:#ff6070;background:#ef263812;border-color:#ef263843}
.rating-promo button.primary{background:var(--red);border-color:var(--red);font-size:12px}.rating-promo small{display:block;text-align:center;font-size:10px;color:#9eadbf;margin-top:12px}
.source-link{font-size:11px;color:#a3b8ce;padding:0 5px;line-height:1.8;text-decoration:underline;text-underline-offset:4px}
.schedule-panel{min-width:0}.schedule-panel .sectionhead{margin:0 0 18px}.schedule-panel h2{font-size:21px}.schedule-panel .sectionhead .tiny{font-size:9px;letter-spacing:.8px}
.schedule-panel .tools{margin:0 0 14px}.schedule-panel .segmented{width:100%;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;gap:10px}
.schedule-panel .segmented button{background:none;border-radius:0;font-size:12px;min-height:46px;flex:1;color:#a9bacd;padding:12px 7px;position:relative}
.schedule-panel .segmented button.active{color:#fff;background:none;box-shadow:inset 0 -3px var(--red)}
.schedule-search{max-width:none;width:100%;background:#101b29;margin:2px 0 14px;padding:12px 15px;font-size:13px;border-radius:8px}
.filters{gap:7px;padding-bottom:10px}.filters button{border-radius:7px;padding:8px 13px;min-height:40px;font-size:11px}
.listmeta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;margin:10px 0 17px;font-size:10px}.listmeta .checkbox{font-size:10px;min-height:32px}
.datehead{font-size:13px;padding:17px 0 12px;border-color:#25374b}.datehead span{font-size:9px}
.racecard{min-height:112px;background:#101b29;border-color:#253647;border-radius:9px;margin-bottom:10px;box-shadow:none}
.racecard:hover{background:#162536;border-color:#4c657b;transform:none;box-shadow:none}
.racetime{display:flex;flex-direction:column;justify-content:center;width:89px;padding:17px 9px;background:#101b29;border-color:#2b3c4e}
.racetime strong{font-size:34px;font-style:italic;font-weight:800}.racetime small{font-size:8px}
.racebody{padding:17px 15px}.racebody h3{font-size:15px;margin:8px 0;line-height:1.5}.racebody p{font-size:10px}.racebody .tiny{font-size:8px;letter-spacing:.5px;gap:6px}
.cardactions{min-width:70px;max-width:105px;padding:10px 10px 10px 0}.badge{font-size:8px;border:0;background:#18283b;padding:4px 7px;white-space:normal;text-align:right;color:#b6c7d9}
.freshness-foot .note{font-size:10px;background:none;border:0;border-top:1px solid var(--line);padding:16px 0;line-height:1.9}
/* Explore: typography and original vector geometry, without championship marks. */
main[data-view=series]>.tools{background:#101b29;border:1px solid var(--line);border-radius:10px;padding:13px 18px;margin-top:0}
main[data-view=series]>.tools>.muted{font-size:12px;white-space:nowrap}
.catalogue{gap:18px}.seriescard{background:#101c2b;padding:21px;min-height:285px;border-color:#2a3d52;border-radius:var(--radius)}
.seriescard:before{background:url('assets/ui-speed-lines.svg') right top/240px auto no-repeat;opacity:.65}
.seriescard:after{content:'';position:absolute;top:0;left:22px;width:38px;height:3px;background:#ef2638}
.seriescard[data-category=endurance]:after{background:#75a9d2}.seriescard[data-category=motorcycle]:after{background:#e7d9ca}.seriescard[data-category=rally]:after{background:#c1a27c}
.seriescard:hover{border-color:#687f98;transform:translateY(-2px)}
.seriescard>div[role=button]{min-height:215px;display:flex;flex-direction:column}
.seriesmark{border:0;padding:0;margin:28px 0 16px;min-height:58px}.seriesmark-fallback{font-size:36px;letter-spacing:-.5px;line-height:1.05}
.seriescard h3{font-size:13px;font-weight:500;color:#ccd7e5;line-height:1.7}.seriescard p{font-size:12px;line-height:1.85;color:#9cacc0;margin-bottom:18px}
.seriesfoot{margin-top:auto!important;border-top:1px solid #2a3c50;padding-top:14px;font-size:10px;color:#b8c9dc}.seriesfoot>span:last-child{font-size:19px;color:#ff5265}
.seriescard .star{min-width:44px;min-height:44px}
/* Personal ratings: explicit three-step workflow and accessible native choices. */
.rating-steps{display:flex;gap:25px;list-style:none;margin:0 0 23px;padding:0;border-bottom:1px solid var(--line)}
.rating-steps li{padding:0 0 18px;font-size:12px;color:#c0cede;display:flex;gap:10px;align-items:center}
.rating-steps span{font-family:'Barlow Condensed',sans-serif;font-size:24px;font-style:italic;color:#ff5365}
.rating-notice{border-left:3px solid #ef2638;padding:16px 21px;background:#111c2a;border-radius:0 9px 9px 0}
.rating-notice p{font-size:11px;margin-top:8px}.rating-toolbar{background:#111c2b;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:24px 0}
.rating-toolbar select{background:#0b1522;font-size:14px}.rating-toolbar button{min-height:48px}
.rating-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.rating-driver{padding:18px 16px;gap:12px;background:#111f30;border-color:#293e54;position:relative;min-height:108px}
.rating-driver:hover{background:#172b41;border-color:#ef2638}.rating-avatar{width:43px;height:56px;border-radius:7px 7px 0 0;background:#1a2f47}
.rating-person strong{font-size:14px}.rating-value{font-size:32px;color:#ff5c6c}.rating-value small{font-size:9px;color:#aabbd0}
/* My: live totals, following workspace and separate settings. */
.myhero{position:relative;border:0;border-bottom:1px solid #283b50;border-radius:0;background:none;padding:0 0 27px;min-height:0;margin-bottom:23px}
.myhero h1{margin-top:13px;font-size:38px}.myhero p{margin:12px 0 8px}.myhero .tiny{letter-spacing:2px;font-size:10px}
.my-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:28px}
.my-summary button{display:grid;grid-template-columns:1fr auto;gap:12px;text-align:left;padding:20px 23px;background:linear-gradient(130deg,#14253a,#0f1b2a);border:1px solid #2a3d53;border-radius:10px}
.my-summary button>span:first-child{font-size:12px;color:#b3c4d7;grid-column:1/-1}.my-summary strong{font:700 42px/1 'Barlow Condensed',sans-serif;font-style:italic}
.my-summary button>span:last-child{align-self:end;color:#a2b8d1}.my-summary button[aria-pressed=true]{border-color:#ef2638}
.mygrid{grid-template-columns:minmax(0,1fr) 340px;gap:26px}.preferences-panel{padding:24px;background:#111d2c;border-color:#293e54}
.preferences-panel h2{font-size:21px}.preferences-panel .tiny{font-size:9px;letter-spacing:2px}.preferences-panel dl>div{border-color:#293c51}.preferences-panel dd{color:#cad7e8}
.follow-list article{padding:12px 18px;border-color:#2a3c51;background:#111f30}.follow-title strong{font-size:28px!important}.following-tabs{border:0;border-bottom:1px solid #2a3b50;border-radius:0;padding:0;background:none;margin-bottom:20px}
.following-tabs button{border-radius:0;background:none;min-height:48px}.following-tabs button.active{background:none;box-shadow:inset 0 -3px #ef2638}
.empty{background:#0e1927;border:1px dashed #38516c;padding:34px 24px}.empty h3{font-size:18px}.empty button{min-height:44px;background:#1a2c42}
.date-controls input{min-width:0;flex:1;max-width:230px;padding:10px}
@media(min-width:1500px){.hero{min-height:403px}.herocopy{padding:35px 38px}.watch-layout{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:1200px){.watch-layout{grid-template-columns:minmax(0,1fr) 235px;gap:20px}.railbox{padding:19px}.rating-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mygrid{grid-template-columns:minmax(0,1fr) 300px}.hero-time{font-size:88px}.herocopy{padding:27px}.hero h2{font-size:25px}}
@media(max-width:1000px){.watch-layout{grid-template-columns:minmax(0,1fr)}.watch-side{grid-template-columns:repeat(2,minmax(0,1fr))}.watch-side .rating-promo{grid-column:1/-1}.mygrid{grid-template-columns:1fr}.hero{min-height:370px}.hero h2{max-width:70%}.herocopy{padding:32px}.rating-promo button{max-width:240px}.rating-promo small{text-align:left}.page-date{font-size:12px}}
@media(max-width:580px){
 .shell>aside{background:#0b1421f5;padding-top:5px;border-top:1px solid #2a3c50}nav button{min-height:56px}nav button.active{background:none;box-shadow:none;position:relative}nav button.active:before{content:'';height:3px;width:23px;background:#ef2638;position:absolute;top:-5px;border-radius:0 0 3px 3px}
 header{height:calc(64px + env(safe-area-inset-top));margin:0 20px}.breadcrumb .wordmark{font-size:29px}.header-right button{font-size:11px;min-height:44px}.settingsbutton{max-width:135px}
 main{padding:26px 18px 35px}.intro{margin-bottom:23px}.intro .tiny{font-size:9px;letter-spacing:1.5px;margin-bottom:12px}h1{font-size:29px;line-height:1.3}.intro p{font-size:12px;line-height:1.8}.page-date{display:none}
 .hero{min-height:355px;background-position:center,64% 65%;margin-bottom:27px;border-radius:11px}.herocopy{padding:24px}.hero-time{font-size:86px;margin-top:20px}.hero-kicker{font-size:9px;letter-spacing:1px;gap:6px}.heroflag{font-size:8px;padding:4px 7px}
 .hero-date{font-size:10px;max-width:100%;overflow-wrap:anywhere}.hero h2{font-size:25px;margin-top:21px;max-width:100%;line-height:1.35}.hero .hero-session{font-size:11px;max-width:95%}.hero button{font-size:12px;margin-top:22px;gap:35px}.scene-credit{font-size:7px;bottom:9px;right:9px}
 .schedule-panel .sectionhead{margin-bottom:13px}.schedule-panel h2{font-size:20px}.schedule-panel .sectionhead>.tiny{font-size:8px}.schedule-panel .segmented{gap:4px}.schedule-panel .segmented button{font-size:12px;min-height:46px;padding:10px 3px}
 input.search,.rating-toolbar select,.prefscontent select,input[type=date]{font-size:16px}.schedule-search{margin-bottom:14px;min-height:46px}.filters button{min-height:44px;font-size:11px;padding:9px 13px}.listmeta{font-size:10px;gap:5px}.listmeta .checkbox{font-size:10px;min-height:44px}
 .datehead{padding-top:18px;font-size:12px}.datehead span{font-size:8px}.racecard{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;min-height:130px;position:relative}
 .racetime{width:auto;padding:16px 7px;grid-row:1/3}.racetime strong{font-size:31px}.racetime small{font-size:8px;line-height:1.6}
 .racebody{padding:15px 9px 11px;grid-column:2/4;grid-row:1}.racebody .tiny{padding-right:32px;gap:5px;font-size:8px}.racebody h3{font-size:14px;margin:9px 0 6px;line-height:1.55}.racebody p{font-size:10px;line-height:1.7;padding-right:5px}
 .cardactions{display:contents}.cardactions .star{position:absolute;top:2px;right:2px;width:44px;height:44px;background:none}.cardactions .badge{grid-column:2/4;grid-row:2;justify-self:start;margin:0 9px 12px;font-size:8px;max-width:calc(100% - 18px);text-align:left}
 .watch-side{grid-template-columns:1fr;gap:16px;margin-top:4px}.watch-side .rating-promo{grid-column:auto}.railbox{padding:23px}.watch-side .settings-summary{display:none}.rating-promo button{max-width:none}.rating-promo small{text-align:center}
 main[data-view=series]>.tools{padding:15px;gap:12px}main[data-view=series]>.tools .search{max-width:none}.catalogue{grid-template-columns:1fr;gap:15px;margin-top:16px}.seriescard{padding:19px 22px;min-height:0}.seriescard>div[role=button]{min-height:195px}.seriesmark{min-height:0;margin:13px 0 12px}.seriesmark-fallback{font-size:38px;line-height:1.1}.seriescard h3{font-size:14px}.seriescard p{font-size:12px}.seriesfoot{font-size:11px!important}.seriescard .tiny{font-size:10px}.seriescard:before{background-size:260px auto}
 .rating-steps{gap:10px;justify-content:space-between;margin-bottom:21px}.rating-steps li{font-size:10px;gap:6px;flex:1;align-items:flex-start;flex-direction:column;padding-bottom:15px}.rating-steps span{font-size:26px}.rating-notice{padding:16px 18px}.rating-notice p{font-size:11px}.rating-toolbar{padding:18px;margin:22px 0;gap:14px}.rating-toolbar label{font-size:11px;gap:10px}.rating-toolbar button{align-self:stretch;font-size:12px}
 .rating-grid{grid-template-columns:1fr;gap:11px}.rating-driver{min-height:106px;padding:18px 16px}.rating-person strong{font-size:15px}.rating-avatar{width:46px;height:58px}.rating-value{font-size:36px}.rating-person small{font-size:10px}
 .myhero{padding-bottom:22px;min-height:0;margin-bottom:20px}.myhero h1{font-size:31px}.myhero p{font-size:12px}.my-summary{gap:9px;margin-bottom:27px}.my-summary button{padding:15px 13px;gap:12px}.my-summary button>span:first-child{font-size:11px}.my-summary strong{font-size:37px}.my-summary button>span:last-child{font-size:13px}.mygrid{gap:28px}.preferences-panel{padding:22px}.following-tabs button{font-size:12px;min-height:48px}.follow-title strong{font-size:27px!important}.follow-list article{padding:11px 15px}.source-link{min-height:44px;display:flex;align-items:center}
 footer{padding:10px 20px 25px;font-size:10px}.empty{padding:30px 20px}.empty p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.seriescard:hover{transform:none}}
