:root{
  --bg:#f6f4f0;
  --surface:#ffffff;
  --surface-2:#faf9f6;
  --text:#26251f;
  --muted:#8b8578;
  --muted-2:#b3ada0;
  --accent:#3f6b4f;
  --accent-dark:#2e5039;
  --accent-light:#e7efe9;
  --warn:#c17f3e;
  --warn-light:#f6e9db;
  --danger:#b6503f;
  --danger-light:#f7e3df;
  --blue:#3f6690;
  --blue-light:#e6edf5;
  --purple:#7a5a9e;
  --purple-light:#efe7f5;
  --border:#e7e2d8;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(38,37,31,0.04), 0 4px 16px rgba(38,37,31,0.05);
  --shadow-hover:0 2px 6px rgba(38,37,31,0.06), 0 10px 28px rgba(38,37,31,0.09);
  --ease:all .16s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14.5px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:inherit;color:var(--text);}
a{color:var(--accent);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--muted-2);border-radius:8px;}
.muted{color:var(--muted);font-size:13px;}
.screen{min-height:100vh;}

/* ===== Auth screens ===== */
#screen-loading{display:flex;align-items:center;justify-content:center;}
.loading-box{color:var(--muted);font-size:14px;}
#screen-auth{display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px;width:360px;max-width:100%;box-shadow:var(--shadow);}
.brand-auth{font-weight:700;font-size:17px;margin-bottom:18px;display:flex;align-items:center;gap:10px;}
.brand-auth::before{content:"";display:block;width:34px;height:34px;border-radius:50%;background:url('/img/logo-256.png') center/cover;flex-shrink:0;}
.brand-auth small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:3px;}
.auth-box h2{font-size:16px;margin:0 0 6px 0;}
.auth-box input{width:100%;margin-bottom:10px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);}
.auth-error{color:var(--danger);font-size:12.5px;min-height:16px;}

/* ===== Layout ===== */
#app{display:flex;min-height:100vh;position:relative;}
#sidebarOverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:39;}
#sidebar{
  width:224px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;padding:20px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:40;
}
.brand{padding:6px 10px 16px 10px;margin-bottom:14px;border-bottom:1px solid var(--border);font-weight:700;font-size:18.5px;letter-spacing:0.02em;display:flex;align-items:center;gap:11px;white-space:nowrap;cursor:pointer;border-radius:var(--radius-sm);transition:var(--ease);}
.brand:hover{background:var(--surface-2);}
.brand::before{content:"";display:block;width:34px;height:34px;border-radius:50%;background:url('/img/logo-256.png') center/cover;flex-shrink:0;}
.nav-item{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:var(--radius-sm);color:var(--text);cursor:pointer;font-size:13.6px;margin-bottom:1px;border-left:2px solid transparent;opacity:0.72;transition:var(--ease);}
.nav-item:hover{background:var(--surface-2);opacity:1;transform:translateX(1px);}
.nav-item.active{background:var(--accent-light);color:var(--accent-dark);font-weight:600;border-left:2px solid var(--accent);opacity:1;}
.nav-badge{font-size:10.5px;padding:1px 6px;border-radius:20px;background:var(--muted-2);color:#fff;min-width:16px;text-align:center;}
.nav-badge.warn{background:var(--warn);}
.nav-badge.danger{background:var(--danger);}
.nav-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted-2);margin:16px 10px 6px 10px;}
.sidebar-foot{margin-top:auto;padding:10px;font-size:11.5px;color:var(--muted-2);}
.sidebar-foot button{background:none;border:none;color:var(--muted);text-decoration:underline;padding:2px 0;display:block;font-size:11.5px;transition:var(--ease);}
.sidebar-foot button:hover{color:var(--danger);}
#whoAmI{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
#whoAmI .avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0;}
#whoAmI .who-text{font-size:12.5px;color:var(--text);font-weight:600;min-width:0;}
#whoAmI .who-text span{display:block;font-weight:400;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

