/* Liubai CRM — built on liubai-tokens.css (Monochrome Premium SaaS). Layout: customer list + follow-up tasks.
   Button hierarchy: list screens have no primary button; primary (silver/graphite fill) is reserved for
   the one commit action of an open form, the empty-state start, and dialog submits. */
:root{--crm-header-h:64px;--crm-tabbar-h:69px;
 --crm-icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
 --crm-icon-inbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13.5 6.2 5.6A2 2 0 0 1 8.1 4h7.8a2 2 0 0 1 1.9 1.6L20 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M4 13.5h4.5l1.5 2.5h4l1.5-2.5H20'/%3E%3C/svg%3E");
 --crm-icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.2'/%3E%3C/svg%3E")}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--lb-bg)}
body{margin:0;background:var(--lb-bg);color:var(--lb-text);font:var(--lb-weight-regular) var(--lb-text-md)/var(--lb-leading-body) var(--lb-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
::selection{background:var(--lb-light-silver);color:var(--lb-obsidian)}
h1,h2,h3{color:var(--lb-text-strong);line-height:var(--lb-leading-tight);font-weight:var(--lb-weight-semibold);text-wrap:balance;margin:0}
h1{font-size:var(--lb-text-2xl);letter-spacing:-.01em}
h2{font-size:var(--lb-text-xl)}
h3{font-size:var(--lb-text-lg)}
p{margin:0 0 var(--lb-space-3);text-wrap:pretty}
a{color:inherit;text-decoration:none}
small,.hint{color:var(--lb-text-muted);font-size:var(--lb-text-xs);line-height:1.6}
.hint{display:block;margin:var(--lb-space-1) 0 var(--lb-space-3)}
.eyebrow{font-size:var(--lb-text-xs);letter-spacing:var(--lb-tracking-label);color:var(--lb-text-muted);margin:0 0 var(--lb-space-2);text-transform:uppercase}
.icon{flex:none;display:block}
:focus-visible{outline:2px solid var(--lb-focus);outline-offset:2px}
.skip{position:absolute;left:var(--lb-space-4);top:-100px;z-index:var(--lb-z-toast);background:var(--lb-primary-fill);color:var(--lb-primary-text);padding:var(--lb-space-2) var(--lb-space-4);border-radius:var(--lb-radius-md);font-size:var(--lb-text-ui)}
.skip:focus{top:var(--lb-space-3)}

/* Buttons. secondary (default) = transparent + strong border; ghost (.quiet) = text only;
   primary = rendered material fill; danger = text + outline. All 44px, 14px. */
button{font:inherit;font-size:var(--lb-text-ui);font-weight:var(--lb-weight-medium);color:var(--lb-secondary-text);background:var(--lb-secondary-bg);border:1px solid var(--lb-border-strong);border-radius:var(--lb-radius-md);min-height:var(--lb-control-h);padding:0 var(--lb-space-4);display:inline-flex;align-items:center;justify-content:center;gap:var(--lb-space-2);cursor:pointer;text-align:center;transition:background var(--lb-duration-fast) var(--lb-ease),border-color var(--lb-duration-fast) var(--lb-ease),color var(--lb-duration-fast) var(--lb-ease),box-shadow var(--lb-duration-fast) var(--lb-ease)}
button:hover{background:var(--lb-secondary-bg-hover)}
button:disabled{opacity:.45;cursor:not-allowed}
.primary{background:var(--lb-primary-fill);color:var(--lb-primary-text);border-color:transparent;box-shadow:var(--lb-primary-shadow);font-weight:var(--lb-weight-semibold)}
.primary:hover{background:var(--lb-primary-fill-hover)}
.quiet{background:transparent;border-color:transparent;color:var(--lb-text-secondary)}
.quiet:hover{background:var(--lb-ghost-hover);color:var(--lb-text)}
.danger{background:transparent;color:var(--lb-danger);border-color:var(--lb-danger-border)}
.danger:hover{background:var(--lb-danger-bg)}
.iconbutton{width:var(--lb-touch);min-height:var(--lb-touch);padding:0;background:transparent;border-color:transparent;color:var(--lb-icon)}
.iconbutton:hover{background:var(--lb-ghost-hover);color:var(--lb-text)}
/* "New inquiry" in the frame and the heading tools are secondary, not primary. */
#new.primary{background:transparent;border:1px solid var(--lb-border-strong);color:var(--lb-text);box-shadow:none;font-weight:var(--lb-weight-medium)}
#new.primary:hover{background:var(--lb-secondary-bg-hover)}
.heading>button.quiet{border-color:var(--lb-border-strong);color:var(--lb-text)}

/* Forms: visible label, required marker, inline error */
label{display:block;font-size:var(--lb-text-ui);color:var(--lb-text-secondary);margin:0 0 var(--lb-space-5)}
.req,.resultset legend::after{margin-left:var(--lb-space-2);font-size:var(--lb-text-sm);color:var(--lb-text-muted);font-weight:var(--lb-weight-regular)}
.resultset legend::after{content:"必填"}
input,select,textarea{display:block;width:100%;margin-top:var(--lb-space-2);font:inherit;font-size:var(--lb-text-input);color:var(--lb-text);background:var(--lb-surface-sunken);border:1px solid var(--lb-border-strong);border-radius:var(--lb-radius-md);padding:9px var(--lb-space-3);min-height:var(--lb-control-h);transition:border-color var(--lb-duration-fast) var(--lb-ease)}
input::placeholder,textarea::placeholder{color:var(--lb-text-muted);opacity:1}
input:hover,select:hover,textarea:hover{border-color:var(--lb-icon)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lb-focus);box-shadow:0 0 0 1px var(--lb-focus)}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--lb-danger)}
textarea{resize:vertical;min-height:88px;line-height:1.6}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--lb-icon) 50%),linear-gradient(135deg,var(--lb-icon) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat}
input[type=checkbox]{width:auto;min-height:0;margin:0;accent-color:var(--lb-text-strong)}
.check{display:flex;align-items:center;gap:var(--lb-space-3);min-height:var(--lb-touch);color:var(--lb-text-secondary);cursor:pointer}
.check input{width:20px;height:20px}
summary{cursor:pointer;color:var(--lb-text-secondary);font-size:var(--lb-text-ui);min-height:var(--lb-touch);display:flex;align-items:center}
details[open]>summary{color:var(--lb-text)}

