:root {
  --ink:#172b3d;
  --muted:#667b8d;
  --line:#dbe6ec;
  --line-strong:#cbdbe4;
  --blue:#1268a8;
  --blue-dark:#0b4e81;
  --pale:#edf6fa;
  --mint:#e5f4ed;
  --surface:#ffffff;
  --canvas:#f3f7f9;
  --shadow-sm:0 4px 14px rgba(31,67,89,.055);
  --shadow-md:0 12px 34px rgba(31,67,89,.075);
}

html { background:var(--canvas); }
body { background:radial-gradient(circle at 8% -8%,#e8f4f9 0,transparent 30%),linear-gradient(180deg,#f7fafb 0%,#f1f6f8 100%); }
.shell { max-width:1440px; padding:16px 24px 34px; }
.topbar,.panel,.side,.chat { border-color:var(--line); border-radius:16px; box-shadow:var(--shadow-sm); }
.topbar { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:24px; min-height:76px; padding:12px 14px 12px 16px; margin-bottom:22px; }
.brand { min-width:210px; }
.brand-mark { width:38px; height:38px; border-radius:11px; font-size:18px; box-shadow:0 7px 18px rgba(18,104,168,.18); }
.brand h1 { max-width:170px; font-size:16px; }
.eyebrow { font-size:9px; letter-spacing:.16em; }
.topbar-actions { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
.nav { min-width:0; justify-content:flex-end; gap:3px; padding:4px; overflow-x:auto; scrollbar-width:none; border:1px solid #e6eef2; border-radius:11px; background:#f5f8fa; }
.nav::-webkit-scrollbar,.area-tabs::-webkit-scrollbar { display:none; }
.nav button { flex:0 0 auto; min-height:38px; padding:7px 10px; border-radius:8px; font-size:10.5px; line-height:1.15; }
.nav button.active { color:#fff; background:var(--blue); box-shadow:0 4px 12px rgba(18,104,168,.2); }
.account-box { min-width:190px; padding:6px 7px 6px 10px; border-radius:11px; box-shadow:none; }
.account-box strong { font-size:10.5px; }
.account-box span { font-size:8.5px; }
.account-logout { padding:7px 9px; }

.view > .admin-head,.calendar-page-head,.referrals-head { margin:2px 2px 14px; }
.calendar-page-head { align-items:center; }
.calendar-page-head h2,.admin-head h2,.referrals-head h2 { font-size:20px; letter-spacing:-.02em; }
.calendar-page-head p,.admin-head p,.referrals-head p { max-width:720px; font-size:12px; }
.primary { min-height:38px; padding:9px 14px; border-radius:10px; background:linear-gradient(180deg,#1775b7,#1268a8); box-shadow:0 5px 13px rgba(18,104,168,.14); font-size:12px; }
.primary:hover { background:var(--blue-dark); }
.panel,.panel-lite,.channel-card,.qr-panel,.referral-card { border-color:var(--line); border-radius:14px; box-shadow:var(--shadow-sm); }
.panel { padding:20px; }
textarea,input,select { min-height:40px; border-color:var(--line-strong); border-radius:9px; background:#fff; }
textarea { min-height:76px; }
.section-label { color:var(--blue-dark); }

#view-calendar { --calendar-blue:var(--blue); --calendar-ink:var(--ink); --calendar-muted:var(--muted); --calendar-line:var(--line); }
.calendar-settings { display:grid; grid-template-columns:minmax(240px,1fr) auto; align-items:center; gap:22px; padding:14px 16px; margin-bottom:12px; border:1px solid #cfe1ea; border-left:4px solid var(--blue); background:linear-gradient(100deg,#f6fbfd,#fff 54%); }
.calendar-settings h3 { font-size:14px; }
.calendar-settings p { font-size:11px; }
.calendar-settings form { display:grid; grid-template-columns:150px auto; align-items:center; gap:8px; }
.calendar-settings select { min-width:0; width:150px; }
.calendar-settings .form-message { grid-column:1/-1; max-width:320px; text-align:right; }
.calendar-stats { gap:10px; margin-bottom:12px; }
.calendar-stat { min-height:70px; padding:12px 14px; border-radius:13px; box-shadow:var(--shadow-sm); }
.stat-icon { width:36px; height:36px; border-radius:10px; font-size:16px; }
.stat-copy strong { font-size:19px; }
.stat-copy span { margin-top:4px; font-size:10px; }
.calendar-toolbar { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:10px 12px; margin-bottom:12px; }
.month-navigation { min-width:300px; }
.month-navigation h3 { min-width:125px; font-size:14px; }
.area-tabs { min-width:0; justify-content:flex-end; overflow-x:auto; scrollbar-width:none; }
.area-tab { padding:7px 9px; border-radius:8px; font-size:9.5px; }
.icon-button { width:32px; height:32px; border-radius:9px; }
.calendar-main-grid { grid-template-columns:minmax(0,1fr) 270px; gap:12px; }
.institutional-calendar { padding:14px; }
.calendar-day { min-height:104px; }
.upcoming-panel { padding:15px; }
.calendar-management-grid { gap:12px; margin-top:12px; }
.management-card { padding:17px; }
.management-title { margin-bottom:13px; padding-bottom:13px; }
.calendar-form { gap:10px; }
.calendar-form textarea { min-height:58px; }

.chat-layout { grid-template-columns:250px minmax(0,1fr); gap:14px; }
.side { padding:20px; }
.chat { min-height:calc(100vh - 120px); }
.chat-head { padding:16px 20px; }
.messages { padding:20px; }
.message { max-width:76%; border-radius:14px; font-size:13px; }
.quick .chip { margin-bottom:6px; padding:10px; border-radius:9px; }
.composer { padding:13px 16px 15px; }
.composer textarea { min-height:54px; }

.admin-head { align-items:center; }
.form-grid { gap:13px; }
.editor-row { border-radius:11px; }
.channel-grid { gap:14px; }
.channel-card,.qr-panel { padding:18px; }
.qr-layout { grid-template-columns:160px minmax(0,1fr); }
.qr-preview { width:160px; height:160px; border-radius:12px; }
.qr-preview img { width:136px; height:136px; }
.referrals-toolbar { border-radius:13px; }
.referral-card { padding:17px; }

@media (max-width:1100px) {
  .shell { padding:12px 16px 28px; }
  .topbar { grid-template-columns:1fr; gap:10px; }
  .brand { min-width:0; }
  .brand h1 { max-width:none; }
  .topbar-actions { width:100%; grid-template-columns:minmax(0,1fr) auto; align-items:center; flex-direction:initial; }
  .nav { justify-content:flex-start; }
  .account-box { min-width:175px; align-self:auto; }
  .calendar-toolbar { grid-template-columns:1fr; }
  .month-navigation { min-width:0; }
  .area-tabs { justify-content:flex-start; width:100%; }
  .calendar-main-grid { grid-template-columns:1fr; }
  .upcoming-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .shell { padding:8px 10px 22px; }
  .topbar { padding:10px; border-radius:13px; }
  .topbar-actions { grid-template-columns:1fr; }
  .account-box { width:100%; justify-content:space-between; }
  .calendar-page-head,.admin-head,.referrals-head { align-items:flex-start; flex-direction:column; gap:11px; }
  .calendar-page-head .primary { width:100%; }
  .calendar-settings { grid-template-columns:1fr; gap:12px; }
  .calendar-settings form { width:100%; grid-template-columns:minmax(120px,1fr) auto; }
  .calendar-settings select { width:100%; }
  .calendar-settings .form-message { text-align:left; }
  .calendar-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar-toolbar { align-items:stretch; }
  .calendar-legend { justify-content:flex-start; overflow-x:auto; white-space:nowrap; }
  .calendar-day { min-height:86px; padding:5px; }
  .chat-layout { grid-template-columns:1fr; }
  .side { display:none; }
  .chat { min-height:calc(100vh - 190px); }
  .form-grid,.editor-row-grid,.editor-row-grid.faq,.channel-grid,.qr-layout,.user-admin-grid { grid-template-columns:1fr; }
  .field.full,.section-label { grid-column:auto; }
  .qr-preview { width:150px; height:150px; }
}

@media (max-width:520px) {
  .calendar-settings form { grid-template-columns:1fr; }
  .calendar-stats,.calendar-management-grid,.calendar-form,.upcoming-list { grid-template-columns:1fr; }
  .month-navigation { display:grid; grid-template-columns:auto 1fr auto auto; width:100%; }
  .month-navigation h3 { min-width:0; }
  .institutional-calendar { overflow-x:auto; }
  .weekday-row,.month-grid { min-width:650px; }
  .message { max-width:92%; }
}