#main{flex:1;min-width:0;display:flex;flex-direction:column;}
#topbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:14px 28px 8px 28px;display:flex;gap:10px;align-items:center;}
.hamburger{display:none;font-size:19px;padding:2px 8px;}
#searchInput{flex:1;max-width:340px;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:20px;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b3ada0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center;transition:var(--ease);}
#searchInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light);}
.btn{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:8px 14px;border-radius:20px;font-weight:500;transition:var(--ease);}
.btn:hover{border-color:var(--muted-2);transform:translateY(-1px);box-shadow:var(--shadow);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);box-shadow:0 4px 14px rgba(63,107,79,0.28);}
.btn-ghost{border:none;background:none;color:var(--muted);}
.btn-ghost:hover{color:var(--text);transform:none;box-shadow:none;}
.btn-sm{padding:4px 10px;font-size:12.5px;border-radius:14px;}
.btn-icon{border:none;background:none;color:var(--muted-2);padding:2px 6px;font-size:15px;transition:var(--ease);}
.btn-icon:hover{color:var(--danger);transform:scale(1.1);}
select#viewAsSelect{padding:7px 10px;border-radius:20px;border:1px solid var(--border);background:var(--surface);max-width:180px;}

#leaveBanner{display:none;margin:0 28px 0 28px;padding:12px 18px;border-radius:var(--radius);background:var(--danger-light);color:var(--danger);font-weight:600;align-items:center;justify-content:space-between;gap:10px;}
#leaveBanner.show{display:flex;}
#leaveBanner.soon{background:var(--warn-light);color:#8a5a24;}

#content{padding:18px 28px 90px 28px;max-width:1180px;}
.view{display:none;}
.view.active{display:block;}

h1.page-title{font-size:22px;margin:4px 0 4px 0;font-weight:800;letter-spacing:-0.01em;}
.page-sub{color:var(--muted);font-size:13px;margin-bottom:18px;}

.view.active{animation:viewIn .22s ease;}
@keyframes viewIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow);transition:var(--ease);}
.card-flat{border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:8px;background:var(--surface);transition:var(--ease);}
.card-flat:hover{box-shadow:var(--shadow-hover);border-color:var(--muted-2);}
.diary-entry.pinned{background:var(--accent-light);border-color:var(--accent);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.section-title{font-size:12px;text-transform:uppercase;letter-spacing:0.06em;color:var(--muted);font-weight:700;margin:22px 0 8px 0;}
.section-title:first-child{margin-top:0;}

.row{display:flex;align-items:center;gap:8px;}
.row-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface-2);margin-bottom:6px;flex-wrap:wrap;transition:var(--ease);}
.row-item:hover{border-color:var(--muted-2);}
.row-item input[type=text],.row-item input[type=date],.row-item input[type=time],.row-item input[type=datetime-local],.row-item input[type=number],.row-item select{border:none;background:transparent;padding:4px;border-radius:6px;}
.row-item input[type=text]{flex:1;min-width:100px;}
.row-item input:focus,.row-item select:focus,.row-item textarea:focus{outline:none;background:#fff;box-shadow:0 0 0 2px var(--accent-light);}
.row-item.done{opacity:0.5;}
.row-item.done input[type=text]{text-decoration:line-through;}
.tag{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--accent-light);color:var(--accent-dark);white-space:nowrap;}
.tag.assigned{background:var(--warn-light);color:#8a5a24;}
textarea{width:100%;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;resize:vertical;min-height:44px;background:var(--surface-2);}
input[type=text],input[type=date],input[type=time],input[type=datetime-local],input[type=number],input[type=password],select{border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 9px;background:var(--surface-2);}
label.field-label{font-size:11px;color:var(--muted);display:block;margin-bottom:3px;text-transform:uppercase;letter-spacing:0.04em;}
/* Поля/кнопки, недоступные для правки текущему пользователю (не автор
   записи и не CEO, либо истекли 24 часа с момента создания) */
input:disabled,select:disabled,textarea:disabled,button:disabled,.btn:disabled,.btn-icon:disabled,.star-btn:disabled{opacity:.4;cursor:not-allowed;background:var(--surface-2);}
input:disabled:hover,select:disabled:hover,textarea:disabled:hover{background:var(--surface-2);}

.empty-state{color:var(--muted-2);font-size:13px;padding:22px 4px;font-style:normal;text-align:center;}
.empty-state::before{content:"✓";display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0 auto 8px auto;border-radius:50%;background:var(--accent-light);color:var(--accent-dark);font-size:14px;font-weight:700;}
.add-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.add-row input[type=text]{flex:1;min-width:180px;padding:9px 12px;border-radius:var(--radius-sm);}

.checkbox{width:17px;height:17px;flex-shrink:0;accent-color:var(--accent);}
.star-btn{border:none;background:none;font-size:15px;color:var(--muted-2);padding:2px;}
.star-btn.active{color:var(--warn);}

.dash-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;}
@media(max-width:960px){.dash-grid{grid-template-columns:1fr;}}
.stat-num{font-size:22px;font-weight:800;line-height:1.1;}
.stat-label{font-size:12px;color:var(--muted);}
.stat-item{display:flex;align-items:center;gap:12px;}
.stat-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:var(--accent-light);}
.stat-icon.blue{background:var(--blue-light);}
.stat-icon.purple{background:var(--purple-light);}
.stat-icon.warn{background:var(--warn-light);}