/* App frame: sidebar shares the page background, separated by one hairline */
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--lb-sidebar-w);background:var(--lb-sidebar);border-right:1px solid var(--lb-divider);padding:var(--lb-space-6) var(--lb-space-4);display:flex;flex-direction:column;gap:var(--lb-space-6);z-index:var(--lb-z-sticky)}
.brand{display:flex;flex-direction:column;gap:2px;color:var(--lb-text-strong);font-size:20px;font-weight:var(--lb-weight-semibold);letter-spacing:.12em;word-spacing:normal;padding:0 var(--lb-space-3)}
.brand span{word-spacing:normal}
.brand span{font-size:var(--lb-text-xs);font-weight:var(--lb-weight-medium);letter-spacing:.1em;color:var(--lb-text-muted)}
#new{width:100%}
.sidebar nav{display:grid;gap:2px}
.sidebar nav a{display:flex;align-items:center;gap:var(--lb-space-3);min-height:var(--lb-touch);padding:0 var(--lb-space-3);border-radius:var(--lb-radius-md);color:var(--lb-text-secondary);font-size:var(--lb-text-ui);transition:background var(--lb-duration-fast) var(--lb-ease),color var(--lb-duration-fast) var(--lb-ease)}
.sidebar nav a .icon{color:var(--lb-icon)}
.sidebar nav a:hover{background:var(--lb-ghost-hover);color:var(--lb-text)}
.sidebar nav a[aria-current=page]{background:var(--lb-selected-bg);color:var(--lb-text-strong);font-weight:var(--lb-weight-semibold);box-shadow:inset 2px 0 0 var(--lb-marker)}
.sidebar nav a[aria-current=page] .icon{color:var(--lb-text-strong)}
.sidefoot{margin-top:auto;border-top:1px solid var(--lb-divider);padding:var(--lb-space-4) var(--lb-space-3) 0;color:var(--lb-text-muted);font-size:var(--lb-text-xs);line-height:1.6}
.sidefoot p{color:var(--lb-text-secondary);margin:var(--lb-space-2) 0 var(--lb-space-1);font-size:var(--lb-text-sm)}
.sidefoot small{display:block}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lb-marker);margin-right:6px;vertical-align:2px}
.themetoggle{margin-top:var(--lb-space-3);border-color:var(--lb-border)}
main{margin-left:var(--lb-sidebar-w);padding:0 var(--lb-space-10) var(--lb-space-8);max-width:calc(var(--lb-content-max) + var(--lb-sidebar-w) + 80px)}
.top{position:relative;height:56px;display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-4);color:var(--lb-text-muted);font-size:var(--lb-text-xs)}
.top::after,footer::before{content:"";position:absolute;left:0;right:0;height:1px;background:var(--lb-divider-sheen)}
.top::after{bottom:0}
footer::before{top:0}
.heading{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--lb-gap-inline);flex-wrap:wrap;margin:var(--lb-space-8) 0 var(--lb-space-6)}
.heading>div{min-width:0;flex:1 1 320px}
#subtitle{color:var(--lb-text-secondary);margin:var(--lb-space-2) 0 0}
.heading>button{flex:none}
footer{display:flex;justify-content:space-between;gap:var(--lb-space-4);flex-wrap:wrap;margin-top:var(--lb-space-12);padding-top:var(--lb-space-5);position:relative;color:var(--lb-text-muted);font-size:var(--lb-text-xs)}

