:root{
  --bg:#f4f5f2;
  --card:#ffffff;
  --text:#1f2925;
  --muted:#73807a;
  --line:#e4e8e3;
  --primary:#6f887c;
  --primary-dark:#4f655c;
  --soft:#edf1ee;
  --danger:#b65f5f;
  --warning:#b18a4c;
  --success:#5f8b72;
  --shadow:0 10px 30px rgba(35,52,44,.06);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Tahoma,Arial,sans-serif}
body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.topbar{
  position:sticky;top:0;z-index:20;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  background:rgba(248,249,247,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.app-title{font-size:15px;font-weight:800}
.page-title{font-size:24px;font-weight:900;margin:14px 0 4px}
.subtitle{font-size:13px;color:var(--muted);line-height:1.6}
.content{padding:14px 14px 28px;max-width:780px;margin:auto}
.quick-actions{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.btn{
  border:0;border-radius:13px;padding:10px 14px;min-height:42px;
  background:var(--soft);color:var(--primary-dark);font-weight:800;white-space:nowrap
}
.btn.primary{background:var(--primary);color:white}
.btn.danger{background:#f7ebeb;color:var(--danger)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.small{min-height:36px;padding:8px 11px;font-size:12px}
.section{margin-top:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.section-title{font-size:17px;font-weight:900}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:14px;box-shadow:var(--shadow)
}
.grid{display:grid;gap:10px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.stat .value{font-size:26px;font-weight:900;margin-top:5px}
.stat .label{font-size:12px;color:var(--muted)}
.list{display:grid;gap:10px}
.work-card,.task-card,.employee-card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;
  box-shadow:0 6px 20px rgba(35,52,44,.04)
}
.work-card{cursor:pointer}
.work-card:active,.employee-card:active{transform:scale(.995)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.title{font-weight:900;font-size:15px;line-height:1.5}
.meta{font-size:12px;color:var(--muted);line-height:1.7}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge{padding:5px 8px;border-radius:999px;background:var(--soft);color:var(--primary-dark);font-size:11px;font-weight:800}
.progress{height:8px;background:#eef1ee;border-radius:999px;overflow:hidden;margin-top:10px}
.progress>span{display:block;height:100%;background:var(--primary);border-radius:999px}
.empty{
  text-align:center;padding:28px 18px;border:1px dashed #cfd7d1;border-radius:18px;
  color:var(--muted);background:rgba(255,255,255,.45)
}
.bottom-nav{
  position:fixed;z-index:30;right:0;left:0;bottom:0;
  height:calc(68px + env(safe-area-inset-bottom));
  padding:6px 6px env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(252,253,251,.96);border-top:1px solid var(--line);backdrop-filter:blur(20px)
}
.nav-item{
  border:0;background:transparent;color:#6f7a75;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10px;font-weight:700
}
.nav-item .icon{font-size:19px}
.nav-item.active{background:var(--soft);color:var(--primary-dark)}
.search{
  width:100%;border:1px solid var(--line);background:white;border-radius:14px;
  padding:12px 13px;min-height:46px;font-size:16px;outline:none
}
.chips{display:flex;gap:7px;overflow-x:auto;padding:10px 0 4px}
.chip{border:0;background:white;border:1px solid var(--line);border-radius:999px;padding:8px 12px;white-space:nowrap;color:var(--muted)}
.chip.active{background:var(--primary);color:white;border-color:var(--primary)}
.detail-hero{background:linear-gradient(180deg,#fdfefd,#f2f5f2);border:1px solid var(--line);border-radius:20px;padding:16px}
.detail-title{font-size:22px;font-weight:900;line-height:1.45}
.detail-section{margin-top:12px}
.detail-label{font-size:12px;color:var(--muted);margin-bottom:5px}
.detail-value{font-size:14px;line-height:1.8}
.fab{
  position:fixed;z-index:25;left:18px;bottom:calc(84px + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:18px;border:0;background:var(--primary);color:white;
  font-size:28px;box-shadow:0 12px 30px rgba(73,97,86,.28)
}
.sheet-backdrop{
  position:fixed;inset:0;z-index:80;background:rgba(22,30,26,.38);
  display:flex;align-items:flex-end
}
.sheet{
  width:100%;max-height:94dvh;overflow:auto;background:#fbfcfa;
  border-radius:26px 26px 0 0;padding:16px 14px calc(22px + env(safe-area-inset-bottom))
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:-16px;background:#fbfcfa;padding:8px 0 12px;z-index:2}
.sheet-title{font-size:19px;font-weight:900}
.form{display:grid;gap:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin:0 2px 6px}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);background:white;border-radius:13px;
  min-height:46px;padding:11px 12px;font-size:16px;outline:none
}
.field textarea{min-height:110px;resize:vertical}
.form-actions{display:flex;gap:8px;margin-top:6px}
.form-actions .btn{flex:1}
.employee-avatar{
  width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;
  color:var(--primary-dark);font-weight:900
}
.settings-list{display:grid;gap:10px}
.setting-row{background:white;border:1px solid var(--line);border-radius:15px;padding:13px}
.inline{display:flex;gap:8px;align-items:center}
@media(min-width:700px){
  .content{padding-inline:20px}
  .grid.two{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bottom-nav{max-width:760px;margin:auto;border-left:1px solid var(--line);border-right:1px solid var(--line)}
}


/* V2.1 */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.portfolio-card{
  border:1px solid var(--line);background:var(--card);border-radius:18px;padding:15px;
  min-height:116px;box-shadow:var(--shadow);text-align:right
}
.portfolio-card .p-icon{font-size:24px;margin-bottom:12px}
.portfolio-card .p-count{font-size:24px;font-weight:900}
.portfolio-card .p-name{font-size:13px;font-weight:800;margin-top:3px}
.portfolio-card .p-sub{font-size:11px;color:var(--muted);margin-top:3px}
.segmented{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:#e9eeea;
  border-radius:14px;padding:4px;margin-top:12px
}
.segmented button{border:0;background:transparent;border-radius:10px;padding:9px 5px;color:var(--muted);font-weight:800;font-size:12px}
.segmented button.active{background:white;color:var(--primary-dark);box-shadow:0 2px 8px rgba(30,45,38,.07)}
.action-list{display:grid;gap:9px}
.action-choice{
  width:100%;border:1px solid var(--line);background:white;border-radius:17px;
  padding:14px;text-align:right;display:flex;align-items:center;gap:12px
}
.action-choice .choice-icon{width:42px;height:42px;border-radius:14px;background:var(--soft);display:grid;place-items:center;font-size:20px}
.action-choice .choice-title{font-weight:900}
.action-choice .choice-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.attachment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.attachment-card{border:1px solid var(--line);border-radius:14px;background:white;overflow:hidden}
.attachment-card img{width:100%;height:120px;object-fit:cover;display:block;background:#eef1ee}
.attachment-card .attachment-body{padding:9px}
.attachment-card .attachment-name{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:white;border:1px solid var(--line);border-radius:14px;padding:12px}
.link-card a{color:var(--primary-dark);font-weight:900;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timeline{position:relative;padding-right:18px}
.timeline:before{content:"";position:absolute;right:5px;top:5px;bottom:5px;width:2px;background:#dfe6e1}
.timeline-item{position:relative;padding:0 14px 16px 0}
.timeline-item:before{content:"";position:absolute;right:-17px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--primary)}
.timeline-date{font-size:11px;color:var(--muted)}
.timeline-text{font-size:13px;line-height:1.7;margin-top:3px}
.inbox-card{background:#fffdf7;border-color:#eee4c8}
.tab-panel{display:none}.tab-panel.active{display:block}
.file-input{display:none}
@media(min-width:700px){.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.attachment-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}