.modal-overlay{display:none;position:fixed;inset:0;background:rgba(38,37,31,0.35);z-index:100;align-items:flex-start;justify-content:center;padding-top:12vh;}
.modal-overlay.show{display:flex;}
.modal-box{background:#fff;border-radius:var(--radius);padding:20px;width:520px;max-width:92vw;box-shadow:0 12px 40px rgba(0,0,0,0.2);max-height:80vh;overflow:auto;}
.modal-box h3{margin:0 0 12px 0;font-size:15px;}
.modal-box textarea, .modal-box input[type=text], .modal-box input[type=password]{width:100%;}

.fab{position:fixed;bottom:26px;right:32px;z-index:50;background:var(--accent);color:#fff;border:none;padding:13px 20px;border-radius:30px;font-weight:600;box-shadow:0 6px 20px rgba(63,107,79,0.35);transition:var(--ease);}
.fab:hover{background:var(--accent-dark);transform:translateY(-2px) scale(1.03);box-shadow:0 10px 26px rgba(63,107,79,0.4);}

.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
@media(max-width:1000px){.week-grid{grid-template-columns:repeat(2,1fr);}}
.week-day{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;min-height:140px;transition:var(--ease);}
.week-day:hover{box-shadow:var(--shadow-hover);}
.week-day h4{margin:0 0 6px 0;font-size:12.5px;text-transform:uppercase;color:var(--muted);letter-spacing:0.03em;}
.week-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.week-day.today h4{color:var(--accent-dark);}
.week-day .mini-item{font-size:12.5px;padding:4px 6px;border-radius:6px;background:var(--surface-2);margin-bottom:4px;display:flex;gap:5px;align-items:flex-start;}

.hour-row{display:flex;border-top:1px solid var(--border);min-height:34px;}
.hour-row:last-child{border-bottom:1px solid var(--border);}
.hour-label{width:56px;flex-shrink:0;font-size:11px;color:var(--muted-2);padding:6px 6px 0 0;text-align:right;}
.hour-content{flex:1;padding:3px 6px;}
.hour-content .row-item{margin-bottom:3px;padding:5px 8px;}

.pomodoro{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pomo-time{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;min-width:110px;}

.checklist-item{display:flex;align-items:center;gap:8px;padding:5px 2px;}

.search-hit{border-left:3px solid var(--accent);padding:8px 12px;margin-bottom:6px;background:var(--surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0;cursor:pointer;}
.search-hit small{color:var(--muted);text-transform:uppercase;font-size:10.5px;letter-spacing:0.05em;}

.pill-select{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.pill-select button{border:1px solid var(--border);background:var(--surface);padding:6px 12px;border-radius:20px;font-size:12.5px;}
.pill-select button.active{background:var(--accent);color:#fff;border-color:var(--accent);}

.welcome-note{background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;font-size:13.5px;line-height:1.6;}
.welcome-note h3{margin:0 0 8px 0;color:var(--accent-dark);}

/* ===== Chat ===== */
.chat-layout{display:flex;gap:16px;align-items:flex-start;}
.chat-groups{width:210px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;}
.chat-group-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;margin-bottom:2px;transition:var(--ease);}
.chat-group-item:hover{background:var(--surface-2);}
.chat-group-item.active{background:var(--accent-light);color:var(--accent-dark);font-weight:600;}
.chat-group-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-thread{flex:1;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;box-shadow:var(--shadow);}
.chat-thread-head{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;}
.chat-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;max-height:52vh;min-height:220px;}
.chat-msg{max-width:78%;background:var(--surface-2);border-radius:var(--radius-sm);padding:8px 11px;align-self:flex-start;}
.chat-msg.mine{align-self:flex-end;background:var(--accent-light);}
.chat-msg-head{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:var(--muted);margin-bottom:3px;}
.chat-msg-head b{color:var(--text);font-weight:600;}
.chat-msg-time{white-space:nowrap;}
.chat-msg-text{font-size:13.5px;white-space:pre-wrap;word-break:break-word;}
.chat-msg-img{max-width:220px;max-height:220px;border-radius:var(--radius-sm);display:block;margin-top:4px;cursor:pointer;}
.chat-msg-actions{display:flex;gap:4px;margin-top:4px;justify-content:flex-end;}
.chat-composer{border-top:1px solid var(--border);padding:10px 14px;}
.chat-composer .row{gap:8px;}
.chat-composer input[type=text]{flex:1;}
#chatImagePreview:empty{display:none;}
#chatImagePreview{margin-bottom:6px;}
.chat-preview-wrap{position:relative;display:inline-block;}
.chat-preview-wrap img{max-height:80px;border-radius:var(--radius-sm);display:block;}
.chat-preview-wrap button{position:absolute;top:-8px;right:-8px;background:var(--danger);color:#fff;border-radius:50%;width:20px;height:20px;padding:0;font-size:11px;line-height:20px;}
.chat-preview-wrap button:hover{color:#fff;}
.chat-file-chip{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 26px 6px 10px;font-size:12.5px;max-width:280px;}
.chat-file-chip-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
.chat-file-chip-size{color:var(--muted);white-space:nowrap;}
.chat-file-chip button{position:absolute;top:-8px;right:-8px;background:var(--danger);color:#fff;border-radius:50%;width:20px;height:20px;padding:0;font-size:11px;line-height:20px;}
.chat-file-chip button:hover{color:#fff;}
.chat-msg-file{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:12.5px;margin-top:4px;text-decoration:none;color:var(--text);max-width:260px;}
.chat-msg-file:hover{border-color:var(--accent);}
.chat-msg-file-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.chat-msg-file-size{color:var(--muted);white-space:nowrap;}
.chat-member-list{max-height:220px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;background:var(--surface-2);}
.chat-member-check{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 2px;}
@media(max-width:800px){
  .chat-layout{flex-direction:column;}
  .chat-groups{width:100%;display:flex;flex-wrap:wrap;gap:4px;}
  .chat-groups .btn{width:100%;}
  .chat-group-item{flex:1 1 auto;}
  .chat-messages{max-height:44vh;}
}

.team-table{width:100%;border-collapse:collapse;}
.team-table th,.team-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);font-size:13px;}
.team-table th{font-size:11px;text-transform:uppercase;color:var(--muted);letter-spacing:0.04em;}
.credential-box{background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius-sm);padding:10px 12px;font-size:13px;margin-bottom:10px;}

/* ===== Mobile ===== */
@media(max-width:800px){
  .hamburger{display:inline-block;}
  #sidebar{position:fixed;left:0;top:0;height:100vh;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 30px rgba(0,0,0,0.2);}
  #sidebar.open{transform:translateX(0);}
  #sidebarOverlay.show{display:block;}
  #topbar{padding:12px 14px 8px 14px;flex-wrap:wrap;}
  #content{padding:14px 14px 90px 14px;}
  #searchInput{max-width:none;}
  #viewAsWrap{width:100%;order:5;}
  select#viewAsSelect{width:100%;max-width:none;}
  .fab{right:16px;bottom:16px;padding:12px 18px;font-size:13px;}
  .modal-box{width:94vw;}
}