/* Notice: one polite live region. Desktop: bottom-right float, 360px. Mobile: sits exactly on the
   sticky tab row, never over content. A visible inline error hides any success notice. */
#notice:not(:empty){position:fixed;right:var(--lb-space-6);bottom:var(--lb-space-6);z-index:var(--lb-z-toast);width:min(360px,calc(100vw - 32px));display:flex;align-items:center;gap:var(--lb-space-3);background:var(--lb-surface-raised);color:var(--lb-text);border:1px solid var(--lb-border);border-radius:var(--lb-radius-lg);box-shadow:var(--lb-shadow-toast);padding:var(--lb-space-3) var(--lb-space-4);font-size:var(--lb-text-ui);line-height:1.5}
#notice:not(:empty)::before{content:"";flex:none;width:18px;height:18px;background:var(--lb-success);-webkit-mask:var(--crm-icon-check) center/contain no-repeat;mask:var(--crm-icon-check) center/contain no-repeat}
#notice[data-error=true]{border-color:var(--lb-danger-border);background:var(--lb-danger-bg);color:var(--lb-danger)}
#notice[data-error=true]::before{background:var(--lb-danger);-webkit-mask-image:var(--crm-icon-info);mask-image:var(--crm-icon-info)}
body:has(.followerror:not(:empty)) #notice:not([data-error=true]){display:none!important;visibility:hidden;opacity:0;transition:none;border:0;box-shadow:none}

/* Surfaces: one quiet container per task area; no card nesting */
.panel{background:var(--lb-surface);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-lg);padding:var(--lb-pad-card);min-width:0}
.panel>h2{margin-bottom:var(--lb-space-2)}
.panelhead{display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-3);margin-bottom:var(--lb-space-4)}
.panelhead h2{font-size:var(--lb-text-lg)}
.empty{padding:var(--lb-space-10) var(--lb-space-4);text-align:center;color:var(--lb-text-muted)}
.empty::before{content:"";display:block;width:24px;height:24px;margin:0 auto var(--lb-space-4);background:var(--lb-icon);-webkit-mask:var(--crm-icon-inbox) center/contain no-repeat;mask:var(--crm-icon-inbox) center/contain no-repeat}
.ux-guide:not([hidden])~#content .empty button.primary{background:transparent;border:1px solid var(--lb-border-strong);color:var(--lb-text);box-shadow:none;font-weight:var(--lb-weight-medium)}
.empty strong{display:block;color:var(--lb-text);font-size:var(--lb-text-lg);font-weight:var(--lb-weight-semibold);margin-bottom:var(--lb-space-2)}
.empty p{max-width:36ch;margin:0 auto}
.empty button{margin-top:var(--lb-space-5)}

