:root {
  --line:#e2e5ea; --ink:#1f2430; --muted:#6b7280;
  --accent:#303D9E;       /* фирменный синий */
  --accent-dark:#26307e;
  --red:#FF3C47;          /* фирменный красный */
}
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", system-ui, Arial, sans-serif; color:var(--ink); background:#f6f7f9; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar { display:flex; align-items:center; gap:24px; padding:8px 20px; background:#fff;
          border-bottom:3px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.05); }
.topbar .brand { display:flex; align-items:center; }
.topbar .brand .logo { height:46px; display:block; }
.topbar .nav { display:flex; gap:20px; }
.topbar .nav a { color:var(--ink); font-weight:500; padding:4px 0; border-bottom:2px solid transparent; }
.topbar .nav a:hover { color:var(--accent); text-decoration:none; border-bottom-color:var(--accent); }
.topbar .user { margin-left:auto; color:var(--muted); font-size:14px; }
.linkbtn { background:none; border:none; color:var(--red); cursor:pointer; font:inherit; }
.linkbtn:hover { text-decoration:underline; }

.content { padding: 22px; }
h1 { font-size: 22px; margin: 0 0 16px; }

.btn { display:inline-block; padding:7px 14px; background:var(--accent); color:#fff; border:none;
       border-radius:6px; cursor:pointer; font:inherit; }
.btn:hover { background:var(--accent-dark); text-decoration:none; }

.cards { display:flex; gap:16px; flex-wrap:wrap; }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 22px; min-width:160px; }
.card .num { font-size:32px; font-weight:700; }
.card .lbl { color:var(--muted); margin-top:4px; }

.msg { background:#eef6ff; border:1px solid #cfe3ff; padding:8px 12px; border-radius:6px; margin-bottom:12px; }
.msg.err { background:#fdecec; border-color:#f5c6c6; }

/* Шахматка */
.chess-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.chess-nav { display:flex; gap:8px; }
/* Шахматка — сетка с перетаскиваемыми полосами */
.cb-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }
.chessboard { --headw:170px; display:inline-block; min-width:100%; user-select:none; }
.cb-row { display:flex; }
.cb-rowhead { width:var(--headw); flex:0 0 var(--headw); box-sizing:border-box; padding:5px 10px;
              border-right:1px solid var(--line); border-bottom:1px solid var(--line);
              position:sticky; left:0; background:#fafbfc; z-index:3; min-height:var(--rowh); }
.cb-rowhead b { display:block; font-size:14px; }
.cb-rowhead span { color:var(--muted); font-size:12px; }
.cb-track { position:relative; display:flex; overflow:hidden; }
.cb-cell { width:var(--dw); flex:0 0 var(--dw); box-sizing:border-box; height:var(--rowh);
           border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
a.cb-cell { display:block; text-decoration:none; }
a.cb-cell:hover { background:#eef4ff; }
.cb-cell.today { background:#fff7e6; }
a.cb-cell.today:hover { background:#ffeecb; }
a.cb-cell.sel, a.cb-cell.sel:hover { background:#cfe0ff; box-shadow:inset 0 0 0 1px var(--accent); }

.cb-head .cb-rowhead { display:flex; align-items:center; font-weight:600; }
.cb-track-head .cb-cell { height:auto; padding:5px 2px; text-align:center; color:var(--muted); }
.cb-track-head .cb-cell .cb-dow { font-size:11px; text-transform:capitalize; }
.cb-track-head .cb-cell .cb-dm { font-size:12px; color:var(--ink); }
.cb-track-head .cb-cell.today .cb-dm { color:#b45309; font-weight:700; }

.cb-bar { position:absolute; top:4px; height:calc(var(--rowh) - 9px);
          left:calc((var(--o) + 0.5) * var(--dw)); width:calc(var(--n) * var(--dw));
          background:var(--c); border-radius:6px; display:flex; align-items:center;
          color:#fff; font-size:12px; cursor:grab; box-shadow:0 1px 2px rgba(0,0,0,.18); z-index:2; }
.cb-bar.dragging { cursor:grabbing; opacity:.85; z-index:5; box-shadow:0 4px 10px rgba(0,0,0,.3);
                   pointer-events:none; }
.cb-bar-label { flex:1; padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-handle { width:8px; align-self:stretch; cursor:ew-resize; border-radius:6px; flex:0 0 8px; }
.cb-handle:hover { background:rgba(255,255,255,.35); }
.cb-track.drop-target { background:#eef4ff; }

.legend { display:flex; gap:18px; margin-top:12px; color:var(--muted); font-size:13px; }
.legend i { display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:middle; margin-right:5px; }

/* Вход */
.login { max-width:340px; margin:6vh auto; background:#fff; border:1px solid var(--line);
         border-radius:12px; padding:26px; text-align:center; }
.login .login-logo { width:240px; max-width:100%; margin:0 auto 6px; display:block; }
.login form { text-align:left; }
.login label { display:block; margin:12px 0; font-size:14px; color:var(--muted); }
.login input { display:block; width:100%; padding:9px 10px; margin-top:5px; border:1px solid var(--line);
               border-radius:6px; font:inherit; }
.login .btn { width:100%; margin-top:10px; }

/* Кнопки-варианты */
.btn-ghost { display:inline-block; padding:6px 13px; background:#fff; color:var(--ink);
             border:1px solid var(--line); border-radius:6px; cursor:pointer; font:inherit; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn-danger { display:inline-block; padding:7px 14px; background:#fff; color:var(--red);
              border:1px solid #f3c2c2; border-radius:6px; cursor:pointer; font:inherit; }
.btn-danger:hover { background:var(--red); color:#fff; }
.act-confirm { background:#5bc0de; } .act-confirm:hover { background:#46a9c7; }
.act-checkin { background:#5cb85c; } .act-checkin:hover { background:#4ca54c; }
.act-checkout { background:#8a929e; } .act-checkout:hover { background:#767e8a; }

/* Форма брони */
.bform { max-width:560px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.bstatus { border-left:4px solid var(--c); padding:6px 12px; background:#fafbfc; border-radius:6px;
           margin-bottom:16px; color:var(--muted); font-size:14px; }
.bform-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.frow { display:flex; flex-direction:column; gap:4px; font-size:14px; }
.frow .flbl { color:var(--muted); }
.frow .field, .frow input, .frow select, .frow textarea {
        padding:8px 10px; border:1px solid var(--line); border-radius:6px; font:inherit; width:100%; }
.frow.wide, .frow:has(textarea) { grid-column:1 / -1; }
.ferr { color:var(--red); font-size:12px; }
.form-actions { grid-column:1 / -1; display:flex; gap:10px; align-items:center; margin-top:6px; }
.status-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:18px;
                  padding-top:16px; border-top:1px solid var(--line); }
.status-actions form { margin:0; }