:root{
  --bg:#0f1115; --card:#151923; --fg:#eef2f7; --muted:#9aa3b2;
  --brand:#DFB626; --red:#7B0E14;
  --gap:12px; --headerH:64px; --tickerH:56px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.app{min-height:100dvh;display:grid;grid-template-rows:var(--headerH) 1fr auto auto}

/* Header */
.header{position:sticky;top:0;z-index:10;height:var(--headerH);background:var(--red);color:#fff;
  display:flex;align-items:center;padding:0 16px;gap:16px;font-weight:800;letter-spacing:.04em}
.header .time{background:#8e1a1f;padding:6px 10px;border-radius:6px;min-width:88px;text-align:center}
.header .date{margin-left:auto}

/* Main grid */
.main{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap);padding:var(--gap)}
.panel{background:#0e1118;border:1px solid #222836;border-radius:12px;overflow:hidden}
.panel .body{padding:10px}
.center{aspect-ratio:16/9;display:flex;gap:var(--gap)}
.center > rssapp-carousel{flex:1;border-radius:10px;overflow:hidden}

/* Right column: meteo then culture */
.side{display:grid;grid-template-rows:auto auto;gap:var(--gap)}
.head{padding:8px 12px;background:var(--brand);color:#111;font-weight:900;letter-spacing:.06em;border-bottom:1px solid #222836}

/* Meteo */
#meteo{display:flex;flex-direction:column;gap:8px;padding:10px}
.mrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #222836;border-radius:10px;background:#121621}
.mrow:nth-child(even){background:#151a26}
.city{font-weight:700}
.muted{color:var(--muted);font-size:12px}
.temp{font-variant-numeric:tabular-nums;font-weight:800}
.ico{width:24px;text-align:center;font-size:20px}

/* Markets strip */
.markets{height:56px;min-height:56px;border-radius:12px;overflow:hidden;margin:0 var(--gap)}
.markets iframe,.tradingview-widget-container,.tradingview-widget-container__widget{width:100% !important;height:100% !important;border:0 !important;display:block !important}

/* Yellow band */
.brandband{margin:var(--gap);background:var(--brand);border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;min-height:120px}
.brandband .logo{height:56px;margin-left:16px}
.brandband .live{position:absolute;left:16px;bottom:8px;background:#b31217;color:#fff;font-weight:900;padding:4px 10px;border-radius:8px;letter-spacing:.04em}
.brandband .sloganwrap{flex:1;display:flex;justify-content:center}
.brandband .slogan{background:#0f1115;color:#ffd966;border-radius:10px;padding:18px 22px;font-weight:900;letter-spacing:.02em;font-size:clamp(1rem,2vw,1.6rem)}

/* Ticker */
.ticker{position:sticky;bottom:0;height:var(--tickerH);border-top:1px solid #222836}
.ticker iframe{width:100% !important;height:100% !important;border:0 !important;display:block !important}

/* Responsive */
@media (max-width:980px){
  .main{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{ --headerH:56px; --tickerH:48px }
  .brandband{min-height:100px}
  .brandband .logo{height:44px}
  .mrow{grid-template-columns:1fr auto}
  .mrow .ico{display:none}
}