:root {
  --bg: #070b15;
  --panel: #0d121f;
  --panel-2: #111726;
  --panel-3: #17111a;
  --line: rgba(255,255,255,0.06);
  --text: #e8edf8;
  --muted: #8c93a7;
  --accent: #ff7f2b;
  --blue: #4a88ff;
  --green: #21e08c;
  --red: #ff6868;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(180deg, #070a14 0%, #090d18 100%);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}
button, input, a { font: inherit; }
.page { width: min(610px, 100%); margin: 0 auto; padding: 16px 14px 40px; }
.card {
  background: linear-gradient(180deg, #0f1421 0%, #0d111c 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.top-controls {
  display: grid;
  grid-template-columns: 1.3fr .8fr .55fr;
  gap: 10px;
  padding: 12px;
  margin-bottom: 18px;
}
.profile-pill, .control-btn, .logout-btn {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  color: #dce2f0;
}
.profile-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.avatar-dot {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9c4c, #3a0e08 68%);
  border: 1px solid rgba(255,255,255,0.08);
}
.control-btn, .logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.hero-block { text-align: center; margin-bottom: 18px; }
.hero-block h1 { margin: 0 0 8px; font-size: 28px; line-height: 1.08; color: var(--accent); font-weight: 800; }
.hero-logo { color: #7d828d; font-weight: 800; letter-spacing: .06em; font-size: 22px; margin-bottom: 8px; }
.hero-block p { margin: 0; color: var(--muted); font-size: 16px; }
.tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px; margin-bottom: 18px;
}
.tab {
  min-height: 56px; border: 0; border-radius: 16px; background: transparent; color: #7d859d; font-weight: 700;
}
.tab.active {
  background: linear-gradient(180deg, #ff9344 0%, #ff6f1d 100%);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,128,45,0.15) inset;
}
.page-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,127,43,0.2);
  background: rgba(255,127,43,0.08);
  color: #ffd8bf;
}
.calendar-shell { padding: 18px; margin-bottom: 16px; }
.month-header-row h2 { margin: 0 0 14px; font-size: 28px; color: #fff; }
.month-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
}
.action-btn {
  min-height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02); color: #9aa2b7;
}
.action-btn.accent { color: #40d59a; border-color: rgba(64,213,154,0.35); }
.action-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.action-btn.wide { min-width: 270px; }
.legend-grid {
  display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; color: #cfd5e3; font-size: 14px; margin-bottom: 18px;
}
.legend-grid span { display: flex; align-items: center; gap: 6px; }
.lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid currentColor; }
.lg.work { color: #6db6ff; }
.lg.off { color: #ff7a7a; }
.lg.holiday { color: #ff6c6c; }
.lg.short { color: #ffc657; }
.lg.overtime { color: #21e08c; }
.lg.absent { color: #ff6c6c; }
.lg.bot { color: #35d07f; }
.weekdays, .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
.weekdays { margin-bottom: 6px; text-align: center; color: #858ea4; font-size: 14px; font-weight: 700; }
.pad { min-height: 70px; border: 1px solid transparent; }
.day {
  min-height: 72px; border: 1px solid rgba(50,255,183,0.16); background: rgba(19,42,38,0.55); color: #d8f5e8;
  padding: 8px 8px 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none;
}
.day.empty {
  border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: #8f97ad;
}
.day.empty .day-overlay { opacity: 0; }
.day.planned {
  border-color: rgba(109,182,255,0.38); background: linear-gradient(180deg, rgba(17,46,77,0.92) 0%, rgba(13,33,57,0.92) 100%); color: #e6f3ff;
}
.day.confirmed {
  border-color: rgba(33,224,140,0.36); background: rgba(19,42,38,0.72); color: #dbfff0;
}
.day.source-manual.confirmed {
  border-color: rgba(33,224,140,0.36); background: rgba(19,42,38,0.72); color: #dbfff0;
}
.day.source-polina.confirmed {
  border-color: rgba(33,224,140,0.5);
  background: linear-gradient(180deg, rgba(18,61,45,0.92) 0%, rgba(12,42,32,0.92) 100%);
  color: #e8fff3;
  box-shadow: inset 0 0 0 1px rgba(33,224,140,0.18);
}
.day.source-polina .day-overlay {
  color: #7ff0b7;
}
.day.absent {
  border-color: rgba(255,87,87,0.18); background: rgba(61,28,36,0.85); color: #ffd0d0;
}
.day.legal-weekend {
  border-color: rgba(255,116,116,0.10);
  background: rgba(24,20,31,0.55);
  color: #ff8895;
}
.day.legal-holiday {
  border-color: rgba(255,107,107,0.14);
  background: rgba(55,18,28,0.78);
  color: #ff9ca5;
}
.day.legal-short {
  box-shadow: inset 0 0 0 1px rgba(255,198,87,0.28);
}
.day.legal-short .day-num {
  color: #ffc657;
}
.day.legal-weekend .day-overlay,
.day.legal-holiday .day-overlay {
  color: #ff9ca5;
}
.day.absent .day-overlay {
  color: #ffd0d0;
}
.day.active { outline: 2px solid var(--accent); position: relative; z-index: 2; }
.day:active { transform: scale(0.985); }
.day-num { font-size: 16px; font-weight: 700; }
.day-overlay { font-size: 13px; color: #26d78e; font-weight: 700; }
.nav-months { display: flex; justify-content: center; gap: 14px; margin: 14px 0 22px; }
.nav-btn {
  min-width: 88px; min-height: 42px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); color: #a0a8bc;
}
.year-overview {
  padding: 18px;
  margin-bottom: 18px;
}
.year-overview-head h2 {
  margin: 0 0 6px;
  font-size: 24px;
}
.year-overview-head p {
  margin: 0 0 16px;
  color: var(--muted);
}
.year-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.year-summary-card {
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.year-summary-card span {
  display: block;
  color: #8f97ad;
  font-size: 12px;
  margin-bottom: 8px;
}
.year-summary-card strong {
  font-size: 24px;
}
.year-month-list {
  display: grid;
  gap: 10px;
}
.year-month-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
}
.year-month-row button {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(255,127,43,0.25);
  background: rgba(255,127,43,0.08);
  color: #ffd7bf;
  padding: 0 12px;
}
.year-month-row strong,
.year-month-row b {
  font-size: 15px;
}
.year-month-row span {
  color: #8f97ad;
  font-size: 13px;
}
.month-money-card {
  padding: 18px; margin-bottom: 18px; background: linear-gradient(180deg, #17121a 0%, #12141d 100%); border-color: rgba(255,127,43,0.14);
}
.month-money-card h2 { margin: 0 0 16px; font-size: 24px; color: var(--accent); }
.money-grid-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.money-grid-bottom { margin-bottom: 16px; }
.money-box {
  min-height: 96px; border-radius: 18px; background: rgba(8,9,14,0.58); padding: 16px 18px; display: flex; flex-direction: column; justify-content: center;
}
.money-box strong { font-size: 30px; line-height: 1; font-weight: 800; }
.money-box span { margin-top: 8px; color: #8088a1; font-size: 11px; letter-spacing: .06em; }
.blue-box strong { color: var(--blue); }
.green-box strong { color: var(--green); }
.orange-box strong { color: var(--accent); font-size: 28px; }
.money-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.money-rows div { display: flex; justify-content: space-between; gap: 10px; color: #d9deea; font-size: 17px; }
.money-rows b { font-size: 18px; }
.money-total-line { height: 1px; background: rgba(255,127,43,0.7); margin: 14px 0 12px; }
.money-grand-total { display: flex; justify-content: space-between; align-items: center; }
.money-grand-total span, .money-grand-total b { color: var(--accent); font-size: 22px; font-weight: 800; }
.money-grand-total b { font-size: 28px; }
.payout-stack { margin-bottom: 18px; }
.payout-card { padding: 18px; }
.payout-card + .payout-card { margin-top: 16px; }
.payout-title { color: #8f97ad; font-size: 14px; margin-bottom: 14px; }
.payout-row { display: flex; justify-content: space-between; gap: 10px; color: #cad1e2; font-size: 17px; margin-bottom: 10px; }
.payout-row b { color: #f1f4fb; }
.payout-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 14px 0; }
.payout-total { text-align: right; font-size: 24px; font-weight: 800; }
.payout-total.blue { color: var(--blue); }
.payout-total.green { color: var(--green); }
.payout-total.accent { color: var(--accent); }
.payout-plus { text-align: center; color: #757f9c; font-size: 36px; margin: 10px 0; }
.payout-summary-card {
  padding: 18px;
  border-color: rgba(255,127,43,0.16);
  background: linear-gradient(180deg, rgba(27,19,20,0.92) 0%, rgba(20,18,24,0.96) 100%);
}
.payout-summary-title {
  color: #ffb581;
  font-size: 14px;
  margin-bottom: 14px;
  letter-spacing: .04em;
}
.months-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.month-tile {
  min-height: 96px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.05); background: rgba(255,255,255,0.02); color: #dfe4ef; padding: 12px; text-align: center;
}
.month-tile.active { border-color: rgba(255,127,43,0.8); box-shadow: inset 0 0 0 1px rgba(255,127,43,0.25); }
.m-name { display: block; color: #8f97ad; font-size: 16px; margin-bottom: 8px; font-weight: 700; }
.m-sum { display: block; font-size: 17px; }
.m-extra { display: block; margin-top: 6px; color: var(--green); font-weight: 700; }
.m-extra.blank { visibility: hidden; }
.settings-panel { padding: 18px; }
.settings-title { color: #9ea6bb; font-size: 18px; font-weight: 800; letter-spacing: .04em; margin-bottom: 16px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.settings-grid label, .setting-readonly, .setting-fake { display: flex; flex-direction: column; }
.settings-grid span { color: #858ea4; font-size: 13px; margin-bottom: 8px; font-weight: 700; }
.settings-grid input, .setting-readonly strong, .setting-fake strong {
  min-height: 54px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); color: #fff; padding: 0 16px; font-size: 18px; display: flex; align-items: center;
}
.setting-readonly strong, .setting-fake strong { justify-content: flex-start; }
.settings-grid small { margin-top: 8px; color: #70788e; font-size: 12px; }
.check-row { display: flex; align-items: center; gap: 10px; color: #9aa2b7; margin-top: 14px; }
.editor { padding: 16px; margin-top: 18px; }
.editor-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.editor-meta { color: #98a0b5; margin-bottom: 10px; }
.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.custom-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
.editor input, .editor button, .ghost, .danger {
  min-height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color: #fff;
}
.editor input { padding: 0 12px; }
.editor button { padding: 0 12px; }
.danger { background: rgba(255,104,104,0.15); }
.editor-footer { display: flex; justify-content: flex-end; }
@media (max-width: 560px) {
  .top-controls { grid-template-columns: 1fr; }
  .settings-grid, .months-grid, .money-grid-top { grid-template-columns: 1fr 1fr; }
  .year-summary-grid { grid-template-columns: 1fr; }
  .year-month-row {
    grid-template-columns: 1fr 1fr;
  }
  .year-month-row button {
    grid-column: 1 / -1;
  }
}