/* Metric strip: one hairline frame, columns split by hairlines, silver gradient numbers */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--lb-surface);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-lg);margin:0 0 var(--lb-space-8);overflow:hidden}
.stat{padding:var(--lb-space-4) var(--lb-space-5);border-left:1px solid var(--lb-divider);display:flex;flex-direction:column;gap:2px;min-width:0}
.stat:first-child{border-left:0}
.stat span{font-size:var(--lb-text-xs);color:var(--lb-text-secondary)}
.stat:first-child span{color:var(--lb-text);font-weight:var(--lb-weight-semibold)}
.stat strong{font-size:var(--lb-text-2xl);font-weight:var(--lb-weight-semibold);line-height:1.2;background:var(--lb-stat-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;width:max-content}

/* Today: tasks are the primary column; the recent list is secondary and unboxed */
.split{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:var(--lb-space-10);align-items:start}
.split>.panel:first-child{padding:var(--lb-space-8) var(--lb-pad-card-lg) var(--lb-space-6)}
.split>.panel+.panel{background:transparent;border:0;padding:var(--lb-space-1) 0 0}
.split>.panel+.panel>h2{font-size:var(--lb-text-lg);color:var(--lb-text-secondary);font-weight:var(--lb-weight-medium);padding-bottom:var(--lb-space-3);border-bottom:1px solid var(--lb-divider);margin-bottom:0}
.duehead{display:flex;align-items:center;gap:var(--lb-space-2);font-size:var(--lb-text-xs);letter-spacing:var(--lb-tracking-label);color:var(--lb-text-secondary);font-weight:var(--lb-weight-semibold);margin:var(--lb-space-6) 0 0;padding-bottom:var(--lb-space-2);border-bottom:1px solid var(--lb-divider)}
.duehead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lb-marker)}
.duehead.overdue{color:var(--lb-warning)}
.duehead.overdue::before{background:var(--lb-warning)}
.follow{padding:var(--lb-space-6) 0 var(--lb-space-5);border-bottom:1px solid var(--lb-divider)}
.follow:last-child{border-bottom:0}
.followhead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lb-space-3)}
.followname{background:transparent;border:0;padding:10px 0;min-height:var(--lb-touch);justify-content:flex-start;align-items:flex-start;text-align:left;font-size:var(--lb-text-lg);font-weight:var(--lb-weight-semibold);color:var(--lb-text-strong);overflow-wrap:anywhere;line-height:1.45}
.followname:hover{background:transparent;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--lb-icon)}
.followhead .badge{margin-top:9px}
.followmeta{margin:0 0 var(--lb-space-4);color:var(--lb-text-secondary);font-size:var(--lb-text-sm);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Card actions: at most two styles — record (secondary outline) and reschedule/cancel (ghost). */
.followactions,.followsubmit{display:flex;flex-wrap:wrap;gap:var(--lb-gap-inline)}
.followsubmit{scroll-margin-bottom:24px}
.followactions button,.followsubmit button{min-height:var(--lb-touch)}
.followactions .primary{background:transparent;border:1px solid var(--lb-border-strong);color:var(--lb-text);box-shadow:none;font-weight:var(--lb-weight-medium)}
.followactions .primary:hover{background:var(--lb-secondary-bg-hover)}
.followactions button:not(.primary){background:transparent;border-color:transparent;color:var(--lb-text-secondary)}
.followactions button:not(.primary):hover{background:var(--lb-ghost-hover);color:var(--lb-text)}
/* Open form: no frame (no card in card) — a 2px selection marker and an indent. */
.followform{display:grid;gap:var(--lb-space-4);background:none;border:0;border-left:2px solid var(--lb-marker);border-radius:0;padding:var(--lb-space-1) 0 var(--lb-space-1) var(--lb-space-5);margin-top:var(--lb-space-1)}
.followlabel{font-size:var(--lb-text-xs);color:var(--lb-text-secondary);letter-spacing:.02em;margin-bottom:-6px}
.followform input[type=date],.followform select,.followform textarea{margin-top:0}
.resultset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--lb-space-2);min-width:0}
.resultset legend{font-size:var(--lb-text-xs);color:var(--lb-text-secondary);margin-bottom:var(--lb-space-3);padding:0}
.resultopt{display:flex;align-items:center;gap:var(--lb-space-3);min-height:var(--lb-touch);margin:0;padding:0 var(--lb-space-3);border:1px solid var(--lb-border);border-radius:var(--lb-radius-md);background:transparent;color:var(--lb-text);font-size:var(--lb-text-ui);cursor:pointer;transition:border-color var(--lb-duration-fast) var(--lb-ease),background var(--lb-duration-fast) var(--lb-ease)}
.resultopt:hover{border-color:var(--lb-border-strong)}
.resultopt input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;min-height:0;margin:0;padding:3px;border:1.5px solid var(--lb-border-strong);border-radius:50%;background:transparent;background-clip:content-box;cursor:pointer}
.resultopt input:checked{border-color:var(--lb-marker);background:var(--lb-check-fill);background-clip:content-box}
.resultopt input:focus-visible{outline:none}
.resultopt:has(input:checked){border-color:var(--lb-marker);background:var(--lb-selected-bg);font-weight:var(--lb-weight-medium)}
.resultopt:has(input:focus-visible){outline:2px solid var(--lb-focus);outline-offset:2px}
/* Quick dates: single choice. Hover only brightens the outline; the selected one is filled and ticked. */
.chips{display:flex;flex-wrap:wrap;gap:var(--lb-space-2)}
.chip{font-weight:var(--lb-weight-regular);-webkit-tap-highlight-color:transparent;min-height:var(--lb-touch);padding:0 var(--lb-space-4);border-radius:var(--lb-radius-pill);background:transparent;border:1px solid var(--lb-border-strong);color:var(--lb-text-secondary)}
.chip:not([aria-pressed=true]):hover{background:transparent;border-color:var(--lb-text-secondary);color:var(--lb-text)}
.chip[aria-pressed=true]{background:var(--lb-selected-fill);border-color:transparent;color:var(--lb-selected-text);font-weight:var(--lb-weight-semibold)}
.chip[aria-pressed=true]::before{content:"";width:14px;height:14px;margin-left:-2px;background:currentColor;-webkit-mask:var(--crm-icon-check) center/contain no-repeat;mask:var(--crm-icon-check) center/contain no-repeat}
.chip:disabled{border-style:dashed;color:var(--lb-text-muted)}
.followerror:not(:empty){display:flex;gap:var(--lb-space-2);align-items:flex-start;margin:0;padding:var(--lb-space-3);border:1px solid var(--lb-danger-border);background:var(--lb-danger-bg);color:var(--lb-danger);border-radius:var(--lb-radius-md);font-size:var(--lb-text-md);line-height:1.55}
.followerror:not(:empty)::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;background:currentColor;-webkit-mask:var(--crm-icon-info) center/contain no-repeat;mask:var(--crm-icon-info) center/contain no-repeat}

