
:root{
  --ink:#101828; --muted:#667085; --line:#e4e7ec; --panel:#ffffff;
  --bg:#f7f8fa; --blue:#0b5bd3; --blue2:#eaf2ff; --green:#16a34a;
  --green-bg:#e9f8ee; --orange:#f59e0b; --orange-bg:#fff4df;
  --red:#dc2626; --red-bg:#feecec; --shadow:0 10px 30px rgba(16,24,40,.07);
  --radius:18px; --radius-sm:13px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.topbar{
  height:78px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(16px,env(safe-area-inset-left));
  position:sticky;top:0;z-index:30
}
.brand-logo{height:46px;width:auto;display:block}
.lang-chip{
  border:1px solid var(--blue);background:#fff;color:var(--blue);
  border-radius:10px;padding:7px 10px;font-weight:800
}
#main{max-width:480px;margin:0 auto;padding:24px 16px 104px}

.screen-title{font-size:28px;font-weight:850;margin:4px 0 18px}
.subtle{color:var(--muted)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:14px
}
.profile-row{display:flex;align-items:center;gap:14px}
.avatar{
  width:64px;height:64px;border-radius:50%;overflow:hidden;background:#eef2f6;
  display:grid;place-items:center;font-weight:850;font-size:20px;border:1px solid var(--line)
}
.avatar img{width:100%;height:100%;object-fit:cover}
.profile-name{font-size:22px;font-weight:850}
.profile-meta{font-size:14px;color:var(--muted);margin-top:2px}

.today-card{padding:20px}
.today-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.today-title{font-weight:850;font-size:17px}
.empty-state{text-align:center;padding:28px 8px 8px;color:var(--muted)}
.empty-icon{font-size:42px;opacity:.55;margin-bottom:10px}
.primary,.secondary,.danger,.success,.outline{
  border:0;border-radius:12px;padding:13px 16px;font-weight:850
}
.primary{background:var(--blue);color:#fff}
.secondary{background:#eef2f6;color:var(--ink)}
.outline{background:#fff;color:var(--blue);border:1px solid #b8cef3}
.success{background:var(--green);color:#fff}
.danger{background:var(--red);color:#fff}
.full{width:100%}
.stack{display:grid;gap:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.calendar-card{padding:14px 16px}
.calendar-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.calendar-title{font-weight:850}
.icon-btn{width:36px;height:36px;border:0;border-radius:10px;background:#f2f4f7}
.week-row,.days-grid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.week-row{font-size:12px;color:var(--muted);margin-bottom:6px}
.day{
  aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:14px;
  border:0;background:transparent
}
.day.today{outline:1px solid #a9b7cc}
.day.selected{background:var(--blue);color:#fff;font-weight:850}
.day.has-entry::after{
  content:"";width:4px;height:4px;background:var(--blue);border-radius:50%;
  position:absolute;margin-top:22px
}
.day{position:relative}

.section-label{font-weight:850;margin:20px 0 10px}
.entry{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.entry-icon{width:38px;height:38px;border-radius:10px;background:#f2f4f7;display:grid;place-items:center}
.entry-body{flex:1;min-width:0}
.entry-title{font-weight:800}
.entry-meta{font-size:13px;color:var(--muted);margin-top:3px}
.entry-hours{font-weight:850}

.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:14px}
.tab-btn{border:0;background:transparent;padding:12px 4px;color:var(--muted);font-weight:800}
.tab-btn.active{color:var(--blue);border-bottom:2px solid var(--blue)}

.project-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px}
.project-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.project-title{font-weight:900}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;font-size:12px;font-weight:850}
.badge.blue{background:var(--blue);color:#fff}
.badge.green{background:var(--green-bg);color:#17713a}
.badge.orange{background:var(--orange-bg);color:#9a6700}
.badge.gray{background:#eef2f6;color:#475467}
.project-meta{display:grid;gap:9px}
.meta-row{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.meta-row span:first-child{color:var(--muted)}
.meta-row span:last-child{font-weight:700;text-align:right}

.settings-group{margin-top:18px}
.settings-label{font-size:12px;color:var(--muted);font-weight:850;margin:0 0 8px 4px}
.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.setting-row{
  display:flex;align-items:center;gap:12px;padding:15px 14px;border-bottom:1px solid var(--line)
}
.setting-row:last-child{border-bottom:0}
.setting-icon{width:32px;height:32px;border-radius:10px;background:#f2f4f7;display:grid;place-items:center}
.setting-main{flex:1}
.setting-title{font-weight:750}
.setting-value{font-size:13px;color:var(--muted);margin-top:2px}
.chev{color:#98a2b3}
.toggle{
  width:48px;height:28px;border-radius:999px;background:#d0d5dd;padding:3px;border:0
}
.toggle span{display:block;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.toggle.on{background:var(--blue)}
.toggle.on span{transform:translateX(20px)}

.form-card label{display:block;font-size:13px;font-weight:850;margin:14px 0 6px}
.form-card input,.form-card select,.form-card textarea{
  width:100%;border:1px solid #d0d5dd;border-radius:12px;padding:12px;background:#fff
}
.form-card textarea{min-height:92px;resize:vertical}
.form-card h2{margin:0 0 6px}
.help{font-size:12px;color:var(--muted);margin-top:6px}
.notice{padding:12px;border-radius:12px;background:#f8fafc;border:1px solid var(--line);font-size:13px}
.error{color:#b42318}.success-text{color:#067647}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom);
  z-index:40
}
.nav-btn{
  border:0;background:#fff;padding:10px 4px 9px;color:#475467;display:grid;gap:3px;place-items:center;
  font-size:11px
}
.nav-btn.active{color:var(--blue);font-weight:850}
.nav-ico{font-size:21px;line-height:1}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(16,24,40,.35);display:flex;align-items:flex-end;
  justify-content:center;z-index:100
}
.sheet{
  width:min(480px,100%);background:#fff;border-radius:22px 22px 0 0;padding:18px 16px 28px;
  max-height:90vh;overflow:auto
}
.sheet-handle{width:46px;height:5px;border-radius:5px;background:#d0d5dd;margin:0 auto 16px}
.sheet h3{margin:0 0 12px}
.sheet-actions{display:grid;gap:10px}
.sheet-action{
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px;text-align:left;font-weight:800
}

@media(min-width:760px){
  #main{max-width:900px;padding-top:34px}
  .desktop-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .desktop-grid .card{margin-bottom:0}
}
