:root{
  --paper:#f4f5f2;
  --sheet:#ffffff;
  --faint:#eef2fc;
  --ink:#131614;
  --soft:#6f746c;
  --hair:#e1e3dc;
  --go:#22429b;          /* accent: buttons, chosen day and hour, links */
  --stop:#8f3b2b;
  --focus:#22429b;
  --accent-hover:#1a3480; --accent-line:#5b7bd4; --on-accent:#ffffff;
  --lift:0 1px 2px rgba(19,22,20,.04), 0 6px 22px -14px rgba(19,22,20,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111311; --sheet:#191c19; --faint:#1a2133; --ink:#e9ebe6;
    --soft:#8f958c; --hair:#2a2e29; --go:#7f9dff; --stop:#d4826d; --focus:#7f9dff;
    --accent-hover:#9cb3ff; --accent-line:#5b7bd4; --on-accent:#0e1322;
    --lift:0 1px 2px rgba(0,0,0,.3), 0 8px 26px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#111311; --sheet:#191c19; --faint:#1a2133; --ink:#e9ebe6;
  --soft:#8f958c; --hair:#2a2e29; --go:#7f9dff; --stop:#d4826d; --focus:#7f9dff;
    --accent-hover:#9cb3ff; --accent-line:#5b7bd4; --on-accent:#0e1322;
  --lift:0 1px 2px rgba(0,0,0,.3), 0 8px 26px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Noto Sans Georgian",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.6; -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:604px; margin:0 auto; padding:38px 20px 76px}

/* masthead */
.masthead{display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:14px}
.brand svg{flex:0 0 auto; color:var(--ink); display:block}
.brand .realmark{width:auto; display:block; flex:0 0 auto}
.name{
  font-family:"Noto Serif Georgian",Georgia,serif; font-weight:600;
  font-size:clamp(27px,6.6vw,33px); letter-spacing:-.02em; margin:0; line-height:1.08;
}
.role{color:var(--soft); font-size:13px; margin:4px 0 0; letter-spacing:.005em}
.switch{
  background:none; border:0; font:inherit; font-size:13px; color:var(--soft);
  cursor:pointer; padding:5px 0; border-bottom:1px solid var(--hair); white-space:nowrap;
  transition:color .15s ease, border-color .15s ease;
}
.switch:hover{color:var(--ink); border-color:var(--ink)}
hr.rule{border:0; border-top:1px solid var(--hair); margin:26px 0}

/* intro */
.intro{margin:0 0 26px}
.who{display:flex; gap:20px; align-items:flex-start; margin:0 0 20px}
.portrait{
  flex:0 0 auto; width:112px; height:112px; border-radius:20px; overflow:hidden;
  background:var(--faint); box-shadow:var(--lift);
}
.portrait img{width:100%; height:100%; object-fit:cover; display:block}
.intro p.lead{margin:0; font-size:16px; line-height:1.66; max-width:42ch; color:var(--ink)}
@media (max-width:420px){
  .who{gap:16px}
  .portrait{width:88px; height:88px; border-radius:16px}
  .intro p.lead{font-size:15px}
}
.facts{display:flex; flex-wrap:wrap; margin:0 0 18px; row-gap:14px}
.facts div{padding:0 20px; border-left:1px solid var(--hair)}
.facts div:first-child{padding-left:0; border-left:0}
.facts b{display:block; font-family:"Noto Serif Georgian",serif; font-size:19px; font-weight:600; line-height:1.25; letter-spacing:-.01em}
.facts small{color:var(--soft); font-size:12px}
.intro .acts{gap:18px}
.backline{margin:0; color:var(--soft); font-size:14px}
.whoback{display:flex; gap:14px; align-items:center; margin:0 0 24px}
.portrait.sm{width:56px; height:56px; border-radius:14px}

/* section headings */
h2.sec{font-size:12px; font-weight:500; color:var(--soft); letter-spacing:.03em; margin:0 0 12px}
h3.dayname{font-family:"Noto Serif Georgian",serif; font-weight:600; font-size:21px; letter-spacing:-.015em; margin:0 0 3px}
.daymeta{color:var(--soft); font-size:13px; margin:0 0 16px}

/* day strip */
.strip{
  display:flex; gap:7px; overflow-x:auto; padding:2px 2px 14px; margin-bottom:8px;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.strip::-webkit-scrollbar{display:none}
.pick{
  flex:0 0 auto; width:56px; padding:9px 0 10px; text-align:center; cursor:pointer;
  background:none; border:1px solid transparent; border-radius:14px; color:var(--ink);
  font:inherit; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.pick small{display:block; font-size:11px; color:var(--soft); letter-spacing:.02em}
.pick b{font-family:"Noto Serif Georgian",serif; font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.pick i{display:block; font-style:normal; font-size:10px; color:var(--go); margin-top:1px}
.pick:hover{background:var(--faint)}
.pick[aria-pressed="true"]{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
.pick[aria-pressed="true"] small,.pick[aria-pressed="true"] i{color:var(--sheet); opacity:.68}
.pick.off{opacity:.34; cursor:default}
.pick.full i{color:var(--soft)}
.pick.off:hover{background:none}

/* the sheet: every list sits on its own surface */
.list{
  background:var(--sheet); border:1px solid var(--hair); border-radius:18px;
  padding:3px 18px; box-shadow:var(--lift);
}
.row{
  display:flex; align-items:center; gap:15px; padding:14px 0;
  border-bottom:1px solid var(--hair); flex-wrap:wrap; position:relative;
}
.row:last-child{border-bottom:0}
.row .time{
  font-family:"Noto Serif Georgian",serif; font-variant-numeric:tabular-nums;
  font-size:17px; font-weight:600; letter-spacing:-.01em; min-width:54px;
}
.row .mid{flex:1 1 140px; min-width:0}
.row .mid b{display:block; font-weight:500}
.row .mid span{color:var(--soft); font-size:13px}
.row.off{color:var(--soft)}
.row.off .time{font-weight:400; color:var(--soft)}
.row.chosen::before{
  content:""; position:absolute; left:-18px; top:10px; bottom:10px;
  width:2px; background:var(--go); border-radius:0 2px 2px 0;
}
.row.chosen .time{color:var(--go)}
.row.chosen .mid span{color:var(--ink)}

/* actions */
.take{
  font:inherit; font-size:13px; font-weight:500; color:var(--ink); background:none;
  border:1px solid var(--hair); padding:8px 15px; border-radius:10px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}
.take:hover{border-color:var(--ink); background:var(--faint)}
.take:active{transform:scale(.97)}
.link{
  font:inherit; font-size:13px; background:none; border:0; padding:2px 0; color:var(--soft);
  cursor:pointer; border-bottom:1px solid var(--hair); text-decoration:none;
  display:inline-block; transition:color .15s ease, border-color .15s ease;
}
.link:hover{color:var(--ink); border-color:var(--ink)}
.link.go{color:var(--go); border-color:color-mix(in srgb, var(--go) 40%, transparent)}
.link.stop{color:var(--stop); border-color:color-mix(in srgb, var(--stop) 40%, transparent)}
.link.go:hover,.link.stop:hover{border-color:currentColor}
.acts{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.tag{
  font-size:11px; color:var(--soft); background:var(--faint); border:0;
  border-radius:999px; padding:4px 10px; white-space:nowrap; letter-spacing:.01em;
}
.tag.go{color:var(--go); background:color-mix(in srgb, var(--go) 11%, transparent)}
.tag.stop{color:var(--stop); background:color-mix(in srgb, var(--stop) 11%, transparent)}

/* inline form */
.reveal{display:grid; grid-template-rows:0fr; overflow:hidden;
  animation:unfold .42s cubic-bezier(.22,.8,.26,1) both}
@keyframes unfold{from{grid-template-rows:0fr} to{grid-template-rows:1fr}}
.panel{border:1px solid var(--hair); border-radius:14px; padding:18px; margin:18px 0 4px; background:var(--sheet)}
.panel.inline{
  min-height:0; border:0; background:var(--faint); border-radius:14px;
  margin:4px 0 16px; padding:14px 16px 16px;
  animation:panelIn .34s cubic-bezier(.22,.8,.26,1) .07s both;
}
@keyframes panelIn{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}
.panel.inline .fields,.panel.inline > label,.panel.inline > input,.panel.inline .frow{
  animation:liftIn .34s cubic-bezier(.22,.8,.26,1) both
}
.panel.inline .fields{animation-delay:.13s}
.panel.inline > label{animation-delay:.17s}
.panel.inline > input{animation-delay:.19s}
.panel.inline .frow{animation-delay:.23s}
@keyframes liftIn{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.panel.warn{border-color:var(--stop); background:var(--sheet)}
.panel.warn .list{box-shadow:none; margin-top:10px}
.panel h4{margin:0 0 3px; font-size:17px; font-family:"Noto Serif Georgian",serif; font-weight:600}
.panel p.hint{margin:0 0 12px; color:var(--soft); font-size:13px}
.panel.inline label{margin:10px 0 2px; font-size:11px}
.panel.inline input{font-size:14px; padding:7px 2px; background:transparent}
.fields{display:flex; gap:18px; flex-wrap:wrap}
.fields > div{flex:1 1 128px; min-width:0}
.frow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px}
.fhint{font-size:11px; color:var(--soft); margin-left:4px}

label{display:block; font-size:12px; color:var(--soft); margin:13px 0 4px; letter-spacing:.01em}
input,select{
  width:100%; font:inherit; color:var(--ink); background:transparent;
  border:0; border-bottom:1px solid var(--hair); border-radius:0; padding:8px 2px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select{padding:7px 2px}
input:focus,select:focus{border-bottom-color:var(--focus); box-shadow:0 1px 0 0 var(--focus)}
input:focus,input:focus-visible,select:focus,select:focus-visible{outline:0}
button:focus-visible,.pick:focus-visible,a:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
.go-btn{
  font:inherit; font-weight:600; background:var(--ink); color:var(--paper); border:0;
  border-radius:11px; padding:12px 21px; cursor:pointer; margin-top:18px;
  transition:transform .08s ease, opacity .15s ease;
}
.go-btn:hover{opacity:.9}
.go-btn:active{transform:scale(.98)}
.go-btn.quiet{background:none; color:var(--soft); font-weight:400; padding:12px 6px}
.go-btn.quiet:hover{color:var(--ink); opacity:1}
.go-btn.sm{font-size:14px; padding:9px 18px; border-radius:10px; margin-top:0}
.go-btn.quiet.sm{padding:9px 8px}

/* instructor numbers */
.numbers{display:flex; flex-wrap:wrap; row-gap:16px; margin:0 0 10px}
.num{padding:0 20px; border-left:1px solid var(--hair)}
.num:first-child{padding-left:0; border-left:0}
.num b{display:block; font-family:"Noto Serif Georgian",serif; font-size:27px; font-weight:600; line-height:1.18; letter-spacing:-.02em}
.num small{color:var(--soft); font-size:12px}
.num.alert b{color:var(--stop)}

.grid2{display:flex; gap:20px; flex-wrap:wrap}
.grid2 > div{flex:1 1 120px}
.empty{color:var(--soft); font-size:14px; padding:16px 0}
.page.swap{animation:swapIn .2s cubic-bezier(.22,.8,.26,1) both}
@keyframes swapIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
.chip{
  font:inherit; font-size:13px; color:var(--soft); background:var(--faint); border:1px solid transparent;
  border-radius:9px; padding:6px 12px; cursor:pointer; transition:all .15s ease;
}
button.chip:hover{border-color:var(--soft); color:var(--ink)}
.chip.on{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
.chip.soon{border-color:var(--hair); color:var(--ink)}
.routes span.chip{cursor:default; min-width:34px; text-align:center; padding:6px 0}
.routes{gap:7px}
.deal{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:14px 0 2px; padding:11px 13px; border-radius:11px;
  background:var(--sheet); border:1px solid var(--hair);
}
.row .bar{
  position:absolute; left:-18px; right:-18px; bottom:0; height:2px;
  background:var(--go); opacity:.5; border-radius:2px; max-width:none;
}
.row .amt{font-family:"Noto Serif Georgian",serif; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.deal b{font-family:"Noto Serif Georgian",serif; font-size:16px; font-weight:600}
.deal span{color:var(--soft); font-size:13px; font-variant-numeric:tabular-nums}

/* logo picker */

.toast{
  position:fixed; left:16px; right:16px; bottom:20px; max-width:400px; margin:0 auto;
  background:var(--ink); color:var(--paper); padding:14px 18px; border-radius:14px;
  font-size:14px; line-height:1.45; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .24s ease, transform .3s cubic-bezier(.22,.8,.26,1); z-index:20;
  box-shadow:0 10px 34px -12px rgba(0,0,0,.4);
}
.toast.show{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .toast{transition:none}
  .page.swap,.reveal,.panel.inline,.row.chosen,
  .panel.inline .fields,.panel.inline > label,.panel.inline > input,.panel.inline .frow{animation:none}
  .reveal{grid-template-rows:1fr}
}
@media (max-width:480px){
  .wrap{padding:26px 16px 68px}
  .row{gap:12px; padding:13px 0}
  .list{padding:3px 15px; border-radius:16px}
  .row.chosen::before{left:-15px}
  .num b{font-size:24px}
  .num,.facts div{padding:0 15px}
  .facts b{font-size:18px}
}

/* ---------- accent: blue palette ---------- */
.go-btn{background:var(--go); color:var(--on-accent); transition:background .15s ease, transform .08s ease}
.go-btn:hover{background:var(--accent-hover); opacity:1}
.go-btn.quiet{background:none; color:var(--soft)}
.go-btn.quiet:hover{background:none; color:var(--go)}
.chip.on{background:var(--go); color:var(--on-accent); border-color:var(--go)}
.take{border-color:var(--accent-line); color:var(--go)}
.take:hover{border-color:var(--go); background:var(--faint)}
.pick[aria-pressed="true"]{background:var(--go); color:var(--on-accent); border-color:var(--go)}
.pick[aria-pressed="true"] small,.pick[aria-pressed="true"] i{color:var(--on-accent)}
.s-book .pick:not(.off):not(.full):not([aria-pressed="true"]){background:var(--faint)}   /* days with free hours */
.s-book .pick:not(.off):not([aria-pressed="true"]):hover{border-color:var(--accent-line)}
.row.chosen{background:var(--faint); box-shadow:-18px 0 0 var(--faint), 18px 0 0 var(--faint)}  /* band across the list */
.link:hover{color:var(--go); border-color:var(--go)}
.contact .link{color:var(--go); border-color:color-mix(in srgb, var(--go) 40%, transparent)}
.whoback .contact{gap:18px; margin-top:4px}
@media (max-width:480px){
  .row.chosen{box-shadow:-15px 0 0 var(--faint), 15px 0 0 var(--faint)}
}

/* ---------- desktop: wide screens only (phones keep the layout above untouched) ---------- */
@media (min-width:960px){
  .wrap{max-width:1160px; padding:48px 40px 88px}
  .page > hr.rule{margin-top:40px}

  /* student: intro across the top; booking on the left, "my lessons" beside it */
  .stu{display:grid; grid-template-columns:minmax(0,1fr) 340px; column-gap:64px;
    grid-template-areas:"intro intro" "book mine"; align-items:start}
  .s-intro{grid-area:intro}
  .s-book{grid-area:book; min-width:0}
  .s-mine{grid-area:mine; position:sticky; top:28px}
  .s-mine > hr.rule:first-child{display:none}

  .intro{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); column-gap:72px;
    align-items:center; margin:0 0 36px; padding-bottom:36px; border-bottom:1px solid var(--hair)}
  .intro .who{grid-column:1; grid-row:1 / span 2; margin:0; gap:28px; align-items:center}
  .intro .facts{grid-column:2; grid-row:1; display:grid; grid-template-columns:1fr 1fr; row-gap:18px; margin:0 0 20px}
  .intro > .acts{grid-column:2; grid-row:2; align-self:start}
  .facts div,.facts div:first-child{padding:0 0 0 20px; border-left:1px solid var(--hair)}
  .facts div:nth-child(odd){padding-left:0; border-left:0}
  .facts b{font-size:21px}
  .portrait{width:148px; height:148px; border-radius:24px}
  .intro p.lead{font-size:17px; line-height:1.7; max-width:44ch}
  .whoback{margin:0 0 32px; padding-bottom:28px; border-bottom:1px solid var(--hair)}

  /* all days at a glance: no sideways scrolling */
  .s-book .strip,.a-day .strip{display:grid; gap:6px; overflow:visible; padding:2px 0 16px;
    -webkit-mask-image:none; mask-image:none}
  .s-book .strip{grid-template-columns:repeat(7,minmax(0,1fr))}
  .a-day .strip{grid-template-columns:repeat(10,minmax(0,1fr))}
  .pick{width:auto; padding:10px 0 11px}
  .pick b{font-size:21px}

  .list{padding:4px 26px}
  .row.chosen::before{left:-26px}
  .row.chosen{box-shadow:-26px 0 0 var(--faint), 26px 0 0 var(--faint)}
  .row .bar{left:-26px; right:-26px}
  .panel.inline{padding:18px 22px 20px}

  /* instructor: numbers across the top; the day on the left, statistics and settings on the right */
  .adm{display:grid; grid-template-columns:minmax(0,1fr) 380px; column-gap:64px;
    grid-template-areas:"top top" "day side"; align-items:start}
  .a-top{grid-area:top; padding-bottom:30px; margin-bottom:34px; border-bottom:1px solid var(--hair)}
  .a-top .numbers{margin:0}
  .a-top .num{padding:0 40px}
  .a-top .num:first-child{padding-left:0}
  .a-top .num b{font-size:36px}
  .a-day{grid-area:day; min-width:0}
  .a-side{grid-area:side; min-width:0}
  .a-day > hr.rule:first-child,.a-side > hr.rule:first-child{display:none}
}