/* Lists */
.lead{display:flex;align-items:center;gap:var(--lb-space-3);width:100%;min-height:64px;padding:var(--lb-space-3) var(--lb-space-1);background:transparent;border:0;border-bottom:1px solid var(--lb-divider);border-radius:0;color:var(--lb-text);text-align:left;font-weight:var(--lb-weight-regular)}
.lead:hover{background:var(--lb-ghost-hover)}
.lead:last-child{border-bottom:0}
.avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:transparent;border:1px solid var(--lb-border-strong);color:var(--lb-text-secondary);font-size:var(--lb-text-sm);font-weight:var(--lb-weight-semibold)}
.leadtext{flex:1;min-width:0}
.leadtext strong{display:block;font-weight:var(--lb-weight-medium);font-size:var(--lb-text-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leadtext small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{flex:none;display:inline-flex;align-items:center;font-size:var(--lb-text-xs);line-height:1;padding:6px 10px;border-radius:var(--lb-radius-pill);background:transparent;color:var(--lb-text-secondary);border:1px solid var(--lb-border);white-space:nowrap}
.late{color:var(--lb-warning);background:transparent;border:1px solid var(--lb-warning-border)}

/* Contacts table */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--lb-gap-inline);margin-bottom:var(--lb-space-5);align-items:center}
.toolbar input{flex:1 1 280px;margin:0;width:auto}
.toolbar select{flex:0 1 180px;margin:0;width:auto}
.tablewrap{padding:0;overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--lb-text-sm)}
th{position:sticky;top:0;background:var(--lb-surface);color:var(--lb-text-secondary);font-size:var(--lb-text-xs);font-weight:var(--lb-weight-medium);letter-spacing:.04em;padding:var(--lb-space-3) var(--lb-space-4);border-bottom:1px solid var(--lb-border);white-space:nowrap}
td{padding:var(--lb-space-2) var(--lb-space-4);border-bottom:1px solid var(--lb-divider);vertical-align:top;color:var(--lb-text-secondary);white-space:nowrap}
td:first-child{white-space:normal;min-width:220px;max-width:420px}
tbody tr:hover td{background:var(--lb-ghost-hover)}
tbody tr:last-child td{border-bottom:0}
td button{background:transparent;border:0;padding:0;min-height:var(--lb-touch);font-size:var(--lb-text-md);font-weight:var(--lb-weight-semibold);color:var(--lb-text-strong);text-align:left;justify-content:flex-start;overflow-wrap:anywhere}
td button:hover{background:transparent;text-decoration:underline;text-underline-offset:3px}
td small{overflow-wrap:anywhere}

