:root{
  --paper:#FBF9F5;
  --card:#FFFFFF;
  --ink:#20221F;
  --ink-2:#4A4F4B;
  --muted:#7C827C;
  --line:#E3DDD2;
  --accent:#A9522F;
  --accent-dk:#8E4325;
  --warm:#F5E9DF;
  --alarm:#A03A2A;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--paper);color:var(--ink);
  font:400 17px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior-y:contain;
}
#app{max-width:560px;margin:0 auto;padding:0 18px 40px}
.screen{padding-top:10px}
.hidden{display:none}

.top{display:flex;align-items:center;gap:12px;padding:14px 0 20px;position:relative}
.daynum{font:600 20px/1.2 Georgia,serif}
.weeknum{font-size:14px;color:var(--muted);margin-left:auto;margin-right:6px}
.ico{background:none;border:0;font-size:22px;color:var(--ink-2);padding:4px 8px;cursor:pointer;line-height:1}
#btnBack,#btnBack2,#btnBack3{font-size:30px;margin-left:-8px}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 20px;margin-bottom:14px}
.lab{font:600 11px/1 inherit;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.card h2{font:600 23px/1.25 Georgia,serif;margin-bottom:6px}
.card h3{font:600 18px/1.3 Georgia,serif;margin-bottom:10px}
.sub{color:var(--muted);font-size:15px}
.text p{margin-bottom:14px;color:var(--ink-2)}
.text p:last-child{margin-bottom:0}
.text strong{color:var(--ink)}

.play{display:block;width:100%;margin-top:18px;background:var(--accent);color:#fff;border:0;
  border-radius:9px;padding:16px;font:600 17px/1 inherit;cursor:pointer}
.play:active{background:var(--accent-dk)}
.done{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.done label{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--ink-2);cursor:pointer}
.done input{width:22px;height:22px;accent-color:var(--accent)}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 14px;
  text-align:left;font:600 16px/1.3 inherit;color:var(--ink);cursor:pointer}
.tile span{display:block;font:400 13px/1.3 inherit;color:var(--muted);margin-top:5px}
.tile.alarm{background:var(--warm);border-color:#E2CDB9}
.tile:active{opacity:.7}

.hint{color:var(--muted);font-size:14px;text-align:center;margin-top:18px;padding:0 10px}
.hint.small{font-size:12.5px;line-height:1.5;margin-top:26px}

/* плеер */
.playerbox{padding-top:30px}
.pl-title{font:600 24px/1.25 Georgia,serif;text-align:center;margin-bottom:34px}
.time{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:6px}
input[type=range]{width:100%;-webkit-appearance:none;background:transparent;height:26px}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--line);border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);margin-top:-8px}
.controls{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:26px}
.main{width:76px;height:76px;border-radius:50%;border:0;background:var(--accent);color:#fff;
  font-size:26px;cursor:pointer}
.main:active{background:var(--accent-dk)}
.sec{background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink-2);
  padding:11px 14px;font:600 15px/1 inherit;cursor:pointer}
.plhint{color:var(--muted);font-size:14px;text-align:center;margin-top:34px;padding:0 20px}

/* списки */
.item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 16px;
  margin-bottom:10px;cursor:pointer}
.item .t{font:600 17px/1.3 inherit;margin-bottom:3px}
.item .d{font-size:14px;color:var(--muted)}
.item.locked{opacity:.5}
.item.locked .d::after{content:" · откроется позже"}

.setrow{display:flex;align-items:center;justify-content:center;gap:22px;margin:16px 0 10px}
.bigday{font:600 40px/1 Georgia,serif;min-width:70px;text-align:center}
.linkbtn{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  padding:15px 0;font:400 16px/1.3 inherit;color:var(--accent);cursor:pointer}
.card .linkbtn:first-of-type{border-top:0;padding-top:4px}

.safety h3{margin-top:22px}
.safety ul{margin:0 0 14px 20px}
.safety li{margin-bottom:7px;color:var(--ink-2);font-size:16px}
.safety .warn{background:#FBEDE8;border:1px solid #E0B6AA;border-left:3px solid var(--alarm);
  border-radius:8px;padding:16px;margin-bottom:16px}
.safety .warn p{color:#6B342A;margin-bottom:8px}
.safety .warn p:last-child{margin-bottom:0}