:root{ --bg:#0b0f14; --fg:#e6edf3; --muted:#a8b3c1; --brand:#8fc7ff; --brand-2:#a7e3ff; --card:#11161c; --soft:#0e1319; --line:#1a222b; --shadow:0 10px 28px rgba(0,0,0,.32); --radius:18px; --today-bg:#0f2030; --today-br:#65b7ff; }
*{ box-sizing:border-box }
html,body{ height:100%; overflow-x:hidden }
body{ margin:0; padding:24px; background:var(--bg); color:var(--fg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; line-height:1.55 }
a{ color:#a7e3ff; text-decoration:none } a:hover{text-decoration:underline}
.wrap{ max-width:1100px; margin:0 auto }
.site-header{ text-align:center; margin-bottom:18px }
.site-header h1{ margin:0 0 6px; font-size:clamp(22px,2.8vw,32px); background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px }
.col-12{ grid-column:span 12 } .col-6{ grid-column:span 6 }
@media (max-width:800px){ .grid{ grid-template-columns:1fr!important } .col-6{ grid-column:span 12 } }
.card{ background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 16px 18px }
.page-title{ margin:0 0 14px; font-size:clamp(18px,2.2vw,22px); background:linear-gradient(90deg,var(--brand),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent }
label{ display:block; margin-top:.6rem; font-weight:650 }
input,textarea,select{ width:100%; margin-top:.28rem; padding:.7rem .8rem; background:#0d1217; color:var(--fg); border:1px solid #22303d; border-radius:10px }
input::placeholder,textarea::placeholder{ color:#90a0b2 }
input:focus,textarea:focus,select:focus{ border-color:#2e4b66; outline:0; box-shadow:0 0 0 3px rgba(143,211,255,.18) }
.inline-controls{ display:flex; gap:.7rem; flex-wrap:wrap; align-items:center }
.inline-controls>*{ flex:1 1 220px }
.inline-controls .btn{ flex:0 0 auto }
.btn{ appearance:none; border:0; cursor:pointer; border-radius:999px; padding:.65rem .9rem; min-height:40px; font-weight:800; color:#0b1824; background:linear-gradient(180deg,#c2e5ff,#9ad3ff); border:1px solid rgba(255,255,255,.35); box-shadow:0 6px 16px rgba(0,0,0,.35) }
.btn.ghost{ background:transparent; color:#dfe2ee; border:1px dashed #2a3d52 }
.btn.outline{ background:#0f141a; color:#e6f2ff; border:1px solid #2a3d52 }
table{ width:100%; border-collapse:collapse; font-size:.95rem }
th,td{ border-bottom:1px solid var(--line); padding:.65rem .5rem; text-align:left; vertical-align:top; word-break:break-word }
thead th{ color:#cfe2f7; font-weight:700 }
tbody tr:hover{ background:#0f151c }

.avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:inline-block; border:1px solid rgba(255,255,255,.08); }
.avatar.sm{ width:48px; height:48px; }
.avatar.lg{ width:72px; height:72px; }

.kv-line{ display:flex; gap:.5rem; align-items:baseline }
.kv-time{ color:#8fc7ff; font-weight:600 }

.req-item{ background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:.75rem .85rem; margin:.6rem 0 }

.calendar{ user-select:none }
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin:.4rem 0 .6rem }
.cal-title{ font-weight:800; letter-spacing:.2px }
.cal-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; color:#cfe2f7; font-weight:700; text-align:center }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; grid-auto-rows:minmax(72px,auto) }
.cal-cell{ border:1px solid var(--line); background:#0e1419; border-radius:8px; padding:.5rem; min-height:66px; cursor:pointer }
.cal-cell.dim{ opacity:.45 }
.cal-cell .d{ font-size:.9rem; color:#a8b3c1; font-weight:700 }
.cal-cell.today{ border-color:#65b7ff; box-shadow:inset 0 0 0 1px #65b7ff; background:#0f2030 }
.cal-dot{ width:6px; height:6px; border-radius:50%; background:#8fc7ff; display:inline-block; margin-right:4px }