/* Board */
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--lb-space-5)}
.column{background:var(--lb-surface);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-lg);padding:var(--lb-space-5);min-width:0}
.column h3{display:flex;align-items:center;justify-content:space-between;gap:var(--lb-space-2);font-size:var(--lb-text-ui);margin-bottom:var(--lb-space-3)}
.card{border-top:1px solid var(--lb-divider);padding:var(--lb-space-3) 0}
.card button{background:transparent;border:0;padding:0;min-height:var(--lb-touch);justify-content:flex-start;font-size:var(--lb-text-md);font-weight:var(--lb-weight-semibold);color:var(--lb-text-strong);text-align:left;overflow-wrap:anywhere}
.card p{font-size:var(--lb-text-sm);color:var(--lb-text-secondary);margin:var(--lb-space-1) 0;overflow-wrap:anywhere}
.card select{margin-top:var(--lb-space-2)}

/* Insights */
.source-row{display:flex;justify-content:space-between;gap:var(--lb-space-3);flex-wrap:wrap;margin-top:var(--lb-space-5);font-size:var(--lb-text-sm)}
.source-row span{color:var(--lb-text-secondary)}
.bar{height:6px;border-radius:var(--lb-radius-pill);background:var(--lb-surface-sunken);border:1px solid var(--lb-border);margin:var(--lb-space-2) 0;overflow:hidden}
.bar span{display:block;height:100%;background:var(--lb-marker)}

/* Dialogs */
dialog{color:var(--lb-text);background:var(--lb-surface);border:0;border-radius:var(--lb-radius-xl);box-shadow:var(--lb-shadow-overlay);width:min(760px,94vw);max-height:92vh;padding:var(--lb-space-6) var(--lb-space-8) var(--lb-space-8)}
dialog::backdrop{background:var(--lb-overlay)}
dialog[open]{animation:lb-in var(--lb-duration) var(--lb-ease)}
@keyframes lb-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dialoghead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lb-space-4);margin-bottom:var(--lb-space-5);padding-bottom:var(--lb-space-4);border-bottom:1px solid var(--lb-divider)}
.dialoghead h2{font-size:var(--lb-text-xl);overflow-wrap:anywhere}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--lb-space-5)}
.actions{display:flex;flex-wrap:wrap;gap:var(--lb-gap-inline);justify-content:flex-end;margin-top:var(--lb-space-2)}
.actions .danger{margin-right:auto}
#details{margin-top:var(--lb-space-6);padding-top:var(--lb-space-5);border-top:1px solid var(--lb-divider)}
.tabs{display:inline-flex;gap:2px;padding:3px;background:var(--lb-surface-sunken);border:1px solid var(--lb-border);border-radius:var(--lb-radius-md);margin-bottom:var(--lb-space-5)}
.tabs button{background:transparent;border:0;color:var(--lb-text-secondary)}
.tabs button[aria-pressed=true]{background:var(--lb-selected-fill);color:var(--lb-selected-text);font-weight:var(--lb-weight-semibold)}
.event{position:relative;padding:var(--lb-space-3) 0 var(--lb-space-3) var(--lb-space-5);border-left:1px solid var(--lb-border);margin-left:6px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--lb-text-sm);color:var(--lb-text)}
.event::before{content:"";position:absolute;left:-4px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--lb-surface);border:1.5px solid var(--lb-marker)}
.event small{display:block;margin-top:var(--lb-space-1)}
blockquote{margin:var(--lb-space-2) 0;padding:var(--lb-space-2) var(--lb-space-4);border-left:2px solid var(--lb-marker);color:var(--lb-text-secondary);background:var(--lb-surface-sunken);border-radius:0 var(--lb-radius-md) var(--lb-radius-md) 0;white-space:pre-wrap;overflow-wrap:anywhere}
#importPreview p{font-size:var(--lb-text-sm);color:var(--lb-text-secondary);margin:var(--lb-space-1) 0}

