@import url("./button.css");
@font-face {
  font-family:"Outfit Brand"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/assets/fonts/outfit-brand-400-ed2c6d023cf3.woff2") format("woff2");
}
:root {
  color-scheme:light;
  --accent:#7bbffb; --gray:#b5b5b7; --white:#ffffff;
  --accent-soft:#e5f2fe;
  --bg:var(--white); --sidebar:#f5f5f5; --dock:#ededed; --surface:var(--white); --hover:#f0f0f0; --selected:#eaeaea;
  --text:#242424; --secondary:#666; --muted:#8f8f8f; --line:var(--gray); --soft-line:#e2e2e3; --dot:#e2e2e2;
  --focus-line:var(--text); --selection-bg:var(--accent-soft);
  --button-bg:var(--white); --button-line:#d5d5d5;
  --danger:#b42318; --danger-hover:#912018;
  --font:system-ui,-apple-system,"PingFang SC","Noto Sans SC",sans-serif;
  font-family:var(--font); font-size:14px; color:var(--text); background:var(--bg);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; }
button,input,select,textarea,summary { font:inherit; }
button,summary { color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button { border:1px solid var(--button-line); border-radius:10px; background:var(--button-bg); padding:8px 14px; font-weight:500; line-height:20px; }
button:hover:where(:not(:disabled)),summary:hover { background:var(--hover); }
button:active { opacity:.7; }
button:disabled { opacity:.4; cursor:default; }
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--focus-line); outline-offset:-2px; }
a { color:inherit; }
p,h1,h2,h3,h4 { margin:0; }
button,.project-name,h3,p,code { overflow-wrap:anywhere; }
.icon { width:20px; height:20px; display:block; flex-shrink:0; }
.icon-button { width:36px; height:36px; padding:8px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:8px; background:transparent; flex-shrink:0; }
.brand { display:inline-flex; align-items:center; gap:7px; font-size:20px; line-height:28px; font-weight:600; letter-spacing:-.6px; text-decoration:none; }
.brand-logo { display:block; width:34px; height:34px; flex-shrink:0; }
/* Fixed 27px/400 glyph alignment, retaining the scaled optical lift. */
.brand-title { font-family:"Outfit Brand",var(--font); font-size:27px; line-height:1.15; font-weight:400; letter-spacing:-.6px; text-transform:lowercase; font-synthesis:none; transform:translateY(-1.5px); }
.muted,.detail-meta { color:var(--secondary); font-size:12px; line-height:20px; }
.empty { position:fixed; inset:45% 20px auto; text-align:center; color:var(--secondary); }
#workspace { height:100dvh; display:grid; grid-template-columns:260px minmax(0,1fr); overflow:hidden; }
#sidebar { padding:18px 12px 8px; background:var(--sidebar); display:flex; flex-direction:column; min-height:0; z-index:10; }
.sidebar-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 0 6px; margin-bottom:32px; }
.sidebar-heading { padding:0 12px; margin-bottom:8px; color:var(--secondary); font-size:12px; line-height:20px; }
#project-manage { color:var(--text); }
#project-list { min-height:0; flex:1; overflow:auto; scrollbar-width:thin; }
#project-list.projects-empty { display:flex; flex-direction:column; justify-content:center; gap:12px; padding:24px 16px; color:var(--secondary); text-align:center; font-size:13px; line-height:1.7; }
#project-list.projects-empty p:first-child { color:var(--text); }
.project-item { width:100%; min-height:44px; display:flex; align-items:center; gap:12px; padding:10px 12px; border:0; border-radius:10px; text-align:left; background:transparent; margin-bottom:4px; }
.project-item[aria-current="page"] { background:var(--selected); }
.project-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:24px; }
.project-item .icon { width:18px; height:18px; }
.archived { color:var(--secondary); font-size:10px; }
.sidebar-footer { display:flex; flex-direction:column; gap:4px; padding-top:12px; }
.sidebar-action { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:0; background:transparent; text-align:left; font-weight:400; }
.sidebar-action:hover { background:var(--selected); }
#identity { min-width:0; }
#account-name { display:flex; align-items:center; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:0; background:transparent; text-align:left; }
#account-name:hover { background:var(--selected); }
#account-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:20px; }
.canvas-workspace { position:relative; min-width:0; overflow:hidden; }
#graph-viewport { position:absolute; inset:0; overflow:hidden; cursor:grab; touch-action:none; user-select:none; background-image:radial-gradient(circle,var(--dot) .8px,transparent .9px); background-size:24px 24px; }
#graph-viewport:focus,#graph-viewport:focus-visible { outline:none; }
#graph-viewport.dragging { cursor:grabbing; }
#graph { position:absolute; top:0; left:0; transform-origin:0 0; }
.edges { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
.edge { fill:none; stroke:var(--line); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.edge.active { stroke:var(--accent); stroke-width:1.8; }
.work-node { position:absolute; width:240px; height:128px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; text-align:left; border:1px solid var(--line); border-radius:16px; background:var(--surface); z-index:2; }
.work-node:hover,.library-entry:hover { background:var(--sidebar); }
.work-node.current { border-style:dashed; }
.work-node.selected { background:var(--selection-bg); border-color:var(--accent); }
.library-entry.selected { background:var(--selected); border-color:var(--line); }
.work-node strong { font-size:14px; line-height:22px; font-weight:500; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.node-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--secondary); font-size:11px; line-height:16px; width:100%; }
.node-author { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node-date { flex-shrink:0; }
.canvas-empty { position:absolute; left:50%; top:48%; transform:translateX(-50%); width:calc(100% - 48px); max-width:440px; text-align:center; line-height:24px; overflow-wrap:anywhere; color:var(--secondary); font-size:14px; pointer-events:none; }
.canvas-dock { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:6px; border:1px solid var(--soft-line); border-radius:999px; background:var(--dock); box-shadow:0 4px 20px #00000010,0 1px 4px #00000006; z-index:6; }
.canvas-dock .icon-button { width:40px; height:40px; border-radius:50%; }
.dock-group { display:flex; align-items:center; gap:inherit; }
.canvas-dock .icon-button:hover:not(:disabled) { background:#dedede; }
.control-divider { width:1px; height:20px; margin:0 4px; background:var(--line); flex-shrink:0; }
.section-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-bar h2 { font-size:14px; line-height:22px; font-weight:500; }
.detail-panel { --button-bg:var(--surface); position:absolute; right:0; top:0; bottom:0; width:380px; max-width:100%; border:0; border-radius:0; background:var(--sidebar); z-index:8; display:flex; flex-direction:column; overflow:hidden; }
.detail-panel > .section-bar { padding:16px 16px 8px 24px; }
.detail-content { padding:8px 24px 24px; min-height:0; overflow:auto; scrollbar-width:thin; }
.detail-content > h3 { font-size:18px; line-height:28px; font-weight:500; margin:8px 0 12px; }
.detail-content > p { font-size:14px; line-height:24px; white-space:pre-wrap; margin:0 0 16px; }
.work-description { margin:0 0 24px; }
.work-description > h4 { margin:0 0 8px; font-size:13px; line-height:22px; font-weight:500; }
.work-description > p { margin:0; font-size:14px; line-height:24px; white-space:pre-wrap; overflow-wrap:anywhere; }
.detail-content > .detail-meta { font-size:12px; line-height:20px; color:var(--secondary); }
.library-setting { display:flex; align-items:center; justify-content:space-between; padding:8px 0; margin:12px 0; gap:16px; font-size:13px; }
.library-setting .icon { width:18px; height:18px; color:var(--secondary); }
.library-setting label { display:flex; align-items:center; gap:12px; cursor:pointer; }
.library-switch { appearance:none; -webkit-appearance:none; width:36px; height:22px; border:0; border-radius:999px; background:var(--gray); cursor:pointer; flex-shrink:0; position:relative; margin:0; transition:background 120ms; }
.library-switch::before { content:""; position:absolute; width:18px; height:18px; left:2px; top:2px; border-radius:50%; background:var(--white); box-shadow:0 1px 3px #00000018; transition:transform 120ms; }
.library-switch:checked { background:var(--accent); }
.library-switch:checked::before { transform:translateX(14px); }
.library-switch:disabled { opacity:.45; cursor:default; }
.detail-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:16px 0 24px; }
.session-action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:8px 10px; font-size:12px; line-height:20px; background:var(--button-bg); border:1px solid var(--button-line); }
.session-action:hover:not(:disabled) { background:#fafafa; border-color:var(--line); }
.session-action .icon { width:16px; height:16px; }
.dialogue-toggle, .detail-actions > .session-action:last-child:nth-child(odd) { grid-column:1/-1; }
.dialogue { display:flex; flex-direction:column; gap:24px; margin:0; }
.message { align-self:flex-start; max-width:88%; }
.message.user { align-self:flex-end; }
.message-role { display:block; font-size:11px; line-height:16px; color:var(--secondary); margin:0 8px 6px; }
.message.user .message-role { text-align:right; }
.message p { white-space:pre-wrap; font-size:14px; line-height:24px; padding:12px 16px; background:var(--sidebar); border-radius:16px 16px 16px 4px; overflow-wrap:anywhere; }
.message.user p { background:var(--selection-bg); border-radius:16px 16px 4px 16px; }
.dialogue-more { align-self:flex-end; font-size:12px; }
#notifications { position:fixed; inset:auto; margin:0; padding:0; border:0; background:transparent; color:var(--text); overflow:visible; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; z-index:40; }
.notification { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; gap:8px; width:fit-content; max-width:100%; padding:9px 12px; border:1px solid var(--soft-line); border-radius:12px; background:var(--sidebar); box-shadow:0 2px 8px #00000008; font-size:12px; line-height:20px; overflow-wrap:anywhere; }
.notification .icon { width:16px; height:16px; color:var(--secondary); }
.notification[data-kind="processing"] .icon, #refresh[aria-busy="true"] .icon { animation:notification-spin 1.2s linear infinite; }
@keyframes notification-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .notification .icon, #refresh .icon { animation:none!important; } }
#login { min-height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) clamp(340px,27vw,420px); grid-template-rows:auto 1fr; }
.login-brand { grid-column:1; grid-row:1; z-index:1; padding:32px; }
.login-visual { grid-column:1; grid-row:1/3; position:relative; min-width:0; min-height:0; overflow:hidden; isolation:isolate; background-image:radial-gradient(circle,var(--dot) .7px,transparent .8px); background-size:24px 24px; background-position:12px 12px; }
.login-visual[data-ripple-ready] { background-image:none; }
#login-ripple { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.login-panel { grid-column:2; grid-row:1/3; min-width:0; min-height:100dvh; padding:40px 32px 28px; display:grid; grid-template-rows:1fr auto 1fr; background:var(--sidebar); }
.login-form { grid-row:2; min-width:0; }
.login-form h1 { font-size:24px; line-height:32px; font-weight:500; letter-spacing:-.5px; }
.login-description { color:var(--secondary); font-size:14px; line-height:24px; margin:12px 0 28px; }
.login-form label { display:block; margin-bottom:8px; font-size:12px; }
.login-form input { width:100%; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.primary { background:var(--text); color:var(--white); border-color:var(--text); }
.primary:hover:not(:disabled) { background:#444; border-color:#444; }
.primary:focus-visible,.danger:focus-visible { outline-color:var(--white); }
.danger { background:var(--danger); color:var(--white); border-color:var(--danger); }
.danger:hover:not(:disabled) { background:var(--danger-hover); border-color:var(--danger-hover); }
.login-form .primary { width:100%; margin-top:16px; }
#key-help { color:var(--secondary); font-size:12px; line-height:20px; margin-top:16px; }
#login-error { color:#a04737; font-size:12px; line-height:20px; margin-top:12px; }
code { font-family:ui-monospace,monospace; font-size:12px; }
#session-modal { width:min(640px,calc(100vw - 40px)); max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--text); box-shadow:0 20px 80px #00000020; overflow:hidden; }
#session-modal[open] { display:flex; flex-direction:column; }
#session-modal[data-kind="dialogue"] { width:min(960px,calc(100vw - 40px)); height:min(84dvh,900px); }
#session-modal::backdrop { background:#24242445; }
#session-modal > .section-bar { padding:20px 18px 16px 24px; min-height:72px; flex-shrink:0; }
.modal-content { min-height:0; padding:0 24px 24px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.modal-description { font-size:14px; line-height:24px; margin-bottom:16px; }
.instruction { margin:0; padding:16px; background:var(--sidebar); border-radius:12px; white-space:pre-wrap; overflow-wrap:anywhere; user-select:text; }
.instruction code { font-size:13px; line-height:22px; }
.dialog-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; }
.dialog-actions > p,.dialog-actions > time { flex:1 1 180px; margin-right:auto; }

/* Dialog rhythm: 24px between sections, 12px within; shared controls on the right. */
.dialog-stack { display:flex; flex-direction:column; gap:24px; }
.dialog-section { display:flex; flex-direction:column; gap:12px; min-width:0; }
.dialog-stack h3 { font-size:14px; line-height:22px; font-weight:500; }
.dialog-description { color:var(--secondary); font-size:13px; line-height:22px; }
.dialog-lead { font-size:14px; line-height:24px; }
.dialog-card { padding:20px; border:1px solid var(--soft-line); border-radius:12px; }
.dialog-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; font-size:13px; line-height:22px; list-style:none; border-radius:4px; }
.dialog-disclosure > summary::-webkit-details-marker { display:none; }
.dialog-disclosure > summary .icon { width:16px; height:16px; color:var(--secondary); }
.dialog-disclosure[open] > summary .icon { transform:rotate(180deg); }
.disclosure-body { margin-top:12px; }
.session-follow-up { min-height:38px; width:100%; white-space:normal; overflow-wrap:anywhere; text-align:left; }
.command-block { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:12px; border-radius:12px; background:var(--sidebar); }
.command-block pre { flex:1 1 240px; min-width:0; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:22px; user-select:text; }
.command-block > .dialog-actions { margin-left:auto; }

.install-steps { display:flex; flex-direction:column; gap:24px; counter-reset:install; list-style:none; padding:0; margin:0; }
.install-steps > li { counter-increment:install; }
.install-steps h3::before { content:counter(install) ". "; color:var(--secondary); }
.settings-version { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; padding-top:20px; border-top:1px solid var(--soft-line); color:var(--secondary); font-size:12px; line-height:20px; }
.settings-content .project-settings { padding-top:0; margin-top:0; border-top:0; }
.login-footer { grid-row:3; align-self:end; display:flex; flex-direction:column; gap:16px; padding-top:28px; }
.login-install { color:var(--secondary); font-size:12px; line-height:22px; }
.text-button { display:inline; padding:0; min-height:0; border:0; border-radius:2px; background:transparent; font-size:inherit; font-weight:400; line-height:inherit; text-decoration:underline; text-underline-offset:3px; }
.text-button:hover { background:transparent; color:var(--text); }
.copy-footer { margin-top:24px; }
.library-trigger { position:absolute; top:20px; left:24px; display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border:0; border-radius:10px; background:var(--sidebar); box-shadow:0 2px 8px #00000008; font-size:13px; z-index:7; }
.library-trigger .icon { width:18px; height:18px; }
.library-chevron .icon { width:16px; height:16px; transition:transform 120ms; }
.library-trigger[aria-expanded="true"] .library-chevron .icon { transform:rotate(180deg); }
#library-drawer { position:absolute; top:68px; left:24px; width:min(420px,calc(100% - 48px)); max-height:min(60%,540px); padding:16px; border:1px solid var(--soft-line); border-radius:16px; background:var(--sidebar); box-shadow:0 12px 40px #00000016; display:flex; flex-direction:column; z-index:12; }
#library-drawer > .section-bar { flex-shrink:0; margin-bottom:8px; padding-left:4px; }
.drawer-title { display:flex; align-items:center; gap:8px; }
#library-count { color:var(--secondary); font-size:12px; }
#library-message { padding:12px 4px; color:var(--secondary); font-size:13px; line-height:22px; }
#library-nodes { overflow:auto; min-height:0; padding:3px; scrollbar-width:thin; overscroll-behavior:contain; }
.library-entry { display:grid; grid-template-columns:18px minmax(0,1fr); gap:6px 10px; width:100%; min-height:70px; padding:12px; margin-bottom:8px; border:1px solid transparent; border-radius:10px; text-align:left; background:var(--surface); }
.library-entry:last-child { margin-bottom:0; }
.library-entry > .icon { width:16px; height:16px; margin-top:2px; color:var(--secondary); }
.library-entry strong { font-size:13px; line-height:20px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-entry .node-meta { grid-column:2; }
.language-setting { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--secondary); white-space:nowrap; }
.language-setting select { max-width:100px; padding:3px 6px; border:1px solid var(--soft-line); border-radius:8px; background:transparent; color:var(--text); cursor:pointer; }
.login-language { align-self:flex-start; }
.preferences-language { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0; min-height:40px; font-size:14px; }
.preferences-language select { min-height:40px; font-size:13px; padding:8px 12px; border:1px solid var(--soft-line); border-radius:10px; background:var(--sidebar); color:var(--text); }
#session-modal[data-kind="settings"],#session-modal[data-kind="account"] { width:min(480px,calc(100vw - 40px)); }
#session-modal[data-kind="projects"] { width:min(500px,calc(100vw - 40px)); }
#session-modal[data-kind="connection"] { width:min(620px,calc(100vw - 40px)); }
@media (max-width:1100px) { #workspace { grid-template-columns:232px minmax(0,1fr); } }
@media (max-width:760px) {
  #workspace { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  #sidebar { display:grid; grid-template-columns:1fr auto; gap:8px 12px; padding:16px 12px 8px; }
  .sidebar-top { margin:0; padding:0 4px; align-self:start; }
  .sidebar-heading { grid-column:1/-1; margin:0; padding:0 4px; }
  #project-list { grid-row:3; }
  .sidebar-footer { grid-column:2; grid-row:1; align-items:flex-end; gap:0; padding:0; min-width:0; }
  .sidebar-action { width:auto; min-height:32px; padding:4px 8px; gap:8px; font-size:12px; }
  .sidebar-action .icon { width:16px; height:16px; }
  #identity { margin:0; padding:0; max-width:100%; }
  #account-name { max-width:min(160px,100%); min-height:36px; padding:6px 8px; gap:8px; }
  #account-label { font-size:12px; }
  #project-list { grid-column:1/-1; display:flex; gap:4px; overflow-x:auto; }
  .project-item { width:auto; flex-shrink:0; max-width:220px; min-height:36px; padding:6px 10px; margin:0; gap:8px; }
  .canvas-workspace { min-height:0; }
  .detail-panel { top:0; right:0; bottom:0; max-width:100%; width:380px; border-radius:0; }
  .detail-content { padding-left:20px; padding-right:20px; }
  .canvas-dock { bottom:20px; gap:2px; padding:4px; }
  .canvas-dock .icon-button { width:36px; height:36px; }
  #project-list.projects-empty { padding:12px 16px; gap:4px; }
  .library-trigger { left:16px; }
  #library-drawer { left:16px; width:min(420px,calc(100% - 32px)); }
  #session-modal,#session-modal[data-kind] { width:calc(100vw - 24px); max-height:calc(100dvh - 48px); border-radius:16px; }
  #session-modal[data-kind="dialogue"] { height:calc(100dvh - 48px); }
  .modal-content { padding:0 16px 20px; }
  #session-modal > .section-bar { padding:16px 10px 12px 16px; min-height:64px; }
  .instruction { padding:16px; }
  .message { max-width:94%; }
  #login { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; background:var(--sidebar); }
  .login-brand { padding:24px; }
  .login-visual { display:none; }
  .login-panel { grid-column:1; grid-row:2; min-height:0; padding:24px 24px 28px; }
  .login-form { width:min(100%,360px); justify-self:center; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }
@media (max-width:380px) {
  .canvas-dock { gap:0; }
  .canvas-dock .icon-button { width:34px; }
  .control-divider { margin:0 3px; }
}

/* Small setup surfaces share the existing dialog and sidebar visual language. */
.account-content { display:flex; flex-direction:column; gap:24px; }
.account-content h3 { margin:0; font-size:14px; line-height:22px; font-weight:500; }
.account-field { display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:20px; }
.account-field input, .account-field select { width:100%; height:40px; padding:9px 12px; border:1px solid var(--button-line); border-radius:10px; background:var(--surface); }
.account-error { color:var(--secondary); font-size:13px; line-height:20px; }
.account-error:empty { display:none; }
.account-footer,.project-settings { border-top:1px solid var(--soft-line); padding-top:20px; margin-top:0; }
.project-settings > div:empty { display:none; }
.project-settings p + .dialog-actions { margin-top:16px; }
.project-settings p { line-height:22px; }
.device-list { display:flex; flex-direction:column; }
.project-folders,.folder-list { display:flex; flex-direction:column; gap:0; }
.project-folders > :empty { display:none; }
.folder-row { display:block; padding:12px 0; border-bottom:1px solid var(--soft-line); }
.folder-row:last-child { border-bottom:0; }
.folder-row > summary { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:baseline; list-style:none; cursor:pointer; font-size:13px; line-height:22px; }
.folder-row > summary::-webkit-details-marker { display:none; }
.folder-row .folder-path { display:block; padding-top:8px; color:var(--secondary); }
.folder-row strong { font-size:13px; font-weight:500; }
.folder-row code { flex-basis:100%; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; line-height:20px; }
.device-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--soft-line); }
.device-row:last-child { border-bottom:0; }
.device-row strong { font-size:13px; line-height:20px; font-weight:500; }
.device-row > div { flex:1; min-width:0; overflow-wrap:anywhere; }
.device-row button { flex-shrink:0; }
.device-row small { display:block; margin-top:4px; color:var(--secondary); font-size:12px; line-height:20px; }
.profile-editor { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:end; }
.share-content { gap:24px; }
.shared-folders { padding-top:24px; border-top:1px solid var(--soft-line); }
.share-content h3 { margin:0; }
.share-section > :empty { display:none; }
.share-summary,.share-result { display:flex; flex-direction:column; gap:24px; }
.copy-field { display:flex; flex-direction:column; gap:8px; }
.share-summary { gap:4px; }
.share-summary strong { font-size:16px; line-height:24px; font-weight:500; overflow-wrap:anywhere; }
#provider-login { width:100%; margin:0; }
#key-help { color:var(--secondary); font-size:13px; margin-top:16px; }

.authorization-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.connection-card { display:flex; flex-direction:column; gap:24px; }
.connection-folder { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0; color:var(--secondary); font-size:12px; line-height:20px; }
.connection-folder-line { overflow-wrap:anywhere; }
.connection-path { text-decoration:none; white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; text-align:left; color:var(--text); }
.project-entry { --entry-height:220px; position:relative; container-type:inline-size; min-height:var(--entry-height); }
.project-entry[data-mode="membership"] { --entry-height:156px; }
.project-entry-choices { display:flex; flex-direction:column; gap:10px; }
.project-entry-choice { display:flex; align-items:center; gap:14px; width:100%; min-height:66px; padding:18px; border:1px solid var(--soft-line); border-radius:11px; background:var(--sidebar); text-align:left; font-size:15px; line-height:24px; font-weight:500; }
.project-entry-choice:hover:not(:disabled) { background:var(--hover); }
.project-entry-choice:disabled { opacity:.4; cursor:default; }
.project-entry-caption { flex:1; min-width:0; overflow-wrap:anywhere; }
.project-entry-choice > .icon { width:20px; height:20px; flex-shrink:0; }
.project-entry-arrow { color:var(--secondary); }
.project-entry[data-selected] { display:grid; grid-template-columns:144px minmax(0,1fr); align-items:start; }
.project-entry[data-selected] > .project-entry-choices { gap:6px; }
.project-entry[data-selected] > .project-entry-choices .project-entry-choice { min-height:44px; padding:10px 12px; gap:9px; font-size:13px; line-height:22px; border-color:transparent; background:transparent; font-weight:400; }
.project-entry[data-selected] > .project-entry-choices .project-entry-choice[aria-pressed="true"] { background:var(--sidebar); font-weight:500; }
.project-entry[data-selected] > .project-entry-choices .project-entry-choice:hover:not(:disabled) { background:var(--hover); }
.project-entry[data-selected] > .project-entry-choices .icon { width:16px; height:16px; }
.project-entry[data-selected] > .project-entry-choices .project-entry-arrow { display:none; }
.project-entry-forms { min-width:0; min-height:var(--entry-height); padding:6px 0 0 24px; margin-left:20px; border-left:1px solid var(--soft-line); }
.project-entry-form { display:flex; flex-direction:column; gap:12px; min-height:calc(var(--entry-height) - 6px); }
.project-entry-form .account-field { min-width:0; }
.project-entry-form input,.project-entry-form select { min-width:0; max-width:100%; font-size:13px; }
.project-entry-form .dialog-actions { margin-top:auto; padding-top:12px; }
.project-entry-hint { font-size:12px; line-height:20px; color:var(--secondary); overflow-wrap:anywhere; }
.project-entry-ghost { position:absolute; left:0; top:0; pointer-events:none; overflow:hidden; }
.project-entry-ghost .project-entry-caption { white-space:nowrap; overflow:hidden; }
@container (max-width:419px) {
  .project-entry[data-selected] > .project-entry-choices { grid-column:1/-1; flex-direction:row; gap:4px; margin-bottom:18px; }
  .project-entry[data-selected] > .project-entry-choices .project-entry-choice { flex:1; min-width:0; padding:8px 6px; gap:5px; font-size:12px; line-height:18px; }
  .project-entry[data-selected] > .project-entry-choices .icon { display:none; }
  .project-entry-forms { grid-column:1/-1; margin:0; padding:0; border:0; min-height:0; }
  .project-entry-form { min-height:0; }
  .project-entry-form .dialog-actions { margin-top:4px; }
  .project-entry-form .ui-button { width:100%; }
  .project-entry-form input,.project-entry-form select { font-size:16px; }
}

/* Fields reuse their border; other controls keep an inset keyboard cue. */
input:not([type="checkbox"],[type="radio"]):focus,select:focus,textarea:focus { outline:none; border-color:var(--focus-line); }

.processing-overview { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px 24px; }
.processing-overview > .dialog-section { flex:1 1 300px; gap:6px; }
.processing-overview > .dialog-actions { margin-left:auto; }
.processing-list { display:flex; flex-direction:column; gap:16px; }
.processing-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; }
.processing-state { color:var(--secondary); font-size:12px; line-height:20px; }
.processing-meta { display:flex; flex-wrap:wrap; gap:4px 16px; }
.processing-issue .dialog-disclosure { padding-top:8px; border-top:1px solid var(--soft-line); }
.processing-issue .dialog-disclosure > summary { color:var(--secondary); font-size:12px; }
.processing-history { padding-top:16px; border-top:1px solid var(--soft-line); }
.processing-history .disclosure-body { gap:16px; }
.processing-technical { display:block; white-space:pre-wrap; overflow-wrap:anywhere; line-height:20px; color:var(--secondary); }
.processing-error { padding:12px 16px; border-radius:12px; background:var(--sidebar); font-size:13px; line-height:22px; }
@media (max-width:760px) { .dialog-card { padding:16px; } .command-block pre { flex-basis:180px; } }
#notice button { pointer-events:auto; grid-column:2; justify-self:end; max-width:100%; }

#debug-login { width:100%; margin-top:12px; }

.share-result h3 { margin:0; }

#session-modal > .section-bar h2 { font-size:20px; line-height:28px; font-weight:500; }

@media (max-width:650px) { .profile-editor { grid-template-columns:minmax(0,1fr); } .device-row { flex-wrap:wrap; gap:8px 12px; } .device-row > div { flex-basis:130px; } .device-row > button { margin-left:auto; } .account-field input { font-size:16px; } }

.session-action[aria-pressed="true"] > .icon { fill:currentColor; }