:root{
  --nav:#0c2b4a;--nav-2:#102f50;--primary:#0c66e4;--primary-hover:#0055cc;
  --text:#172b4d;--muted:#626f86;--border:#dcdfe4;--surface:#fff;--surface-2:#f7f8fa;
  --bg:#f4f6f9;--shadow:0 8px 28px rgba(9,30,66,.12);--shadow-soft:0 2px 10px rgba(9,30,66,.08);
  --radius:12px;--topbar:48px;
}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:14px}.min-w-0{min-width:0}.ui-icon{display:inline-block;vertical-align:-.17em;flex:0 0 auto}.btn{font-weight:600;border-radius:8px}.btn-primary{background:var(--primary);border-color:var(--primary)}.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.form-control,.form-select{border-color:#b6c2cf;border-radius:8px;min-height:40px}.form-control:focus,.form-select:focus{border-color:#579dff;box-shadow:0 0 0 3px rgba(12,102,228,.16)}a{color:var(--primary)}

/* top bar */
.app-topbar{height:var(--topbar);position:sticky;top:0;z-index:1040;background:rgba(12,43,74,.97);backdrop-filter:blur(10px);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08)}.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#579dff,#0c66e4);display:grid;place-items:center;color:#fff;text-decoration:none;font-weight:800;font-size:17px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.brand-name{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap}.brand-name:hover{color:#fff}.topbar-link,.top-icon-btn{height:32px;border:0;border-radius:7px;color:#fff;background:rgba(255,255,255,.10);display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;padding:0 10px;transition:.15s}.topbar-link:hover,.top-icon-btn:hover{background:rgba(255,255,255,.18);color:#fff}.top-icon-btn{width:34px;padding:0}.topbar-center{position:absolute;left:50%;transform:translateX(-50%);width:min(420px,35vw)}.top-search{display:flex;align-items:center;gap:7px;width:100%;height:32px;padding:0 10px;border-radius:7px;background:rgba(255,255,255,.13);color:#fff}.top-search:focus-within{background:#fff;color:var(--muted)}.top-search input{border:0;outline:0;background:transparent;color:inherit;width:100%;font-size:13px}.top-search input::placeholder{color:rgba(255,255,255,.75)}.top-search:focus-within input::placeholder{color:#8993a4}.notification-dot{position:absolute;right:-4px;top:-5px;background:#e34935;color:#fff;border:2px solid var(--nav);border-radius:999px;min-width:18px;height:18px;padding:0 3px;display:grid;place-items:center;font-size:10px;font-weight:700}.avatar-button{width:32px;height:32px;border:2px solid rgba(255,255,255,.6);border-radius:50%;background:#dfe1e6;color:#172b4d;font-weight:800;font-size:12px}.notification-menu{width:min(390px,calc(100vw - 20px));border:0;border-radius:12px;overflow:hidden}.dropdown-panel-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #ebecf0}.dropdown-panel-head span{font-size:12px;background:#e9f2ff;color:#0055cc;padding:3px 8px;border-radius:999px}.notification-scroll{max-height:420px;overflow:auto}.notification-entry{display:flex;gap:10px;padding:12px 14px;color:var(--text);text-decoration:none;border-bottom:1px solid #f0f1f3}.notification-entry:hover{background:#f7f8fa}.notification-entry.unread{background:#e9f2ff}.notification-entry b{display:block;font-weight:600;font-size:13px;line-height:1.35}.notification-entry small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.notification-symbol{width:28px;height:28px;border-radius:50%;background:#dbeafe;color:#0c66e4;display:grid;place-items:center;flex:0 0 auto}.dropdown-empty{padding:28px;text-align:center;color:var(--muted)}.account-menu{width:290px;border:0;border-radius:12px;padding:8px}.account-summary{display:flex;gap:12px;align-items:center;padding:10px}.avatar-large,.avatar-xl{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#c7d2fe);color:#172b4d;font-weight:800}.avatar-large{width:44px;height:44px}.account-summary strong,.account-summary small,.account-summary span{display:block}.account-summary small{font-size:12px;color:var(--muted)}.account-summary span{font-size:11px;color:#0c66e4;margin-top:2px}.account-menu .dropdown-item{border-radius:7px;display:flex;gap:9px;align-items:center;padding:9px 10px}.account-menu form{margin:0}

