/* ===== Yogreet Tasks — design system (2026-07-11 redesign) ===== */
:root{
  --bg:#f6f6f7; --surface:#fff;
  --text:#1c1c20; --text2:#70707a; --text3:#9a9aa3; --text4:#a2a2ab;
  --border:#ececef; --border2:#e2e2e8; --border3:#e6e6ec; --divider:#f1f1f4;
  --primary:#5b5bd6; --primary-h:#4a4ac0; --primary-tint:#f0f0fb; --primary-tint2:#efeafd;
  --green1:#2fbf6b; --green2:#22a55c; --done:#1f9d57; --done-bg:#e6f6ec;
  --danger:#c0453f; --danger2:#d24b4b; --danger3:#e5484d; --danger-bg:#fdf2f2; --danger-bg2:#fdeaea;
  --radius-card:14px; --radius-btn:10px; --radius-chip:20px;
  --shadow-card:0 1px 2px rgba(20,20,35,.03);
  --shadow-primary:0 2px 8px rgba(91,91,214,.28);
  --shadow-chat:0 10px 34px rgba(28,28,40,.14);
  --shadow-panel:0 18px 50px rgba(28,28,40,.18);
  --shadow-modal:0 24px 60px rgba(20,20,35,.3);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.hidden{display:none !important}

/* ---------- logo ---------- */
.logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(150deg,#2fbf6b,#22a55c);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700;
  box-shadow:0 3px 10px rgba(34,165,92,.35);flex:0 0 auto}

/* ---------- buttons ---------- */
.btn{border:1px solid var(--border2);background:#fff;color:var(--text);font-size:13.5px;font-weight:600;
  padding:8px 13px;border-radius:var(--radius-btn);transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:#f4f4f6}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:var(--shadow-primary)}
.btn-primary:hover{background:var(--primary-h)}
.btn-danger{border-color:#f0dede;color:var(--danger);background:#fff}
.btn-danger:hover{background:var(--danger-bg)}
.btn-sm{padding:6px 11px;font-size:12.5px}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:#f4f4f6}

/* ===== AUTH ===== */
.auth{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.auth-brand{background:linear-gradient(150deg,#4a4ac0,#5b5bd6 52%,#22a55c);color:#fff;
  padding:48px 56px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-brand .circ{position:absolute;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.auth-brand .c1{width:340px;height:340px;top:-90px;right:-90px}
.auth-brand .c2{width:200px;height:200px;bottom:40px;left:-60px;background:rgba(255,255,255,.06)}
.auth-brand h1{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.02em;max-width:9em;margin:auto 0 20px}
.auth-brand .feat{display:flex;gap:11px;align-items:flex-start;margin:11px 0;max-width:26em;position:relative;z-index:1}
.auth-brand .feat .dot{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:12px}
.auth-brand .feat span{opacity:.92;font-size:14px}
.auth-brand .foot{margin-top:auto;opacity:.7;font-size:12.5px;position:relative;z-index:1}
.auth-brandtop{display:flex;align-items:center;gap:11px;position:relative;z-index:1}
.auth-brandtop b{font-size:17px;letter-spacing:-.01em}

.auth-form{display:flex;align-items:center;justify-content:center;padding:32px}
.auth-card{width:100%;max-width:392px}
.auth-card h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.auth-card .sub{color:var(--text2);margin:0 0 22px;font-size:14px}
.role-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.role-card{border:1.5px solid var(--border2);border-radius:12px;padding:12px 13px;text-align:left;
  background:#fff;transition:.12s}
.role-card:hover{border-color:#cfcfe4}
.role-card.on{border-color:var(--primary);background:var(--primary-tint);box-shadow:0 0 0 3px rgba(91,91,214,.12)}
.role-card b{display:block;font-size:14px}
.role-card small{color:var(--text3);font-size:11.5px}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text4);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border2);
  border-radius:10px;font-size:14px;color:var(--text);background:#fff;outline:none;transition:.12s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(91,91,214,.15)}
.field textarea{resize:vertical;min-height:66px}
.err-banner{background:var(--danger-bg2);color:var(--danger);border-radius:10px;padding:9px 12px;
  font-size:13px;font-weight:600;margin-bottom:13px}
.auth-links{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px}
.auth-links a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
.auth-full{width:100%;justify-content:center;display:flex;padding:11px;font-size:14.5px;margin-top:4px}
.forgot-ok{text-align:center;padding:8px 0}
.forgot-ok .tile{width:56px;height:56px;border-radius:16px;background:var(--done-bg);color:var(--done);
  font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.demo-row{display:flex;gap:7px;margin-top:16px}
.demo-row .d{flex:1;border:1px solid var(--border2);border-radius:9px;background:#fafafb;padding:7px;
  text-align:center;font-size:11px;font-weight:600;color:var(--text2)}
.demo-row .d:hover{background:#f0f0fb;border-color:#cfcfe4}
.demo-row .d b{display:block;color:var(--text)}

/* ===== APP SHELL ===== */
.header{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border);
  padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.header .brand{display:flex;align-items:center;gap:11px}
.header .brand b{font-size:18px;font-weight:700;letter-spacing:-.01em}
.header .right{display:flex;align-items:center;gap:10px}
.usercluster{display:flex;align-items:center;gap:9px;padding-left:6px}
.usercluster .u-name{font-weight:700;font-size:13.5px}
.pill-role{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.03em}
.pill-admin{background:var(--primary-tint2);color:#7a5bd6}
.pill-dev{background:#e7f0ff;color:#2563c9}
.pill-client{background:var(--done-bg);color:var(--done)}
.u-email{font-size:11.5px;color:var(--text3)}

/* responsive visibility helpers + mobile account menu */
.only-mobile{display:none}
.acct-btn{border:1px solid var(--border2);background:#fff;border-radius:11px;padding:5px;
  display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px}
.acct-btn:hover{background:#f4f4f6}
.acct-btn .av{width:28px;height:28px;font-size:12px}
.acct-menu{position:absolute;top:calc(100% + 6px);right:14px;z-index:50;background:#fff;
  border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-panel);padding:6px;
  min-width:210px;display:flex;flex-direction:column;gap:2px}
.acct-id{padding:9px 10px 10px;border-bottom:1px solid var(--divider);margin-bottom:4px}
.acct-id b{font-size:14px}
.acct-id .u-email{display:block;margin-top:3px}
.acct-item{text-align:left;border:0;background:transparent;padding:11px 10px;border-radius:9px;
  font-size:14.5px;font-weight:600;color:var(--text)}
.acct-item:hover{background:#f4f4f6}
.acct-item.danger{color:var(--danger)}
.auth-mobilebrand{display:none;align-items:center;gap:10px;margin-bottom:20px}
.auth-mobilebrand b{font-size:17px;font-weight:700}

/* global search bar */
.searchbar{display:flex;align-items:center;gap:9px;margin:14px 24px 0;padding:0 14px;
  background:#fff;border:1px solid var(--border);border-radius:12px;height:44px;
  box-shadow:0 1px 2px rgba(20,20,35,.03)}
.searchbar:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(91,91,214,.14)}
.searchbar .si{font-size:15px;opacity:.7;flex:0 0 auto}
.searchbar input{flex:1;border:0;outline:none;background:transparent;font-size:14.5px;color:var(--text);min-width:0}
.searchbar .s-clear{flex:0 0 auto;border:0;background:#f0f0f2;color:#7a7a83;width:24px;height:24px;
  border-radius:50%;cursor:pointer;font-size:12px;line-height:1}
.searchbar .s-clear:hover{background:#e5e5ea;color:var(--text)}
.controlbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 24px 4px}
.weeknav{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--border3);
  border-radius:10px;overflow:hidden}
.weeknav button{border:0;background:#fff;padding:8px 12px;font-size:15px;color:var(--text2)}
.weeknav button:hover{background:#f4f4f6}
.weeknav .wk{padding:4px 12px;text-align:center;min-width:132px;border-left:1px solid var(--border3);
  border-right:1px solid var(--border3)}
.weeknav .wk .lbl{font-size:14px;font-weight:700}
.weeknav .wk .sub{font-size:11.5px;color:var(--primary);cursor:pointer}
.seg-wrap{display:inline-flex;align-items:center;gap:8px}
.seg-wrap .lab{font-size:12.5px;color:var(--text3);font-weight:600}
.seg{display:inline-flex;background:#eeeef1;border-radius:9px;padding:3px}
.seg button{border:0;background:transparent;color:#8a8a92;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:7px}
.seg button.on{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(20,20,35,.12)}
.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 24px 6px}
.filterbar .lab{font-size:12.5px;color:var(--text3);font-weight:600}
.filterbar select{padding:8px 12px;border-radius:9px;border:1px solid var(--border2);font-size:13px;
  font-weight:600;background:#fff;color:var(--text);outline:none}
.filterbar select:focus{border-color:var(--primary)}

.client-banner{margin:8px 24px 0;padding:12px 16px;border-radius:12px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(120deg,#f0f0fb,#ecf7f0)}
.client-banner .av{width:36px;height:36px;border-radius:50%;background:var(--green2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.client-banner b{font-size:14.5px}
.client-banner small{display:block;color:var(--text2);font-size:12.5px}

.board{display:grid;grid-template-columns:264px minmax(0,1fr);gap:20px;padding:10px 24px 160px}
.sidebar{position:sticky;top:80px;align-self:start;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-card);padding:8px;
  max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
/* keep the PROJECTS header pinned while the list scrolls */
.sidebar .s-head{position:sticky;top:0;background:#fff;z-index:1}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#d9d9e0;border-radius:8px}
.sidebar::-webkit-scrollbar-thumb:hover{background:#c4c4cf}
.sidebar .s-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 8px}
.sidebar .s-head .t{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--text4)}
.sidebar .s-head .c{font-size:11px;color:var(--text4)}
.proj-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;
  border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:600}
.proj-row:hover{background:#f6f6f8}
.proj-row.on{background:var(--primary-tint);color:var(--primary-h);font-weight:700}
.proj-row .cnt{font-size:11px;background:#eeeef1;color:#7a7a83;border-radius:20px;padding:1px 8px;font-weight:700}
.proj-row.on .cnt{background:#e2e2fa;color:var(--primary)}
.proj-row .pname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.list-head{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 12px}
.list-head .t{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--text4)}
.list-head .c{font-size:12px;color:var(--text3)}
.tasklist{display:flex;flex-direction:column;gap:12px}
.empty{border:1.5px dashed var(--border2);border-radius:var(--radius-card);padding:40px;text-align:center;
  color:var(--text3);font-weight:600}

/* ---------- task card ---------- */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-card);padding:16px 18px;
  box-shadow:var(--shadow-card);animation:fadein .18s ease}
.card.urgent{border-color:#f3d3d3;box-shadow:0 0 0 3px rgba(229,72,77,.06)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card .toprow{display:flex;justify-content:space-between;gap:14px}
.meta-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:5px}
.card .title{font-size:15.5px;font-weight:700;color:#1c1c20;margin:1px 0}
.card .detail{font-size:13.5px;color:var(--text2);line-height:1.5;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:20px;line-height:1.4;white-space:nowrap}
.chip .pdot{width:7px;height:7px;border-radius:50%}
.proj-name{font-size:12.5px;color:var(--text2);font-weight:600}
.dotsep{color:var(--text4)}
.metarow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.assignee{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text2);font-weight:600}
.av{width:22px;height:22px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.upd{font-size:12px;color:#adadb5}
/* creator + updated, pushed to the right of the metarow */
.card-by{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#adadb5;text-align:right}
.card-by .upd{font-size:12px}
/* project-lead chip on a card */
.lead-chip{background:#f4f2ff;color:#5b5bd6;padding-left:4px}
.lead-chip .av{width:17px;height:17px;font-size:9px;margin-right:2px}
.footrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;
  padding-top:11px;border-top:1px solid var(--divider)}
.progress-wrap{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.pbar{height:6px;background:#eeeef1;border-radius:20px;overflow:hidden;max-width:200px;flex:1}
.pbar > i{display:block;height:100%;background:var(--primary);border-radius:20px;transition:width .3s}
.pbar.done > i{background:var(--done)}
.ptext{font-size:11.5px;color:var(--text3);white-space:nowrap}
.card .actions{display:flex;gap:7px;flex:0 0 auto}

/* ---------- assistant bar ---------- */
.assistant{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;
  pointer-events:none}
.assistant .inner{width:100%;max-width:720px;margin:0 16px 16px;pointer-events:auto}
.chat-panel{background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border:1px solid var(--border2);
  border-radius:16px;box-shadow:var(--shadow-panel);margin-bottom:9px;overflow:hidden;animation:fadein .18s ease}
.chat-head{display:flex;align-items:center;gap:9px;padding:11px 13px;border-bottom:1px solid var(--divider)}
.chat-badge{width:24px;height:24px;border-radius:7px;background:var(--primary-tint);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:13px}
.chat-head b{font-size:13.5px}
.pill-only{font-size:10px;font-weight:700;background:var(--done-bg);color:var(--green2);padding:2px 7px;border-radius:20px}
.chat-head .x{margin-left:auto;border:0;background:transparent;color:var(--text3);font-size:16px;padding:2px 6px}
.chat-scroll{max-height:340px;overflow-y:auto;padding:13px;display:flex;flex-direction:column;gap:9px}
.bubble{max-width:82%;padding:9px 12px;border-radius:13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap}
.bubble.user{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:5px}
.bubble.bot{align-self:flex-start;background:#f2f2f5;color:#2a2a30;border-bottom-left-radius:5px}
.bubble.typing{color:var(--text3)}
.chips-row{display:flex;gap:7px;flex-wrap:wrap;padding:0 13px 13px}
.s-chip{border:1px solid var(--border2);background:#fff;border-radius:20px;padding:6px 11px;font-size:12px;
  font-weight:600;color:var(--text2)}
.s-chip:hover{background:#f4f4f6}
.chat-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border2);
  border-radius:14px;padding:7px 8px 7px 15px;box-shadow:var(--shadow-chat)}
.chat-bar .spark{color:var(--primary);font-size:16px}
.chat-bar input{flex:1;border:0;outline:none;font-size:14px;background:transparent;color:var(--text)}
.chat-send{width:36px;height:36px;border-radius:10px;border:0;background:var(--primary);color:#fff;
  font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.chat-send:hover{background:var(--primary-h)}
.chat-send:disabled{opacity:.5}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(24,24,34,.34);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadein .15s ease}
.modal{background:#fff;border-radius:16px;box-shadow:var(--shadow-modal);padding:24px;width:100%;
  animation:pop .2s ease;max-height:92vh;overflow-y:auto}
.modal.sm{max-width:440px}.modal.md{max-width:560px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 4px;font-size:19px;font-weight:700}
.modal .msub{color:var(--text2);font-size:13px;margin:0 0 18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}

/* verification code input */
.code-input{text-align:center;font-size:28px !important;letter-spacing:10px;font-weight:700;padding:12px !important}

/* admin users list */
.user-list{display:flex;flex-direction:column;gap:8px;max-height:56vh;overflow-y:auto;margin-top:4px}
.user-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;
  border:1px solid var(--border);border-radius:12px;background:#fff}
.user-info{min-width:0}
.user-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.user-top b{font-size:14px}
.user-sub{font-size:11.5px;color:var(--text3);margin-top:3px}
.user-acts{display:flex;gap:7px;flex:0 0 auto}
.digest-preview{margin:8px 0 2px;padding:10px 12px;background:var(--surface2,#f6f6f8);border:1px solid var(--line,#ececf1);border-radius:8px;font-size:12px;line-height:1.5;color:var(--text2);white-space:pre-wrap;max-height:220px;overflow-y:auto;font-family:'JetBrains Mono',ui-monospace,monospace}
.ubadge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;background:#eeeef1;color:#6b6b74;letter-spacing:.02em}
.ubadge.warn{background:#fff2e0;color:#c07d1a}
.ubadge.danger{background:var(--danger-bg2);color:var(--danger2)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:80;background:#1c1c26;
  color:#fff;border-radius:11px;padding:10px 16px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow-panel);
  animation:slideup .2s ease}
@keyframes slideup{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- 2026-07-13: inline status, multi-assignee, detail view, credentials, onboarding ---------- */
.modal.lg{max-width:720px}
.muted{color:var(--text3)}
i.muted{font-style:italic}

/* clickable card + "assigned to me" accent */
.card[data-act="open-task"]{cursor:pointer}
.card.mine{border-color:#dcdcfa;box-shadow:0 0 0 3px rgba(91,91,214,.05)}
.card.mine.urgent{box-shadow:0 0 0 3px rgba(229,72,77,.06)}
.mine-chip{background:var(--primary-tint);color:var(--primary)}
.card .detail.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* inline status select styled as a chip */
.statuspick{flex:0 0 auto}
.status-select{border:0;border-radius:20px;font-size:11.5px;font-weight:700;padding:4px 24px 4px 10px;
  line-height:1.4;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center}
.status-select:focus{box-shadow:0 0 0 3px rgba(91,91,214,.18)}

/* one-tap status quick-switch (segmented) on each card */
.status-seg{display:inline-flex;gap:3px;background:#f4f4f6;border-radius:9px;padding:3px}
.status-seg .seg-btn{border:0;background:transparent;color:#8a8a92;font-size:11px;font-weight:700;
  padding:4px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;line-height:1.3;transition:background .12s,color .12s}
.status-seg .seg-btn:hover:not(.on){background:#eaeaee;color:#5b5b64}
.status-seg .seg-btn.on{box-shadow:0 1px 2px rgba(20,20,35,.12)}

/* read-only status pill (for users who can't change status) */
.status-ro{font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px}
/* solution block in the task detail view */
.tv-solution{background:#f2fbf5;border:1px solid #d8f0e2;border-radius:10px;padding:11px 13px;white-space:pre-wrap}

/* client-added + archived badges */
.client-chip{background:#eef6ff;color:#2563c9}
.archived-chip{background:#efeef2;color:#7a7a83}
.card.archived{opacity:.62}
.card.archived:hover{opacity:.85}
.archive-toggle.on{background:var(--primary-tint);color:var(--primary);border-color:transparent}

/* sidebar: team lead label + edit control row */
.proj-lead{display:flex;align-items:center;gap:6px;font-size:11px;color:#8a8a92;font-weight:600;padding:1px 6px 3px}
.proj-lead .av{width:16px;height:16px;font-size:9px}
.proj-ctl{display:flex;align-items:center;gap:6px;padding:0 4px}
.proj-ctl .proj-status-select{flex:1;margin:0}
.proj-ctl .proj-edit{flex:0 0 auto;padding:3px 9px}

/* overlapping assignee avatars */
.avstack{display:inline-flex;align-items:center}
.av.stack{width:22px;height:22px;box-shadow:0 0 0 2px #fff;margin-left:-6px}
.avstack .av.stack:first-child{margin-left:0}
.av.stack.more{background:#c9c9d1;color:#fff}

/* multi-assignee picker (task + credential modals) */
.assignee-picker{display:flex;flex-wrap:wrap;gap:7px}
.assignee-chip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--border2);
  background:#fff;border-radius:20px;padding:4px 11px 4px 4px;font-size:12.5px;font-weight:600;color:var(--text2)}
.assignee-chip:hover{border-color:#cfcfe4}
.assignee-chip.on{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-h)}
.assignee-chip .av{width:22px;height:22px}

/* task detail view */
.tv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tv-head h3{margin:0}
.tv-chips{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 4px}
.tv-section{margin-top:16px}
.tv-lab{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text4);margin-bottom:6px}
.tv-detail{font-size:14px;line-height:1.6;color:var(--text);white-space:pre-wrap}
.tv-people{display:flex;flex-wrap:wrap;gap:10px}
.tv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.tv-grid2{grid-template-columns:1fr}}
.tv-hist{display:flex;flex-direction:column;gap:6px}
.tv-hrow{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;padding:7px 10px;
  background:#fafafb;border:1px solid var(--divider);border-radius:9px}

/* credentials */
.cred-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.cred-head h3{margin:0 0 4px}
.cred-filter{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cred-filter .lab{font-size:12.5px;color:var(--text3);font-weight:600}
.cred-filter select{padding:8px 12px;border-radius:9px;border:1px solid var(--border2);font-size:13px;
  font-weight:600;background:#fff;color:var(--text);outline:none}
.cred-list{display:flex;flex-direction:column;gap:11px;max-height:58vh;overflow-y:auto}
.cred-card{border:1px solid var(--border);border-radius:12px;padding:13px 15px;background:#fff}
.cred-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cred-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cred-name b{font-size:14.5px}
.cred-acts{display:flex;gap:7px;flex:0 0 auto}
.cred-fields{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.cred-f{display:flex;align-items:center;gap:9px;font-size:13px}
.cred-f .k{flex:0 0 78px;color:var(--text3);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.cred-f .v{color:var(--text);word-break:break-all}
.cred-f a.v{color:var(--primary);text-decoration:none}
.cred-f a.v:hover{text-decoration:underline}
.cred-f .copy{border:1px solid var(--border2);background:#fafafb;border-radius:7px;padding:2px 8px;
  font-size:11px;font-weight:600;color:var(--text2);margin-left:auto;flex:0 0 auto}
.cred-f .copy:hover{background:#f0f0f4}
.cred-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--divider);flex-wrap:wrap}
.cred-assignees{display:flex;gap:10px;flex-wrap:wrap}

/* client onboarding */
.onboard{min-height:100vh;display:flex;flex-direction:column;background:var(--bg)}
.ob-top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;
  background:#fff;border-bottom:1px solid var(--border)}
.ob-top .brand{display:flex;align-items:center;gap:11px}
.ob-top .brand b{font-size:18px;font-weight:700}
.ob-top .right{display:flex;align-items:center;gap:8px}
.ob-card{width:100%;max-width:560px;margin:6vh auto 40px;background:#fff;border:1px solid var(--border);
  border-radius:18px;box-shadow:var(--shadow-card);padding:30px 28px}
.ob-badge{width:52px;height:52px;border-radius:15px;background:linear-gradient(120deg,#f0f0fb,#ecf7f0);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:14px}
.ob-card h1{font-size:25px;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.ob-sub{color:var(--text2);font-size:14px;margin:0 0 20px;line-height:1.55}
.ob-chat{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.ob-matches{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.ob-match{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;
  border:1.5px solid var(--border2);background:#fff;border-radius:12px;padding:12px 14px}
.ob-match:hover{border-color:var(--primary);background:var(--primary-tint)}
.ob-match b{font-size:14.5px}
.ob-match span{font-size:12.5px;color:var(--primary);font-weight:600}
.ob-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border2);
  border-radius:14px;padding:7px 8px 7px 15px;box-shadow:var(--shadow-chat)}
.ob-bar input{flex:1;border:0;outline:none;font-size:15px;background:transparent;color:var(--text)}

/* attachments (documents / videos / links) */
.att-wrap{display:flex;flex-direction:column;gap:8px}
.att-list{display:flex;flex-direction:column;gap:6px}
.att-empty{font-size:12.5px;padding:2px 0}
.att-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);
  border-radius:9px;background:#fafafb}
.att-link{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-decoration:none;color:var(--text)}
.att-link:hover .att-name{text-decoration:underline;color:var(--primary)}
.att-ic{flex:0 0 auto;font-size:15px}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.att-dl{flex:0 0 auto;text-decoration:none;color:var(--text2);font-size:14px;padding:2px 6px;border-radius:6px}
.att-dl:hover{background:#eeeef1}
.att-x{flex:0 0 auto;border:0;background:transparent;color:var(--text3);font-size:13px;padding:2px 7px;border-radius:6px}
.att-x:hover{background:var(--danger-bg2);color:var(--danger)}
.att-add{display:flex;gap:7px;flex-wrap:wrap}
.cred-att{margin-top:11px;padding-top:10px;border-top:1px solid var(--divider)}
.cred-att .tv-lab{margin-bottom:7px}

/* sidebar project row + inline status switcher */
.proj-row-wrap{border-radius:10px;padding:2px 2px 4px;margin-bottom:2px}
.proj-row-wrap.on{background:var(--primary-tint)}
.proj-row-wrap.on .pname{color:var(--primary-h);font-weight:700}
.proj-row-wrap.on .cnt{background:#e2e2fa;color:var(--primary)}
.proj-status-select{width:100%;margin:0 4px;border:0;border-radius:7px;font-size:11px;font-weight:700;
  padding:4px 22px 4px 9px;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;width:calc(100% - 8px);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 3.5L5 6.5L8 3.5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 7px center}
.proj-status-select:focus{box-shadow:0 0 0 3px rgba(91,91,214,.15)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  /* visibility swap */
  .only-desktop{display:none !important}
  .only-mobile{display:flex}
  .auth-mobilebrand{display:flex}

  /* auth */
  .auth{grid-template-columns:1fr}
  .auth-brand{display:none}
  .auth-form{padding:22px 18px;align-items:flex-start}
  .auth-card{margin-top:6vh}

  /* shell */
  .header{padding:11px 14px;gap:10px}
  .header .brand b{font-size:16px}
  .header .right{gap:8px}
  .board{grid-template-columns:1fr;padding:10px 14px 170px}
  .sidebar{display:none}
  .client-banner{margin:8px 14px 0}

  /* control + filter bars: labels on their own line, controls flow full-width */
  .controlbar,.filterbar{padding-left:14px;padding-right:14px;gap:10px}
  .controlbar .weeknav{flex:1 1 auto}
  .controlbar .weeknav .wk{flex:1}
  .seg-wrap{flex:1 1 auto;justify-content:space-between}
  .filterbar .lab,.controlbar > .lab{flex-basis:100%;margin-bottom:-2px}
  .filterbar select{flex:1 1 42%;min-width:0}
  .filterbar .btn{flex:1 1 100%}

  /* task cards */
  .card{padding:14px 15px}
  .card .toprow{gap:10px}
  .footrow{flex-wrap:wrap}
  .card .actions{flex:1 1 100%;justify-content:flex-end}
  .pbar{max-width:none}

  /* modals: single column, snug padding */
  .overlay{padding:12px;align-items:flex-end}
  .modal{padding:20px;border-radius:16px 16px 0 0;max-height:88vh}
  .modal.sm,.modal.md,.modal.lg{max-width:none}
  .grid2{grid-template-columns:1fr}
  .cred-head{flex-wrap:wrap}
  .cred-head .btn{flex:1 1 100%;justify-content:center;display:flex}
  .cred-f{flex-wrap:wrap}
  .cred-f .k{flex-basis:100%}
  .cred-f .copy{margin-left:0}
  .ob-top{padding:12px 14px}
  .ob-card{margin:3vh 12px 30px;padding:24px 18px;border-radius:16px}
  .ob-bar input{font-size:16px}
  .status-select{font-size:12.5px}
  .modal-foot{position:sticky;bottom:-20px;background:#fff;padding-top:12px}
  .modal-foot .btn{flex:1;justify-content:center;display:flex}

  /* admin users list */
  .user-row{flex-wrap:wrap}
  .user-acts{flex:1 1 100%;justify-content:flex-end}
  .user-list{max-height:64vh}

  /* assistant */
  .assistant .inner{margin:0 10px 10px}
  .chat-scroll{max-height:min(340px,46vh)}
  .chat-bar{padding:6px 6px 6px 13px}
  .chat-bar input{font-size:16px}   /* 16px avoids iOS zoom-on-focus */

  /* bigger tap targets */
  .btn-sm{padding:9px 12px}
  .field input,.field select,.field textarea{font-size:16px}
  .filterbar select{padding:10px 12px}
}

@media(max-width:420px){
  .header .brand b{display:none}          /* logo only on very small screens */
  .filterbar select{flex-basis:100%}
  .weeknav .wk{min-width:0}
}