:root{
  --green:#7fae8f; --green-dark:#5d8f6f;
  --weekend:#f3ddc0; --holiday:#f0b27a; --holiday-digit:#c0392b;
  --other-month:#b9b9b9;
  --ink:#2b2b2b; --paper:#fdfcf8; --line:#d8d2c4;
  --vacation:#9be15d; --trip:#6ec6f0; --meeting:#f296b8; --kids:#ffe066;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Segoe UI", Arial, sans-serif; background:var(--paper); color:var(--ink);}

/* PIN-экран */
#pinGate{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--paper); z-index:20;}
#pinGate[hidden]{display:none;}
#pinForm{background:#fff; border:1px solid var(--line); border-radius:12px; padding:30px 34px; text-align:center; width:300px; box-shadow:0 4px 20px rgba(0,0,0,.08);}
#pinForm h2{margin-bottom:6px; font-size:20px;}
#pinForm p{font-size:13px; color:#777; margin-bottom:14px;}
#pinForm input{width:100%; padding:10px; font-size:20px; text-align:center; letter-spacing:6px;
  border:1px solid var(--line); border-radius:8px; margin-bottom:12px;}
#pinForm button{width:100%; padding:10px; border:none; border-radius:8px; background:var(--green-dark); color:#fff; font-size:15px; cursor:pointer;}
.pin-error{color:#b03a2e !important; margin:10px 0 0 !important; min-height:16px;}

header{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  padding:14px 28px; background:#efede4; border-bottom:1px solid var(--line);
}
header h1{font-size:22px; font-weight:600; letter-spacing:.3px;}
.year-nav{display:flex; align-items:center; gap:10px; font-size:20px;}
.year-nav button{
  border:1px solid var(--line); background:#fff; border-radius:6px;
  width:34px; height:34px; font-size:18px; cursor:pointer;
}
.year-nav button:hover{background:#e6f0e9;}
.export-btn{
  margin-left:auto; padding:9px 18px; border:none; border-radius:8px;
  background:var(--green-dark); color:#fff; font-size:14px; cursor:pointer;
}
.export-btn:hover{background:#4d7a5d;}
.layout{display:flex; gap:20px; padding:20px 28px; align-items:flex-start;}
.calendar{flex:1; min-width:0; overflow-x:auto;}
.months{display:grid; grid-template-columns:repeat(3,minmax(280px,1fr)); gap:22px 26px; min-width:920px;}
.month{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06);}
.month h2{
  background:var(--green); color:#17351f; font-size:16px; font-weight:600;
  text-align:center; padding:6px 0; letter-spacing:.4px; white-space:nowrap;
}
table{width:100%; border-collapse:collapse; table-layout:fixed;}
th{font-size:11px; color:#666; font-weight:600; padding:4px 0 3px; text-transform:uppercase;}
th.we{color:var(--holiday-digit);}
td{position:relative; height:42px; border:1px solid #ece7db; text-align:center; vertical-align:top;
   font-size:13px; cursor:pointer; user-select:none; padding:3px 0 0; overflow:hidden;}
td .num{display:inline-block;}
td.other{color:var(--other-month); background:#faf9f4; cursor:default;}
td.weekend{background:var(--weekend);}
td.holiday{background:var(--holiday); color:var(--holiday-digit); font-weight:700;}
td.short .num::after{content:"*"; font-size:11px; vertical-align:super; color:#8a5a00;}
td.today{outline:3px solid #2f7d4f; outline-offset:-3px;}
td.selecting{outline:2px dashed #3a7bd5; outline-offset:-2px;}
td:hover:not(.other){background:#eef5f0;}
td.weekend:hover{background:#ecd3ae;}
td.holiday:hover{background:#eaa767;}
.ribbons{position:absolute; inset:0; pointer-events:none;}
.ribbon{position:absolute; left:2px; right:2px; height:5px;}
.ribbon.start{border-top-left-radius:4px; border-bottom-left-radius:4px;}
.ribbon.end{border-top-right-radius:4px; border-bottom-right-radius:4px;}

/* боковая панель */
aside{width:290px; flex-shrink:0;}
.panel{background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px;}
.panel h3{font-size:14px; text-transform:uppercase; letter-spacing:.6px; color:#5d6b60; margin-bottom:10px;}
.legend-row{display:flex; align-items:center; gap:9px; font-size:13px; padding:3px 0;}
.swatch{width:18px; height:14px; border-radius:3px; flex-shrink:0; border:1px solid rgba(0,0,0,.12);}
#eventList{list-style:none; font-size:13px;}
#eventList li{display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px dashed #e6e1d4;}
#eventList li:last-child{border-bottom:none;}
#eventList .del{margin-left:auto; border:none; background:none; color:#b03a2e; cursor:pointer; font-size:15px; padding:2px 5px;}
#eventList .del:hover{background:#fdecea; border-radius:4px;}
#eventList .empty{color:#999; border:none;}

/* модалка */
.modal-back{position:fixed; inset:0; background:rgba(40,40,30,.35); display:none; align-items:center; justify-content:center; z-index:10;}
.modal-back.open{display:flex;}
.modal{background:#fff; border-radius:10px; padding:22px 24px; width:360px; box-shadow:0 8px 30px rgba(0,0,0,.25);}
.modal h3{margin-bottom:14px; font-size:17px;}
.modal label{display:block; font-size:13px; color:#555; margin:10px 0 4px;}
.modal select,.modal input{width:100%; padding:7px 9px; border:1px solid var(--line); border-radius:6px; font-size:14px;}
.palette{display:flex; gap:7px; flex-wrap:wrap; margin-top:4px;}
.palette div{width:26px; height:26px; border-radius:6px; cursor:pointer; border:2px solid transparent;}
.palette div.sel{border-color:#333;}
.modal .row{display:flex; gap:10px;}
.modal .row>div{flex:1;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.modal-actions button{padding:8px 18px; border-radius:7px; border:none; font-size:14px; cursor:pointer;}
.btn-primary{background:var(--green-dark); color:#fff;}
.btn-ghost{background:#eee;}
.hint{font-size:12px; color:#8a8a7a; margin-top:12px; line-height:1.5;}

/* узкие окна: панель уходит под календарь, события — сразу под месяцами */
@media (max-width:1250px){
  .layout{flex-direction:column;}
  aside{width:100%; display:flex; gap:16px; flex-wrap:wrap;}
  aside .panel{flex:1; min-width:260px;}
  aside .events-panel{order:-1;}
  .months{min-width:0; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
}
/* iPhone / мобильный: 2 колонки, шторка вместо модалки */
@media (max-width:600px){
  header{padding:10px 14px; gap:12px;}
  header h1{font-size:15px; flex-basis:100%;}
  .year-nav{font-size:17px;}
  .export-btn{padding:8px 12px; font-size:12px; margin-left:auto;}
  .layout{padding:12px; gap:14px;}
  .months{grid-template-columns:repeat(2,1fr); gap:12px;}
  .month h2{font-size:14px; padding:5px 0;}
  th{font-size:9px;}
  td{height:36px; font-size:12px;}
  aside{flex-direction:column;}
  aside .panel{min-width:0;}
  .modal-back{align-items:flex-end;}
  .modal{width:100%; border-radius:14px 14px 0 0; padding:18px 18px 26px;}
}