.flash-stack{position:fixed;top:58px;right:16px;z-index:1085;width:min(420px,calc(100vw - 32px))}.flash-stack.on-board{top:58px}.flash-stack .alert{border:0;border-radius:10px}.recovery-reminder{position:fixed;z-index:1035;bottom:18px;right:18px;display:flex;align-items:center;gap:12px;background:#fff8c5;border:1px solid #f5cd47;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow)}.recovery-reminder strong,.recovery-reminder small{display:block}.recovery-reminder small{color:#6b5c00}

/* auth */
.auth-page{background:#e9f2ff}.auth-shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 20px;background:radial-gradient(circle at 15% 15%,rgba(87,157,255,.38),transparent 28%),radial-gradient(circle at 85% 78%,rgba(110,93,198,.22),transparent 27%),linear-gradient(135deg,#f7f9fc,#e9f2ff)}.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}.auth-logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,#579dff,#0c66e4);color:#fff;font-size:24px;font-weight:800;box-shadow:0 10px 24px rgba(12,102,228,.28)}.auth-brand strong,.auth-brand span{display:block}.auth-brand strong{font-size:18px}.auth-brand span{font-size:12px;color:var(--muted)}.auth-card{width:min(100%,450px);background:#fff;border:1px solid rgba(9,30,66,.08);border-radius:18px;box-shadow:0 24px 60px rgba(9,30,66,.16);padding:30px}.auth-card-head{text-align:center;margin-bottom:24px}.auth-card-head h1{font-size:24px;font-weight:750;margin:8px 0}.auth-card-head p{color:var(--muted);margin:0;line-height:1.5}.auth-round-icon{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#e9f2ff;color:#0c66e4}.auth-form{display:flex;flex-direction:column;gap:8px}.auth-form label{font-weight:650;margin-top:5px}.auth-form small{color:var(--muted)}.input-with-icon{display:flex;align-items:center;border:1px solid #b6c2cf;border-radius:8px;padding:0 11px;color:#758195;background:#fff}.input-with-icon:focus-within{border-color:#579dff;box-shadow:0 0 0 3px rgba(12,102,228,.16)}.input-with-icon input{border:0;outline:0;width:100%;height:42px;padding:0 9px;background:transparent}.auth-mini-link{font-size:12px;text-decoration:none}.auth-footer-links{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;border-top:1px solid #ebecf0;margin-top:24px;padding-top:18px;font-size:13px}.auth-footer-links a{text-decoration:none;font-weight:650}.auth-separator{display:flex;align-items:center;gap:12px;color:#8993a4;margin:20px 0}.auth-separator:before,.auth-separator:after{content:"";height:1px;background:#ebecf0;flex:1}.auth-security-note{font-size:12px;color:#52627a;margin-top:18px;display:flex;align-items:center;gap:6px}.otp-input{text-align:center;font-size:24px;letter-spacing:8px;font-weight:750}.auth-form.compact{gap:5px}

/* workspace */
.workspace-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - var(--topbar))}.workspace-sidebar{background:#fff;border-right:1px solid #dfe1e6;padding:22px 14px;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));display:flex;flex-direction:column}.sidebar-section-title{font-size:11px;font-weight:750;letter-spacing:.08em;color:#8993a4;padding:0 10px;margin-bottom:7px;text-transform:uppercase}.sidebar-link{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#44546f;text-decoration:none;margin-bottom:3px}.sidebar-link:hover{background:#f1f2f4;color:#172b4d}.sidebar-link.active{background:#e9f2ff;color:#0c66e4;font-weight:650}.sidebar-link b{margin-left:auto;font-size:11px;background:#f1f2f4;color:#626f86;border-radius:999px;padding:2px 7px}.sidebar-help{margin-top:auto;background:linear-gradient(135deg,#f1f5ff,#eef2ff);border:1px solid #dfe7ff;border-radius:12px;padding:14px}.sidebar-help>div{color:#6e5dc6;margin-bottom:8px}.sidebar-help strong,.sidebar-help span{display:block}.sidebar-help span{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}.workspace-main{padding:30px 34px 50px;min-width:0;max-width:1600px;width:100%;margin:0 auto}.workspace-header,.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.workspace-header{margin-bottom:24px}.eyebrow{font-size:11px;color:#0c66e4;font-weight:800;letter-spacing:.12em;margin:0 0 4px}.workspace-header h1,.settings-header h1{font-size:28px;margin:0 0 4px;font-weight:750}.workspace-header span,.settings-header span,.section-heading p{color:var(--muted)}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:28px}.metric-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-soft)}.metric-icon{width:42px;height:42px;border-radius:11px;display:grid;place-items:center}.metric-icon.blue{background:#e9f2ff;color:#0c66e4}.metric-icon.purple{background:#f3f0ff;color:#6e5dc6}.metric-icon.red{background:#ffebe6;color:#c9372c}.metric-icon.green{background:#dcfff1;color:#1f845a}.metric-card span,.metric-card strong{display:block}.metric-card span{font-size:12px;color:var(--muted)}.metric-card strong{font-size:24px;line-height:1.1;margin-top:2px}.workspace-section{margin-top:28px}.section-heading{margin-bottom:14px}.section-heading h2{font-size:19px;margin:0 0 3px}.section-heading p{font-size:13px;margin:0}.section-search,.filter-search{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #dfe1e6;border-radius:8px;padding:0 10px;color:#758195}.section-search input,.filter-search input{border:0;outline:0;background:transparent;height:36px;min-width:180px}.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:15px}.board-tile{min-height:165px;border-radius:13px;color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 8px 20px rgba(9,30,66,.16);transition:.18s}.board-tile:hover{transform:translateY(-3px);color:#fff;box-shadow:0 14px 30px rgba(9,30,66,.22)}.board-tile-overlay{height:100%;min-height:165px;padding:15px;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.30))}.board-tile-top,.board-tile-meta{display:flex;align-items:center;justify-content:space-between}.board-role{font-size:10px;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.18);padding:3px 7px;border-radius:999px}.board-tile-body{margin:auto 0}.board-tile-body h3{font-size:18px;margin:0 0 4px;font-weight:750}.board-tile-body p{font-size:12px;margin:0;color:rgba(255,255,255,.82)}.board-tile-meta{justify-content:flex-start;gap:12px;font-size:11px;color:rgba(255,255,255,.9)}.board-tile-meta span{display:flex;align-items:center;gap:4px}.empty-state{background:#fff;border:2px dashed #c7d1df;border-radius:14px;text-align:center;padding:45px}.empty-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#e9f2ff;color:#0c66e4;margin:0 auto 12px}.empty-state h3{font-size:18px}.empty-state p{color:var(--muted)}.workspace-two-column{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:20px}.panel-section{background:#fff;border:1px solid #e5e7eb;border-radius:13px;padding:18px;box-shadow:var(--shadow-soft)}.dashboard-task{display:flex;align-items:center;gap:11px;padding:11px 5px;border-bottom:1px solid #f0f1f3;text-decoration:none;color:var(--text)}.dashboard-task:last-child{border-bottom:0}.dashboard-task:hover{background:#f8f9fa}.dashboard-task.done{opacity:.62}.task-status-dot{width:10px;height:10px;border:2px solid #8590a2;border-radius:50%;flex:0 0 auto}.task-status-dot.overdue{border-color:#c9372c;background:#ffebe6}.task-status-dot.soon{border-color:#b38600;background:#fff7d6}.task-status-dot.complete{border-color:#1f845a;background:#1f845a}.task-main{flex:1;min-width:0}.task-main b,.task-main small{display:block}.task-main b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-main small{color:var(--muted);font-size:11px}.task-due{font-size:11px;color:var(--muted);white-space:nowrap}.task-due.overdue{color:#c9372c;font-weight:650}.activity-feed{display:flex;flex-direction:column}.feed-entry{display:flex;gap:10px;padding:10px 4px;border-bottom:1px solid #f0f1f3;color:var(--text);text-decoration:none}.feed-entry.unread{background:#f4f8ff}.feed-entry b,.feed-entry small{display:block}.feed-entry b{font-size:12px;line-height:1.35}.feed-entry small{font-size:11px;color:var(--muted)}.feed-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f1f2f4;color:#44546f}.mini-empty{text-align:center;color:var(--muted);font-size:13px;padding:18px}

/* board */
.board-page{overflow:hidden}.board-shell{height:calc(100vh - var(--topbar));display:flex;flex-direction:column;background-size:cover;background-position:center}.board-toolbar{min-height:58px;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(9,30,66,.28);backdrop-filter:blur(5px);color:#fff}.board-toolbar-left,.board-toolbar-actions{display:flex;align-items:center;gap:9px}.board-back{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14)}.board-back:hover{background:rgba(255,255,255,.22);color:#fff}.board-title-wrap{min-width:0}.board-title-wrap h1{font-size:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}.board-title-wrap span{display:block;font-size:11px;color:rgba(255,255,255,.78);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}.board-visibility{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.12);border-radius:7px;padding:5px 8px;font-size:11px}.toolbar-button{height:34px;border:0;border-radius:8px;background:rgba(255,255,255,.15);color:#fff;display:inline-flex;align-items:center;gap:6px;padding:0 10px}.toolbar-button:hover{background:rgba(255,255,255,.24)}.board-member-stack{display:flex;padding-left:7px}.member-avatar{width:30px;height:30px;border-radius:50%;background:#dfe1e6;color:#172b4d;border:2px solid #fff;display:grid;place-items:center;font-size:10px;font-weight:800;margin-left:-7px;flex:0 0 auto}.member-avatar.more{background:#44546f;color:#fff}.member-avatar.small{width:26px;height:26px;font-size:9px}.member-avatar.medium{width:36px;height:36px;font-size:11px;margin:0}.board-canvas{display:flex;align-items:flex-start;gap:12px;overflow-x:auto;overflow-y:hidden;padding:13px 14px 28px;flex:1}.board-canvas::-webkit-scrollbar{height:12px}.board-canvas::-webkit-scrollbar-thumb{background:rgba(255,255,255,.35);border:3px solid transparent;background-clip:content-box;border-radius:99px}.board-list{width:286px;min-width:286px;max-height:calc(100vh - 132px);background:#f1f2f4;border-radius:12px;display:flex;flex-direction:column;padding:8px;box-shadow:0 5px 18px rgba(9,30,66,.18)}.board-list-header{display:flex;justify-content:space-between;align-items:center;padding:4px 5px 8px;cursor:grab}.list-title{font-weight:700;display:flex;align-items:center;gap:7px;min-width:0}.list-title span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.list-title b{font-size:10px;color:#626f86;background:#dcdfe4;border-radius:999px;padding:2px 6px}.list-more,.table-action,.icon-danger{border:0;background:transparent;border-radius:6px;color:#626f86;display:grid;place-items:center}.list-more{width:30px;height:30px}.list-more:hover,.table-action:hover{background:#dcdfe4;color:#172b4d}.list-menu{width:250px;border:0;border-radius:10px}.card-sortable{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:5px;padding:1px 2px 5px}.card-sortable::-webkit-scrollbar{width:7px}.card-sortable::-webkit-scrollbar-thumb{background:#c7cbd1;border-radius:99px}.task-card{background:#fff;border-radius:9px;box-shadow:0 1px 1px rgba(9,30,66,.18),0 0 1px rgba(9,30,66,.25);transition:.15s;overflow:hidden}.task-card:hover{box-shadow:0 4px 12px rgba(9,30,66,.22);transform:translateY(-1px)}.task-card.completed{opacity:.68}.task-card.completed .task-title{text-decoration:line-through}.task-card-link{display:block;padding:10px 11px;color:var(--text);text-decoration:none}.card-labels{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px}.card-labels span{color:#fff;font-size:9px;line-height:18px;min-width:42px;max-width:120px;padding:0 7px;border-radius:4px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-title{font-size:13px;line-height:1.4}.task-description-preview{font-size:11px;color:#626f86;margin-top:5px;line-height:1.35}.task-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-top:8px}.task-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#626f86;font-size:10px}.task-meta span{display:inline-flex;align-items:center;gap:3px}.due-badge{background:#f1f2f4;border-radius:4px;padding:3px 5px}.due-badge.overdue{background:#ffebe6;color:#ae2e24}.due-badge.soon{background:#fff7d6;color:#7f5f01}.meta-done{background:#dcfff1;color:#216e4e;padding:3px 5px;border-radius:4px}.task-members{display:flex}.task-members span{width:26px;height:26px;border-radius:50%;background:#dfe1e6;border:2px solid #fff;display:grid;place-items:center;font-size:9px;font-weight:800;margin-left:-6px}.quick-card-form{margin-top:4px}.quick-card-open,.add-list-button{border:0;background:transparent;color:#44546f;border-radius:7px;width:100%;padding:7px 8px;text-align:left;display:flex;align-items:center;gap:6px}.quick-card-open:hover{background:#dcdfe4}.quick-card-expanded,.add-list-form{display:none}.quick-card-form.open .quick-card-collapsed{display:none}.quick-card-form.open .quick-card-expanded{display:block}.quick-card-expanded textarea{font-size:13px;resize:none;box-shadow:0 1px 2px rgba(9,30,66,.2)}.quick-card-expanded>div,.add-list-form>div{display:flex;align-items:center;margin-top:7px}.add-list{background:rgba(255,255,255,.25);box-shadow:none;max-height:none;padding:6px}.add-list-button{color:#fff;padding:9px}.add-list:hover{background:rgba(255,255,255,.34)}.add-list.open{background:#f1f2f4}.add-list.open .add-list-button{display:none}.add-list.open .add-list-form{display:block;padding:2px}.sortable-ghost,.is-dragging{opacity:.45}.sortable-drag{transform:rotate(2deg)}.board-menu-offcanvas{width:min(430px,95vw)}.board-menu-offcanvas .offcanvas-header{border-bottom:1px solid #ebecf0}.board-menu-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #ebecf0;padding:0 12px}.board-menu-tabs button{border:0;background:transparent;padding:12px 5px;color:#626f86;font-weight:650;border-bottom:2px solid transparent}.board-menu-tabs button.active{color:#0c66e4;border-color:#0c66e4}.board-menu-pane{display:none}.board-menu-pane.active{display:block}.menu-section{padding:18px;border-bottom:1px solid #ebecf0}.menu-section h6{font-weight:750}.menu-section>p{color:#626f86;line-height:1.5}.stack-form,.settings-form{display:flex;flex-direction:column;gap:9px}.stack-form label,.settings-form label{font-weight:650;font-size:12px}.gradient-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.gradient-swatch{height:35px;border:2px solid transparent;border-radius:7px}.gradient-swatch.active{border-color:#172b4d;box-shadow:0 0 0 2px #fff inset}.label-manager{display:flex;flex-direction:column;gap:6px}.managed-label{display:flex;align-items:center;gap:7px}.managed-label>span{flex:1;color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;font-weight:650}.managed-label button{border:0;background:transparent}.danger-zone{background:#fff7f5}.board-member-list{display:flex;flex-direction:column}.board-member-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f0f1f3}.board-member-row .member-avatar{margin:0}.board-member-row>div{flex:1;min-width:0}.board-member-row strong,.board-member-row small{display:block}.board-member-row small{font-size:11px;color:#626f86;overflow:hidden;text-overflow:ellipsis}.icon-danger{color:#c9372c;width:28px;height:28px}.icon-danger:hover{background:#ffebe6}.activity-list{display:flex;flex-direction:column;gap:12px}.activity-item{display:flex;gap:10px}.activity-item .member-avatar{margin:0}.activity-item>div{font-size:12px;line-height:1.4}.activity-item em,.activity-item small{display:block}.activity-item em{font-style:normal;color:#44546f}.activity-item small{color:#8993a4;margin-top:2px}

/* card details */
.card-page-bg{min-height:calc(100vh - var(--topbar));background:#f4f6f9;padding:24px}.card-detail-page{max-width:1280px;margin:0 auto}.card-breadcrumb{display:flex;align-items:center;gap:8px;color:#626f86;margin-bottom:14px}.card-breadcrumb a{display:flex;align-items:center;gap:5px;text-decoration:none;font-weight:650}.card-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px}.card-detail-main,.card-detail-side{display:flex;flex-direction:column;gap:16px}.detail-panel{background:#fff;border:1px solid #e1e4e8;border-radius:13px;box-shadow:var(--shadow-soft);padding:20px}.card-editor-panel{padding:0;overflow:hidden}.card-editor-head{display:flex;align-items:flex-start;gap:12px;padding:20px;border-bottom:1px solid #ebecf0}.card-title-icon{width:38px;height:38px;border-radius:9px;background:#e9f2ff;color:#0c66e4;display:grid;place-items:center}.field-eyebrow{font-size:10px;color:#8993a4;font-weight:750;letter-spacing:.08em}.card-title-input{display:block;width:100%;border:0;background:transparent;font-size:21px;font-weight:750;outline:0;padding:2px 0}.card-title-input:focus{box-shadow:0 2px 0 #0c66e4}.complete-toggle input{position:absolute;opacity:0}.complete-toggle span{display:flex;align-items:center;gap:5px;border:1px solid #b6c2cf;border-radius:8px;padding:7px 10px;cursor:pointer;font-weight:650;font-size:12px}.complete-toggle input:checked+span{background:#dcfff1;border-color:#1f845a;color:#1f845a}.card-editor-body{padding:20px}.detail-label{display:block;font-weight:700;font-size:12px;margin-bottom:6px}.description-editor{width:100%;border:1px solid transparent;border-radius:8px;background:#f7f8fa;padding:12px;resize:vertical;outline:0}.description-editor:focus{background:#fff;border-color:#579dff;box-shadow:0 0 0 3px rgba(12,102,228,.14)}.detail-field-grid,.form-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:15px}.form-grid-two .full{grid-column:1/-1}.panel-heading,.card-heading{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:15px}.panel-heading h2,.card-heading h2{display:flex;align-items:center;gap:7px;font-size:16px;margin:0 0 3px;font-weight:750}.panel-heading p,.card-heading p{font-size:12px;color:#626f86;margin:0}.checklist-block{border-top:1px solid #ebecf0;padding:16px 0}.checklist-block:first-of-type{border-top:0}.checklist-title-row{display:flex;justify-content:space-between}.checklist-title-row h3{font-size:14px;font-weight:750}.check-progress{display:flex;align-items:center;gap:8px;font-size:10px;color:#626f86;margin-bottom:10px}.check-progress>div{height:7px;background:#dfe1e6;border-radius:99px;flex:1;overflow:hidden}.check-progress i{display:block;height:100%;background:#1f845a}.check-items{display:flex;flex-direction:column}.check-item{display:flex;align-items:center;gap:8px;min-height:34px;padding:3px 0}.check-item form{margin:0}.check-box{width:22px;height:22px;border:1px solid #8590a2;background:#fff;border-radius:5px;display:grid;place-items:center;color:#fff}.check-box.checked{background:#0c66e4;border-color:#0c66e4}.check-item span.done{text-decoration:line-through;color:#8993a4}.inline-add-form{display:flex;align-items:center;gap:7px;margin-top:8px}.inline-add-form input{flex:1;border:0;background:#f1f2f4;border-radius:7px;padding:8px 10px;outline:0}.inline-add-form button{border:0;background:transparent;color:#0c66e4;font-weight:650;display:flex;align-items:center;gap:3px}.comment-compose{display:flex;gap:10px;margin-bottom:18px}.comment-compose .member-avatar{margin:0}.comment-compose>div{flex:1}.comment-compose textarea{width:100%;border:1px solid #b6c2cf;border-radius:8px;padding:10px;resize:vertical;margin-bottom:7px}.comments-list{display:flex;flex-direction:column}.comment{display:flex;gap:10px;margin:0 0 16px}.comment>.member-avatar{margin:0}.comment-body{flex:1}.comment-head{display:flex;align-items:center;gap:8px}.comment-head small{color:#8993a4}.comment-bubble{display:inline-block;background:#f1f2f4;border-radius:3px 10px 10px 10px;padding:9px 11px;margin-top:5px;line-height:1.5}.comment-delete{border:0;background:transparent;color:#c9372c;font-size:11px;padding:4px 0}.side-panel{padding:16px}.side-panel h3{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:750}.toggle-list form{margin:0}.toggle-list button{width:100%;border:0;background:transparent;border-radius:7px;padding:6px;display:flex;align-items:center;gap:8px;text-align:left}.toggle-list button:hover{background:#f1f2f4}.toggle-list .member-avatar{margin:0}.toggle-list button i{margin-left:auto;color:#1f845a;font-style:normal}.label-pill{display:inline-block;color:#fff;border-radius:5px;padding:5px 9px;font-size:11px;font-weight:700;min-width:110px}.upload-form{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}.upload-form small{color:#8993a4}.attachment-list{display:flex;flex-direction:column}.attachment-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f0f1f3}.attachment-icon{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#f1f2f4}.attachment-row>div{flex:1;min-width:0}.attachment-row a,.attachment-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-row small{font-size:10px;color:#8993a4}.compact-activity>div{display:flex;gap:8px;margin-bottom:10px}.compact-activity>div>span{width:7px;height:7px;border-radius:50%;background:#579dff;margin-top:5px}.compact-activity p{margin:0;font-size:11px;line-height:1.35}.compact-activity small{display:block;color:#8993a4}

/* settings & admin */
.settings-shell{display:grid;grid-template-columns:230px minmax(0,1fr);min-height:calc(100vh - var(--topbar))}.settings-nav{background:#fff;border-right:1px solid #dfe1e6;padding:22px 14px;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar))}.settings-nav h2{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#8993a4;padding:0 10px;margin:4px 0 8px}.settings-nav h2:not(:first-child){margin-top:26px}.settings-nav a{display:flex;align-items:center;gap:9px;text-decoration:none;color:#44546f;padding:9px 10px;border-radius:8px;margin-bottom:3px}.settings-nav a:hover{background:#f1f2f4}.settings-nav a.active{background:#e9f2ff;color:#0c66e4;font-weight:650}.settings-main{padding:30px 34px 50px;min-width:0;max-width:1500px;width:100%;margin:0 auto}.settings-header{margin-bottom:22px}.settings-card{background:#fff;border:1px solid #e1e4e8;border-radius:13px;box-shadow:var(--shadow-soft);padding:20px;margin-bottom:18px}.settings-card .settings-form.narrow{max-width:580px}.profile-hero{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid #ebecf0;margin-bottom:20px}.avatar-xl{width:72px;height:72px;font-size:22px}.profile-hero h2,.profile-hero p{margin:0}.profile-hero p{color:#626f86;margin:3px 0 6px}.role-badge{display:inline-block;font-size:10px;font-weight:750;border-radius:999px;background:#e9f2ff;color:#0c66e4;padding:4px 8px}.role-badge.role-super_admin{background:#f3f0ff;color:#5e4db2}.role-badge.role-admin{background:#e9f2ff;color:#0c66e4}.role-badge.role-user{background:#f1f2f4;color:#44546f}.settings-form small{color:#8993a4;font-size:11px}.settings-form .btn{align-self:flex-start;margin-top:4px}.settings-grid-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.status-pill{font-size:10px;font-weight:750;padding:4px 8px;border-radius:999px;white-space:nowrap}.status-pill.success{background:#dcfff1;color:#216e4e}.status-pill.warning{background:#fff7d6;color:#7f5f01}.status-pill.danger{background:#ffebe6;color:#ae2e24}.status-pill.neutral{background:#f1f2f4;color:#44546f}.info-box,.policy-note{display:flex;gap:8px;background:#e9f2ff;color:#0c66e4;border-radius:8px;padding:10px 12px;font-size:12px;margin-bottom:13px}.security-summary{color:#44546f}.recovery-card{border-color:#f5cd47;background:#fffdf2}.recovery-code-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.recovery-code-grid code{display:block;background:#fff;border:1px dashed #b38600;color:#172b4d;border-radius:7px;padding:8px;text-align:center;font-weight:750}.device-list{display:flex;flex-direction:column}.device-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f1f3}.device-row:last-child{border-bottom:0}.device-symbol{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:#f1f2f4;color:#44546f}.device-row>div:nth-child(2){flex:1}.device-row strong,.device-row span,.device-row small{display:block}.device-row span,.device-row small{font-size:11px;color:#626f86}.security-log-list{display:flex;flex-direction:column}.security-log-list>div{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f0f1f3}.log-dot{width:8px;height:8px;border-radius:50%;background:#579dff;margin-top:6px}.security-log-list p{margin:0;flex:1}.security-log-list em,.security-log-list small{display:block}.security-log-list em{font-style:normal;color:#44546f;font-size:12px}.security-log-list small{font-size:10px;color:#8993a4}.admin-page-head{display:flex;justify-content:space-between;align-items:center}.admin-metrics{margin-bottom:18px}.warning-banner{display:flex;align-items:center;gap:12px;background:#fff7d6;border:1px solid #f5cd47;border-radius:11px;padding:12px 15px;margin-bottom:18px}.warning-banner>div{flex:1}.warning-banner strong,.warning-banner span{display:block}.warning-banner span{font-size:12px;color:#6b5c00}.admin-table-card{padding:0;overflow:hidden}.admin-filter-bar{display:flex;gap:8px;padding:14px;border-bottom:1px solid #e5e7eb}.admin-filter-bar .filter-search{flex:1}.admin-filter-bar select{border:1px solid #d0d5dd;border-radius:8px;padding:0 10px;background:#fff;min-width:145px}.admin-user-table th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#626f86;background:#f7f8fa;padding:10px 14px;white-space:nowrap}.admin-user-table td{padding:11px 14px;border-color:#f0f1f3}.user-cell{display:flex;align-items:center;gap:10px;min-width:220px}.user-cell strong,.user-cell small{display:block}.user-cell small{font-size:11px;color:#626f86}.security-cell span,.security-cell small{display:block;white-space:nowrap}.security-cell span{font-size:11px}.security-cell small{font-size:10px;color:#8993a4}.workspace-counts{display:flex;gap:9px}.workspace-counts span{display:flex;align-items:center;gap:3px;color:#626f86}.table-action{width:30px;height:30px}.row-muted{opacity:.55}.pagination-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-top:1px solid #ebecf0;color:#626f86}.pagination-bar a{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:6px;text-decoration:none}.pagination-bar a.active{background:#0c66e4;color:#fff}.app-modal{border:0;border-radius:14px;overflow:hidden}.app-modal .modal-header{padding:18px 20px}.app-modal .modal-header h5{margin:0}.app-modal .modal-header small{color:#626f86}.app-modal .modal-body{padding:20px}.app-modal .modal-footer{padding:14px 20px}.smtp-test-form{display:flex;gap:8px;border-top:1px solid #ebecf0;margin-top:18px;padding-top:15px}.smtp-test-form input{flex:1}.tested-at{display:block;color:#1f845a;margin-top:8px}.policy-switch{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #e1e4e8;border-radius:9px;padding:11px 12px}.policy-switch strong,.policy-switch span{display:block}.policy-switch span{font-size:11px;color:#626f86}.switch input{position:absolute;opacity:0}.switch i{display:block;width:42px;height:24px;border-radius:999px;background:#b6c2cf;position:relative;cursor:pointer}.switch i:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}.switch input:checked+i{background:#0c66e4}.switch input:checked+i:after{left:21px}.security-audit-table th{font-size:10px;text-transform:uppercase;color:#626f86;background:#f7f8fa}.security-audit-table td{font-size:11px;white-space:nowrap}.security-audit-table td:last-child{white-space:normal;min-width:220px}

/* error */
.error-shell{min-height:calc(100vh - var(--topbar));display:grid;place-items:center;padding:30px}.error-box{max-width:620px;background:#fff;border-radius:14px;padding:30px;box-shadow:var(--shadow);text-align:center}

@media(max-width:1100px){.workspace-two-column{grid-template-columns:1fr}.card-detail-grid{grid-template-columns:1fr}.card-detail-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.settings-grid-two{grid-template-columns:1fr}.topbar-center{display:none!important}}
@media(max-width:850px){.workspace-shell,.settings-shell{grid-template-columns:1fr}.workspace-sidebar,.settings-nav{display:none}.workspace-main,.settings-main{padding:22px 18px 40px}.metric-grid{grid-template-columns:repeat(2,1fr)}.board-title-wrap span,.board-visibility{display:none}.board-title-wrap h1{max-width:50vw}.card-page-bg{padding:14px}.card-detail-side{grid-template-columns:1fr}.admin-filter-bar{flex-wrap:wrap}.admin-filter-bar .filter-search{flex-basis:100%}.admin-filter-bar select{flex:1}.gradient-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.workspace-main,.settings-main{padding:18px 12px 35px}.workspace-header,.section-heading,.admin-page-head{align-items:flex-start;flex-direction:column}.workspace-header .btn,.admin-page-head .btn{width:100%}.metric-grid{gap:9px}.metric-card{padding:12px}.metric-card strong{font-size:20px}.metric-icon{width:36px;height:36px}.board-grid{grid-template-columns:1fr}.workspace-two-column{gap:12px}.board-list{width:270px;min-width:270px}.board-canvas{padding-left:8px}.board-toolbar{padding:8px}.board-member-stack{display:none}.card-page-bg{padding:8px}.detail-panel{padding:15px}.card-editor-head,.card-editor-body{padding:15px}.card-editor-head{flex-wrap:wrap}.complete-toggle{margin-left:50px}.detail-field-grid,.form-grid-two{grid-template-columns:1fr}.form-grid-two .full{grid-column:auto}.auth-card{padding:24px 20px}.recovery-code-grid{grid-template-columns:1fr}.recovery-reminder{left:10px;right:10px;bottom:10px}.admin-filter-bar select,.admin-filter-bar .btn{width:100%;flex:none}.settings-card{padding:15px}.smtp-test-form{flex-direction:column}.topbar-link{padding:0 8px}}

/* Error page */
.error-page{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:32px;background:radial-gradient(circle at 20% 10%,rgba(12,102,228,.12),transparent 38%),#f4f7fb}.error-panel{width:min(600px,100%);padding:42px;text-align:center;background:#fff;border:1px solid rgba(9,30,66,.08);border-radius:20px;box-shadow:0 24px 70px rgba(9,30,66,.14)}.error-symbol{width:58px;height:58px;margin:0 auto 18px;display:grid;place-items:center;border-radius:18px;background:#ffebe6;color:#ae2a19;font-size:30px;font-weight:900}.error-panel h1{font-size:28px;margin:5px 0 10px}.error-panel>p:not(.eyebrow){color:#626f86;margin-bottom:24px}

/* CITRANET TaskBoard v1.3 components */
.avatar-photo{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;color:transparent!important}.brand-mark.has-logo{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff}.brand-mark.has-logo span{display:none}.page-shell{max-width:1440px;margin:0 auto;padding:28px 30px 55px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.page-head h1{margin:0 0 4px;font-size:27px}.page-head p{margin:0;color:#626f86}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:800;color:#0c66e4!important}.copy-command{display:flex;align-items:center;gap:10px;background:#f7f8fa;border:1px solid #dfe1e6;border-radius:10px;padding:11px}.copy-command code{flex:1;white-space:normal;word-break:break-all}.drop-upload{position:relative;border:2px dashed #b6c2cf;border-radius:12px;padding:15px;background:#f7f8fa;transition:.15s}.drop-upload:before{content:'Tarik file ke area ini atau pilih dari perangkat';display:block;color:#626f86;font-size:11px;margin-bottom:9px}.drop-upload.is-dragover{border-color:#0c66e4;background:#e9f2ff}.upload-file-summary{font-size:11px;color:#44546f;margin-top:7px;word-break:break-word}.upload-progress{height:5px;background:#dfe1e6;border-radius:99px;overflow:hidden;margin-top:10px;display:none}.upload-progress.active{display:block}.upload-progress span{display:block;height:100%;width:45%;background:#0c66e4;border-radius:99px;animation:upload-pulse 1s ease-in-out infinite alternate}@keyframes upload-pulse{to{transform:translateX(120%)}}.attachment-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.attachment-preview-card{border:1px solid #dfe1e6;border-radius:10px;background:#fff;overflow:hidden}.attachment-preview-thumb{height:120px;display:grid;place-items:center;background:#f1f2f4;color:#626f86;background-size:cover;background-position:center}.attachment-preview-meta{padding:9px}.attachment-preview-meta strong,.attachment-preview-meta small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-actions{display:flex;gap:8px;align-items:center;font-size:11px}.attachment-actions form{display:inline}.attachment-actions button{border:0;background:none;color:#ae2e24;padding:0}.archive-tabs{display:flex;gap:8px;margin-bottom:16px}.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}.archive-item{background:#fff;border:1px solid #dfe1e6;border-radius:12px;padding:15px;box-shadow:var(--shadow-soft)}.archive-item h3{font-size:15px;margin:0 0 6px}.archive-item p,.archive-item small{color:#626f86}.archive-actions{display:flex;gap:8px;margin-top:12px}.archive-actions form{display:inline}.personal-task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}.personal-task-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #dfe1e6;border-radius:12px;padding:15px;box-shadow:var(--shadow-soft)}.personal-task-card:hover{border-color:#85b8ff;box-shadow:var(--shadow)}.personal-task-card h3{font-size:15px}.personal-meta{display:flex;gap:7px;flex-wrap:wrap}.priority-urgent{color:#ae2e24}.priority-high{color:#c25100}.check-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid #f0f1f3;padding:7px 0}.check-toggle{width:25px;height:25px;border:1px solid #b6c2cf;border-radius:6px;background:#fff}.check-toggle.done{background:#1f845a;color:#fff;border-color:#1f845a}.label-list{display:flex;gap:6px;flex-wrap:wrap}.task-label{display:inline-block;border-radius:999px;color:#fff;font-size:10px;font-weight:700;padding:4px 8px}.theme-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.theme-preset{height:86px;border:3px solid transparent;border-radius:12px;color:#fff;font-weight:750;text-shadow:0 1px 3px #0008;display:flex;align-items:flex-end;padding:10px}.theme-preset.active{border-color:#172b4d}.role-matrix th,.role-matrix td{text-align:center;vertical-align:middle}.role-matrix th:first-child,.role-matrix td:first-child{text-align:left}.role-yes{color:#1f845a;font-weight:900}.role-no{color:#8993a4}.scheduler-alert{border-left:4px solid #c9372c}.session-list-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f1f3}.session-list-row>div:nth-child(2){flex:1}.telegram-status{display:flex;align-items:center;gap:12px;border:1px solid #dfe1e6;border-radius:12px;padding:15px}.telegram-logo{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:#229ed9;color:#fff;font-weight:900}.report-summary{white-space:pre-wrap;background:#f7f8fa;border:1px solid #dfe1e6;border-radius:12px;padding:16px;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.storage-meter{height:8px;border-radius:99px;background:#dfe1e6;overflow:hidden}.storage-meter span{display:block;height:100%;background:#0c66e4}.danger-zone{border-color:#ffbdad;background:#fff8f6}
@media(max-width:850px){.page-shell{padding:22px 16px 45px}.page-head{align-items:flex-start;flex-direction:column}.attachment-gallery,.archive-grid,.personal-task-grid{grid-template-columns:1fr}.copy-command{align-items:stretch;flex-direction:column}}

/* v1.3.1 maintenance: Personal Kanban, member picker and tablet header */
.personal-kanban{display:flex;align-items:flex-start;gap:16px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x proximity}.personal-column{width:320px;min-width:320px;background:#f1f2f4;border:1px solid #dfe1e6;border-radius:14px;padding:10px;min-height:180px;scroll-snap-align:start}.personal-column>header{display:flex;align-items:center;justify-content:space-between;padding:5px 6px 10px;color:#172b4d}.personal-column>header span{display:grid;place-items:center;min-width:24px;height:24px;border-radius:999px;background:#dfe1e6;color:#44546f;font-size:11px;font-weight:800}.personal-column .personal-task-card{margin-bottom:9px;padding:12px;border-radius:10px;cursor:grab}.personal-column .personal-task-card:active{cursor:grabbing}.personal-column.is-dragover{outline:2px solid #0c66e4;outline-offset:2px;background:#e9f2ff}.personal-task-card.is-dragging{opacity:.45}.personal-task-card>strong,.personal-task-card>small{display:block}.personal-task-card>small{margin-top:5px;color:#626f86}.personal-task-card>div{margin-top:8px;color:#626f86;font-size:11px}.member-picker-search{display:flex;align-items:center;gap:7px;margin-bottom:8px}.member-picker-search svg{flex:0 0 auto;color:#626f86}.member-picker-search input{font-size:12px}.member-picker-results{max-height:280px;overflow:auto}.member-picker-results form[hidden]{display:none!important}.member-picker-results button span{min-width:0;flex:1;text-align:left}.member-picker-results button strong,.member-picker-results button small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-picker-results button small{font-size:10px;color:#8993a4;font-weight:500;margin-top:2px}
@media(max-width:1250px){.topbar-center{display:none!important}}
@media(max-width:850px){.personal-column{width:285px;min-width:285px}.app-topbar .brand-name{display:none!important}}