/* общая база для всех вариантов — язык референса Тимура */
@font-face{font-family:'Manrope';src:url('file:///home/alesha/.local/share/fonts/Manrope.ttf') format('truetype');font-weight:200 800;font-style:normal;}
@font-face{font-family:'Montserrat';src:url('file:///home/alesha/.local/share/fonts/Montserrat.ttf') format('truetype');font-weight:100 900;font-style:normal;}
@font-face{font-family:'Oswald';src:url('file:///home/alesha/.local/share/fonts/Oswald.ttf') format('truetype');font-weight:200 700;font-style:normal;}

*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;}
html,body{width:390px;height:844px;overflow:hidden;}
body{
  font-family:'Manrope',sans-serif;
  background:#fff;
  color:#111318;
  display:flex;flex-direction:column;
}
:root{
  --ink:#111318;
  --graphite:#1B1D22;
  --orange:#FF6B2C;
  --paper:#FFFFFF;
  --cream:#F4F1EC;
  --line:#E6E2DB;
  --dim:#6E7178;
}
.screen{flex:1;display:flex;flex-direction:column;min-height:0;}
.pad{padding-left:22px;padding-right:22px;}

/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;padding-top:22px;}
.date{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
.date b{color:var(--orange);}
.circlebtn{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;}

/* наклонный стикер-бейдж */
.sticker{display:inline-block;background:var(--graphite);color:#fff;border-radius:100px;
  padding:7px 14px 8px;font-size:12px;font-weight:800;letter-spacing:.02em;transform:rotate(-4deg);}
.sticker.orange{background:var(--orange);color:#fff;}

/* кнопки-пилюли */
.pill{border-radius:100px;padding:16px 26px;font-size:15px;font-weight:800;text-align:center;}
.pill.o{background:var(--orange);color:#fff;}
.pill.g{background:var(--graphite);color:#fff;}

/* нижний таб-бар */
.tabs{display:flex;align-items:center;justify-content:space-between;
  padding:12px 26px 26px;border-top:1px solid var(--line);background:#fff;}
.tab{display:flex;flex-direction:column;align-items:center;gap:6px;width:56px;}
.tab svg{width:22px;height:22px;}
.tab span{font-size:9.5px;font-weight:700;letter-spacing:.02em;color:#9A9DA3;}
.tab.on span{color:var(--ink);}
.tab.on svg{color:var(--orange);}
.tab svg{color:#B5B8BD;}