/* Стили приложения — из макета v8 (docs/mockups/2026-10-31-maket-v8.html) */
html, body { margin:0; background:#F4F1EA; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; }
body > .pa { min-height:100vh; }
.pa .pa-app { border-radius:0; border:0; min-height:100vh; }
a { color:inherit; text-decoration:none; }
.pa-nav a { display:flex; align-items:center; gap:10px; color:#DDE3EE; padding:9px 10px; border-radius:8px; }
.pa-nav a .n { width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.pa-nav a.active { background:#2A3758; color:#fff; }
.pa-nav a.active .n { background:#C9A55A; border-color:#C9A55A; color:#1F2A44; font-weight:700; }
.pa-nav a.plus { background:#C9A55A; color:#1F2A44; font-weight:700; margin:4px 0 8px; }
.pa-nav a.plus .n { border-color:#1F2A44; }
.pa input, .pa select, .pa textarea { font:inherit; background:#FBFAF7; border:1px solid #E6E1D8; border-radius:8px; padding:6px 10px; color:inherit; }
.pa button.pa-btn { border:0; cursor:pointer; font:inherit; font-weight:600; }
.pa-act { color:#2B2B2B; }
.pa-flash { background:#E3F1E6; color:#3E7D4F; border-radius:8px; padding:8px 12px; margin-bottom:12px; }
.pa-err { background:#FBE5E3; color:#D2453F; border-radius:8px; padding:8px 12px; margin-bottom:12px; }
.pa-item.cancelled { opacity:.5; text-decoration:line-through; }
.pa-item.conflict, .pa-b.conflict { box-shadow:0 0 0 2px #D2453F inset; }
.b-pe { background:#EFEAE4; border-color:#9C8A76; }
.pa-login { max-width:360px; margin:12vh auto; background:#fff; border-radius:14px; padding:24px; border:1px solid #E6E1D8; }
.pa-login h1 { font-size:20px; color:#1F2A44; margin:0 0 16px; }
.pa-login label { display:block; margin:10px 0 4px; color:#7A7A7A; font-size:12px; }
.pa-login input { width:100%; box-sizing:border-box; }
@media (max-width:700px) {
  .pa-app { grid-template-columns:1fr !important; padding-bottom:70px; }
  .pa-nav { position:fixed; bottom:0; left:0; right:0; z-index:10; display:flex !important; justify-content:space-around; padding:6px 4px 18px !important; }
  .pa-nav .logo, .pa-nav .sep { display:none; }
  .pa-nav a { flex-direction:column; gap:2px; font-size:10px; padding:4px; }
  .pa-nav a.plus { margin:0; border-radius:50%; width:44px; height:44px; justify-content:center; }
  .pa-two, .pa-grid3, .pa-console { grid-template-columns:1fr !important; }
  .pa-week { overflow-x:auto; grid-template-columns:34px repeat(7, 120px) !important; }
}

  .pa { --navy:#1F2A44; --navy2:#2A3758; --gold:#C9A55A; --paper:#FAF8F4; --ink:#2B2B2B; --muted:#7A7A7A; --line:#E6E1D8;
        --s:#6F9E7C; --s-bg:#E6F0E9; --p:#3F8F8F; --p-bg:#DDEFEF; --sv:#8673B3; --sv-bg:#ECE8F6;
        --t:#B07890; --t-bg:#F5E8EE; --st:#B8913F; --st-bg:#F6EEDB; --pr:#5F7FAE; --pr-bg:#E4EBF6;
        --off:#A0A0A0; --red:#D2453F; --red-bg:#FBE5E3; --ok:#3E7D4F; --ok-bg:#E3F1E6; --me:#1E5BC6; color:var(--ink); }
  .pa * { box-sizing:border-box; }
  .pa-app { display:grid; grid-template-columns:200px 1fr; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:var(--paper); font-size:13px; min-height:660px; }
  .pa-nav { background:var(--navy); color:#fff; padding:16px 10px; }
  .pa-nav .logo { font-weight:700; color:var(--gold); padding:4px 10px 16px; font-size:14px; }
  .pa-nav button { display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; color:#DDE3EE; padding:9px 10px; border-radius:8px; font:inherit; cursor:pointer; text-align:left; }
  .pa-nav button .n { width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
  .pa-nav button.active { background:var(--navy2); color:#fff; }
  .pa-nav button.active .n { background:var(--gold); border-color:var(--gold); color:var(--navy); font-weight:700; }
  .pa-nav button.plus { background:var(--gold); color:var(--navy); font-weight:700; margin:4px 0 8px; }
  .pa-nav button.plus .n { border-color:var(--navy); }
  .pa-nav button.plus.active { box-shadow:0 0 0 2px #fff inset; }
  .pa-nav .sep { border-top:1px solid rgba(255,255,255,.15); margin:12px 6px; }
  .pa-main { display:flex; flex-direction:column; min-width:0; }
  /* время сверху */
  .pa-clock { background:var(--navy); color:#fff; padding:10px 16px 12px; border-left:1px solid rgba(255,255,255,.08); }
  .pa-me { font-size:14px; } .pa-me b { color:var(--gold); font-size:18px; }
  .pa-zones { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
  .pa-zone { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:5px 10px; line-height:1.25; }
  .pa-zone b { font-size:14px; } .pa-zone small { display:block; color:#C9D2E3; font-size:11px; }
  .pa-zone small i { font-style:normal; color:var(--gold); font-weight:600; }
  .pa-page { display:none; padding:16px; }
  .pa-page.active { display:block; }
  .pa-h { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 12px; }
  .pa-h h3 { margin:0; font-size:18px; color:var(--navy); }
  .pa-h .sub { color:var(--muted); }
  .pa-h .right { margin-left:auto; display:flex; gap:6px; align-items:center; }
  .pa-seg { display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:10px; padding:2px; }
  .pa-seg button { border:0; background:none; font:inherit; padding:4px 12px; border-radius:8px; cursor:pointer; color:var(--ink); }
  .pa-seg button.on { background:var(--navy); color:#fff; }
  .pa-pill { border:1px solid var(--line); background:#fff; border-radius:999px; padding:3px 10px; font-size:12px; }
  .pa-pill.on { background:var(--navy); color:#fff; border-color:var(--navy); }
  .pa-btn { display:inline-block; background:var(--gold); color:var(--navy); border-radius:8px; padding:6px 12px; font-weight:600; font-size:12px; }
  .pa-btn.light { background:#E9E3D5; }
  .pa-two { display:grid; grid-template-columns:1fr 240px; gap:14px; }
  .pa-side h4, .pa-sec { margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .pa-box { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
  .pa-box .row { display:flex; justify-content:space-between; gap:8px; padding:3px 0; }
  .pa-big { font-size:22px; font-weight:700; color:var(--navy); }
  .pa-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
  .pa-tile { background:#fff; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:10px; padding:10px 12px; }
  .pa-tile .pa-big { display:block; }
  .pa-tile.red { border-left-color:var(--red); } .pa-tile.red .pa-big { color:var(--red); }
  .pa-chip { display:inline-block; border-radius:999px; padding:1px 8px; font-size:11px; font-weight:600; }
  .pa-paid { color:var(--ok); } .pa-unpaid { color:var(--red); font-weight:600; } .pa-mut { color:var(--muted); }
  .pa-list { background:#fff; border:1px solid var(--line); border-radius:10px; }
  .pa-item { display:grid; grid-template-columns:26px 150px 1fr auto; align-items:center; gap:10px; padding:9px 12px; border-top:1px solid var(--line); }
  .pa-item:first-child { border-top:0; }
  .pa-n { width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; }
  .pa-n:empty { background:transparent; }
  .pa-time { font-weight:800; font-size:16px; color:var(--me); } .pa-time em { font-style:normal; font-weight:600; font-size:11px; color:var(--me); }
  .pa-time small { display:block; font-weight:400; font-size:11px; color:var(--muted); }
  .pa-time small i { font-style:normal; color:var(--muted); }
  .pa-free { color:var(--muted) !important; font-style:italic; font-weight:400 !important; }
  .pa-view { display:none; } .pa-view.on { display:block; }
  /* неделя */
  .pa-week { display:grid; grid-template-columns:34px repeat(7,1fr); gap:6px; }
  .pa-day.offbg { background:repeating-linear-gradient(45deg,#F7F5F1 0 8px,#EFECE6 8px 16px); }
  .offlbl { position:absolute; top:45%; left:0; right:0; text-align:center; color:var(--muted); font-weight:600; font-size:11px; }
  .pa-table tr.click { cursor:pointer; } .pa-table tr.click:hover td { background:#FBF8F1; } .pa-table tr.sel td { background:#FFF6E2; }
  .pa-past { opacity:.55; }
  .me { color:var(--me); font-weight:800; }
  .pa-phones { display:flex; flex-wrap:wrap; gap:28px; justify-content:center; margin-top:14px; }
  .pa-phone { width:300px; border:11px solid #1b1b1b; border-radius:40px; overflow:hidden; background:var(--paper); font-size:12px; position:relative; }
  .pa-phone .ph-top { background:var(--navy); color:#fff; padding:26px 14px 10px; }
  .pa-phone .ph-top b { color:var(--gold); font-size:16px; }
  .pa-phone .ph-zones { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
  .pa-phone .ph-zones span { background:rgba(255,255,255,.1); border-radius:8px; padding:2px 6px; font-size:10.5px; }
  .pa-phone .ph-zones i { font-style:normal; color:var(--gold); }
  .pa-phone .ph-body { padding:10px; min-height:430px; }
  .ph-row { display:grid; grid-template-columns:62px 1fr auto; gap:8px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px; margin-bottom:6px; }
  .ph-row .t { font-weight:800; color:var(--me); font-size:15px; line-height:1.1; } .ph-row .t small { display:block; font-weight:400; color:var(--muted); font-size:10px; }
  .ph-tabs { display:grid; grid-template-columns:repeat(5,1fr); align-items:end; border-top:1px solid var(--line); background:#fff; padding:6px 4px 14px; text-align:center; font-size:10px; color:var(--muted); }
  .ph-tabs b { color:var(--navy); }
  .ph-plus { width:44px; height:44px; border-radius:50%; background:var(--gold); color:var(--navy); font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center; margin:-22px auto 2px; box-shadow:0 2px 6px rgba(0,0,0,.2); }
  .pa-doc { display:inline-flex; align-items:center; justify-content:center; width:18px; height:20px; border-radius:3px; background:#2B579A; color:#fff; font-size:10px; font-weight:700; vertical-align:middle; margin-left:4px; }
  .pa-doc.none { background:transparent; color:var(--red); border:1px dashed var(--red); }
  .pa-mic { display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:var(--red); color:#fff; font-size:26px; box-shadow:0 0 0 6px var(--red-bg); }
  .pa-lock { background:#F4F1EA; border-radius:8px; padding:6px 10px; color:var(--navy); font-size:12px; }
  .pa-hours { position:relative; height:480px; }
  .pa-hours div { position:absolute; right:4px; font-size:10px; color:var(--muted); transform:translateY(-6px); }
  .pa-day { position:relative; height:480px; background:#fff; border:1px solid var(--line); border-radius:8px; background-image:repeating-linear-gradient(to bottom, transparent 0 39px, #F1EDE6 39px 40px); }
  .pa-dayhead { text-align:center; font-weight:600; font-size:12px; padding-bottom:4px; }
  .pa-dayhead small { display:block; font-weight:400; color:var(--muted); }
  .pa-off { background:repeating-linear-gradient(45deg,#F2F0EC 0 8px,#E9E6E0 8px 16px); display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; }
  .pa-b { position:absolute; left:3px; right:3px; border-radius:6px; padding:3px 6px; font-size:11px; line-height:1.25; overflow:hidden; border-left:3px solid; }
  .pa-b small { display:block; color:var(--muted); font-size:10px; }
  .b-s { background:var(--s-bg); border-color:var(--s); } .b-p { background:var(--p-bg); border-color:var(--p); }
  .b-sv { background:var(--sv-bg); border-color:var(--sv); } .b-t { background:var(--t-bg); border-color:var(--t); }
  .b-st { background:var(--st-bg); border-color:var(--st); } .b-pr { background:var(--pr-bg); border-color:var(--pr); }
  .b-x { background:var(--red-bg); border-color:var(--red); box-shadow:0 0 0 1px var(--red) inset; }
  .pa-legend { display:flex; flex-wrap:wrap; gap:4px 12px; margin:10px 0 0; font-size:11px; color:var(--muted); }
  .pa-legend span { display:inline-flex; align-items:center; gap:4px; }
  .pa-dot { width:10px; height:10px; border-radius:3px; display:inline-block; }
  /* месяц */
  .pa-month { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .pa-mh { text-align:center; font-size:11px; color:var(--muted); font-weight:600; }
  .pa-md { background:#fff; border:1px solid var(--line); border-radius:8px; min-height:74px; padding:5px 6px; font-size:11px; }
  .pa-md b { font-size:12px; }
  .pa-md.other { opacity:.45; }
  .pa-md.offd { background:repeating-linear-gradient(45deg,#F7F5F1 0 8px,#EFECE6 8px 16px); color:var(--muted); }
  .pa-md.today { box-shadow:0 0 0 2px var(--gold) inset; }
  .pa-md.away { background:var(--red-bg); }
  .pa-bars { display:flex; gap:2px; margin-top:4px; flex-wrap:wrap; }
  .pa-bars i { width:12px; height:6px; border-radius:2px; display:inline-block; }
  /* таблицы */
  .pa-table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .pa-table th, .pa-table td { padding:7px 10px; text-align:left; border-top:1px solid var(--line); vertical-align:top; }
  .pa-table th { background:#F4F1EA; font-size:11px; text-transform:uppercase; color:var(--muted); border-top:0; font-weight:600; }
  .pa-table td.num, .pa-table th.num { text-align:right; white-space:nowrap; }
  .pa-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  .pa-exp { border-left:4px solid; }
  /* пульт */
  .pa-console { display:grid; grid-template-columns:230px 1fr 300px; gap:14px; align-items:start; }
  .pa-act { display:flex; align-items:center; gap:10px; width:100%; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; margin-bottom:8px; font:inherit; cursor:pointer; text-align:left; color:var(--ink); }
  .pa-act .n { width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
  .pa-act small { display:block; color:var(--muted); font-size:11px; }
  .pa-act.on { border-color:var(--gold); box-shadow:0 0 0 2px var(--gold) inset; background:#FFFBF1; }
  .pa-form { display:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
  .pa-form.on { display:block; }
  .pa-form h4 { margin:0 0 10px; font-size:15px; color:var(--navy); }
  .pa-f { display:grid; grid-template-columns:150px 1fr; gap:6px 10px; align-items:center; margin-bottom:8px; }
  .pa-f label { color:var(--muted); font-size:12px; }
  .pa-in { background:#FBFAF7; border:1px solid var(--line); border-radius:8px; padding:6px 10px; }
  .pa-in.sel::after { content:" ▾"; color:var(--muted); }
  .pa-auto { background:var(--ok-bg); border-radius:8px; padding:6px 10px; color:var(--ok); }
  .pa-warn { background:var(--red-bg); border-radius:8px; padding:6px 10px; color:var(--red); }
  .pa-radio { display:inline-flex; gap:6px; flex-wrap:wrap; }
  .pa-radio span { border:1px solid var(--line); border-radius:999px; padding:3px 10px; background:#FBFAF7; }
  .pa-radio span.on { background:var(--navy); color:#fff; border-color:var(--navy); }
  .pa-check { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
  .pa-check div { padding:2px 0; }
  .pa-tg { background:#DCE8F1; border-radius:12px; padding:14px; font-size:12.5px; }
  .pa-msg { background:#fff; border-radius:12px 12px 12px 4px; padding:9px 11px; margin-bottom:8px; box-shadow:0 1px 1px rgba(0,0,0,.06); line-height:1.45; }
  .pa-msg.me { background:#E7F6D9; border-radius:12px 12px 4px 12px; margin-left:30px; }
  .pa-msg b { color:var(--navy); }
  .pa-kb { display:flex; gap:6px; margin-top:6px; } .pa-kb span { flex:1; text-align:center; background:#F2F6FA; border:1px solid #D5E1EC; border-radius:8px; padding:4px; font-weight:600; color:var(--navy); }
  .pa-slots { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  .pa-slot { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; }
  .pa-slot b { display:block; margin-bottom:6px; color:var(--navy); }
  .pa-slot span { display:inline-block; background:var(--s-bg); border-radius:6px; padding:2px 7px; margin:2px 2px 2px 0; font-size:12px; }
  .pa-slot span small { color:var(--muted); }
  .pa-slot.offday { background:repeating-linear-gradient(45deg,#F7F5F1 0 8px,#EFECE6 8px 16px); color:var(--muted); }
  .pa-tl { position:relative; height:34px; background:#fff; border:1px solid var(--line); border-radius:8px; margin:6px 0 2px; }
  .pa-tl span { position:absolute; top:3px; bottom:3px; border-radius:5px; font-size:10px; color:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; white-space:nowrap; }
  .pa-ticks { display:flex; justify-content:space-between; font-size:10px; color:var(--muted); }
  .pa-note { font-size:11px; color:var(--muted); margin-top:10px; }
  @media (max-width:1000px) { .pa-app { grid-template-columns:1fr; } .pa-nav { display:flex; flex-wrap:wrap; } .pa-nav button { width:auto; } .pa-two, .pa-grid3, .pa-console { grid-template-columns:1fr; } .pa-tiles, .pa-slots { grid-template-columns:repeat(2,1fr); } }