/* Tablet */
@media (max-width:1100px){
 .split{grid-template-columns:1fr;gap:var(--lb-space-8)}
 .split>.panel:first-child{padding:var(--lb-space-6) var(--lb-pad-card)}
 .board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Mobile: content first. The sidebar dissolves into a sticky header (brand row + pill tab row). */
@media (max-width:760px){
 body{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:var(--crm-header-h) var(--crm-tabbar-h) auto auto;grid-template-areas:"brand new" "nav nav" "main main" "foot foot"}
 body::before{content:"";grid-row:1;grid-column:1 / -1;position:sticky;top:0;z-index:var(--lb-z-sticky);background:var(--lb-chrome)}
 .sidebar{display:contents}
 .brand{grid-area:brand;position:sticky;top:0;z-index:calc(var(--lb-z-sticky) + 1);flex-direction:row;align-items:center;height:var(--crm-header-h);padding:0 var(--lb-space-5)}
 .brand span{display:none}
 #new{grid-area:new;position:sticky;top:10px;z-index:calc(var(--lb-z-sticky) + 1);align-self:center;width:auto;min-height:var(--lb-control-h);height:var(--lb-control-h);margin:0 var(--lb-space-5) 0 0;padding:0 14px;font-size:var(--lb-text-ui)}
 .sidebar nav{grid-area:nav;position:sticky;top:var(--crm-header-h);z-index:var(--lb-z-sticky);height:var(--crm-tabbar-h);display:flex;align-items:center;gap:var(--lb-space-2);overflow-x:auto;scrollbar-width:none;scroll-padding:0 20px;padding:0 var(--lb-space-5);background:var(--lb-chrome);border-bottom:1px solid var(--lb-divider);-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
 .sidebar nav::-webkit-scrollbar{display:none}
 .sidebar nav a{flex:none;min-height:var(--lb-touch);padding:0 var(--lb-space-4);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-pill);gap:6px}
 .sidebar nav a:last-child{margin-right:var(--lb-space-10)}
 .sidebar nav a .icon{width:16px;height:16px}
 .sidebar nav a[aria-current=page]{background:var(--lb-selected-fill);color:var(--lb-selected-text);border-color:transparent;box-shadow:none}
 .sidebar nav a[aria-current=page] .icon{color:var(--lb-selected-text)}
 .sidefoot{grid-area:foot;margin:0 var(--lb-space-5) var(--lb-space-6);padding:var(--lb-space-4) 0 0}
 main{grid-area:main;margin:0;padding:0 var(--lb-space-5);min-width:0}
 .top{height:auto;padding:var(--lb-space-4) 0 0}
 .top::after{display:none}
 .top>span:first-child{display:none}
 .heading{margin:var(--lb-space-2) 0 var(--lb-space-6);align-items:stretch}
 .heading>div{flex-basis:100%}
 .heading .eyebrow{display:none}
 #subtitle{font-size:var(--lb-text-sm)}
 .heading>button{flex:1 1 0;padding:0 6px;white-space:nowrap}
 .stats{margin-bottom:var(--lb-space-6)}
 .stat{padding:var(--lb-space-3) var(--lb-space-3)}
 .stat strong{font-size:var(--lb-text-xl)}
 .panel{padding:var(--lb-pad-card)}
 .split{gap:var(--lb-space-8)}
 .split>.panel:first-child{background:var(--lb-surface);border:1px solid var(--lb-divider);border-radius:var(--lb-radius-lg);padding:20px}
 .split>.panel:first-child>h2{font-size:var(--lb-text-xl)}
 .follow{padding:var(--lb-space-5) 0}
 .resultset{grid-template-columns:1fr}
 .followactions{display:grid;grid-template-columns:1.3fr 1fr 1fr}
 .followactions button{padding:0 var(--lb-space-2)}
 .followform{padding-left:var(--lb-space-4)}
 .followsubmit button{flex:1}
 .followform,.followerror,.followsubmit{scroll-margin-top:calc(var(--crm-header-h) + var(--crm-tabbar-h) + 16px)}
 .formgrid{grid-template-columns:1fr}
 .board{grid-template-columns:1fr}
 .toolbar>button{flex:1 1 calc(50% - 12px)}
 dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:var(--lb-space-4) var(--lb-space-5) var(--lb-space-8)}
 .dialoghead{position:sticky;top:calc(-1 * var(--lb-space-4));z-index:1;background:var(--lb-surface);margin:calc(-1 * var(--lb-space-4)) calc(-1 * var(--lb-space-5)) var(--lb-space-4);padding:var(--lb-space-4) var(--lb-space-5)}
 .actions button{flex:1}
 /* Toast replaces the tab row while visible (max 8s); content and forms stay uncovered. */
 #notice:not(:empty){top:var(--crm-header-h);left:0;right:0;bottom:auto;width:auto;height:var(--crm-tabbar-h);border-radius:0;border-width:0 0 1px;box-shadow:none;padding:0 var(--lb-space-5)}
 footer{flex-direction:column;gap:var(--lb-space-1)}
}
@media (prefers-reduced-motion:reduce){dialog[open]{animation:none}*{transition-duration:0ms!important}}

/* Shared help entries ("網站使用說明", "帳號連接教學") are injected at packaging time with their own
   green palette and load after this file. CRM-only override with higher specificity; shared sources untouched. */
body a.lb-tutorial-link,body .lb-usage-help{display:inline-flex;align-items:center;gap:var(--lb-space-1);min-height:var(--lb-touch);padding:0 var(--lb-space-3);margin:0;border:1px solid transparent;border-radius:var(--lb-radius-md);background:transparent;color:var(--lb-text-secondary);font:var(--lb-weight-medium) var(--lb-text-ui)/1.4 var(--lb-font-sans);text-decoration:underline;text-decoration-color:var(--lb-icon);text-underline-offset:3px;box-shadow:none}
body a.lb-tutorial-link:hover,body .lb-usage-help:hover{background:var(--lb-ghost-hover);color:var(--lb-text);border-color:transparent}
body a.lb-tutorial-link:focus-visible,body .lb-usage-help:focus-visible{outline:2px solid var(--lb-focus);outline-offset:2px}

/* Packaged account/help controls share one compact mobile row; auth handlers stay untouched. */
@media (max-width:760px){
 main:has(> .lb-usage-nav):has(> .top #accountButton){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--lb-space-1);align-content:start}
 main:has(> .lb-usage-nav):has(> .top #accountButton)>*{grid-column:1 / -1}
 main:has(> .top #accountButton)>.lb-usage-nav{grid-column:1;grid-row:1;margin:var(--lb-space-2) 0;align-items:center;align-self:start}
 main:has(> .lb-usage-nav)>.top:has(#accountButton){grid-column:2;grid-row:1;flex-wrap:wrap;justify-content:flex-end;gap:var(--lb-space-1);padding:0;margin:var(--lb-space-2) 0}
 .top:has(#accountButton)>span{flex-basis:100%;text-align:right}
 .top:has(#accountButton)>span:not(#date){display:none}
 main>.lb-usage-nav .lb-usage-help,.top #accountButton,.top>.lb-tutorial-link{font-size:var(--lb-text-xs);padding:0 var(--lb-space-1);margin:0;min-height:var(--lb-touch);white-space:nowrap}
}