:root {
  --canvas: #f7f7f5;
  --ink: #1d1d1f;
  --muted: #7a7a7d;
  --hairline: rgba(22, 22, 24, .11);
  --surface: rgba(255, 255, 255, .9);
  --accent: #5061c9;
  --dot: rgba(29, 29, 31, .10);
  --pan-x: 0px;
  --pan-y: 0px;
  --grid-size: 24px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { color: var(--ink); background: var(--canvas); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "PingFang SC", sans-serif; letter-spacing: 0; }
button, input, textarea { font: inherit; }
button { touch-action: manipulation; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.canvas { position: relative; width: 100%; height: 100%; overflow: hidden; outline: none; cursor: grab; user-select: none; background-color: var(--canvas); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.2px); background-position: var(--pan-x) var(--pan-y); background-size: var(--grid-size) var(--grid-size); }
.canvas.is-panning { cursor: grabbing; }
.canvas.is-dragging-file { cursor: copy; }
.world { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.mobile-inbox { display: none; }

.floating { position: fixed; z-index: 20; display: flex; align-items: center; border: 1px solid var(--hairline); background: var(--surface); box-shadow: 0 8px 28px rgba(20, 20, 22, .08), inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }
.brand-bar { top: 20px; left: 20px; height: 44px; gap: 10px; padding: 0 13px; border-radius: 10px; }
.brand-bar strong { font-size: 14px; font-weight: 600; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.search-tools { position: fixed; top: 72px; left: 20px; z-index: 24; width: min(350px, calc(100vw - 40px)); }
.search-bar { position: relative; width: 100%; min-height: 42px; padding: 3px 4px 3px 12px; border-radius: 10px; }
.search-bar > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--muted); }
.search-bar input { min-width: 0; flex: 1; height: 34px; padding: 0 9px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.search-bar input::-webkit-search-cancel-button { display: none; }
.search-bar input::placeholder { color: #929296; }
.search-filter-button, .search-clear-button { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.search-filter-button:hover, .search-clear-button:hover, .search-filter-button.is-active { background: rgba(29,29,31,.07); color: var(--ink); }
.search-filter-button svg, .search-clear-button svg { width: 16px; height: 16px; }
.search-filter-button span { position: absolute; top: 1px; right: 1px; min-width: 14px; height: 14px; display: grid; place-items: center; padding: 0 3px; border: 2px solid white; border-radius: 7px; background: var(--accent); color: white; font-size: 8px; font-weight: 700; }
.search-filter-button span[hidden], .search-clear-button[hidden] { display: none; }
.filter-panel { position: relative; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 7px; padding: 14px; border-radius: 10px; align-items: end; }
.filter-panel[hidden] { display: none; }
.filter-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.filter-panel label[hidden] { display: none; }
.filter-panel select { width: 100%; height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--hairline); border-radius: 7px; outline: 0; background: rgba(255,255,255,.82); color: var(--ink); font-size: 12px; cursor: pointer; }
.filter-panel select:focus { border-color: rgba(80,97,201,.7); box-shadow: 0 0 0 3px rgba(80,97,201,.1); }
.filter-panel button { height: 36px; border: 1px solid var(--hairline); border-radius: 7px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.filter-panel button:hover { background: rgba(29,29,31,.06); color: var(--ink); }
.mark { width: 9px; height: 9px; border-radius: 3px; background: var(--ink); box-shadow: 5px 5px 0 #a7add8; transform: translate(-2px, -2px); }
.image-count { min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 6px; border-radius: 5px; background: rgba(29,29,31,.06); color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.view-switcher { top: 76px; right: 20px; height: 44px; gap: 2px; padding: 4px; border-radius: 10px; }
.view-button { min-width: 52px; height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.view-button:hover { color: var(--ink); }
.view-button.is-active { background: rgba(29,29,31,.08); color: var(--ink); font-weight: 600; }
.workflow-switcher { top: 20px; left: 50%; z-index: 25; display: flex; max-width: min(52vw, 720px); height: 38px; padding: 3px; overflow-x: auto; overflow-y: hidden; border-radius: 9px; transform: translateX(-50%); scrollbar-width: none; }
.workflow-switcher::-webkit-scrollbar { display: none; }
.workflow-button { height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; white-space: nowrap; }
.workflow-button:hover, .workflow-button.is-active { background: rgba(29,29,31,.08); color: var(--ink); }
.workflow-button.is-active { font-weight: 600; }
.workflow-button span { display: inline-grid; min-width: 16px; height: 16px; margin-left: 3px; place-items: center; padding: 0 4px; border-radius: 5px; background: #19191b; color: white; font-size: 8px; }
.workflow-manage-button { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-left: 1px solid rgba(29,29,31,.08); background: transparent; color: var(--muted); cursor: pointer; }
.workflow-manage-button:hover { color: var(--ink); background: rgba(29,29,31,.06); }
.workflow-manage-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.appearance-switcher { top: 128px; right: 20px; display: grid; gap: 8px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.appearance-switcher[hidden], .appearance-row[hidden] { display: none; }
.appearance-row { min-height: 38px; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--hairline); border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: 0 5px 18px rgba(28,28,30,.07); backdrop-filter: blur(16px); }
.appearance-row > span { width: 38px; padding-left: 6px; color: var(--muted); font-size: 10px; }
.appearance-row button { height: 30px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.appearance-row button.is-active { background: rgba(29,29,31,.08); color: var(--ink); font-weight: 600; }
.appearance-row[data-state="mixed"]::after { content: "混合"; padding: 0 7px; color: #77777b; font-size: 9px; }
.tool-bar { left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); height: 50px; gap: 2px; padding: 4px; border-radius: 12px; transform: translateX(-50%); }
.tool-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #4b4b4e; cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.tool-button:hover { color: var(--ink); background: rgba(29,29,31,.06); }
.tool-button:active { background: rgba(29,29,31,.1); }
.tool-button[href] { text-decoration: none; }
#organizeButton .restore-icon { display: none; }
#organizeButton.is-organized .organize-icon { display: none; }
#organizeButton.is-organized .restore-icon { display: block; }
.divider { width: 1px; height: 20px; margin: 0 3px; background: var(--hairline); }
.zoom-value { min-width: 55px; height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.zoom-value:hover { color: var(--ink); background: rgba(29,29,31,.06); }
.selection-bar { top: 66px; left: 50%; min-height: 44px; max-width: calc(100vw - 320px); gap: 10px; padding: 2px 3px 2px 13px; border-radius: 10px; transform: translateX(-50%); }
.selection-bar[hidden] { display: none; }
.selection-bar > span:first-child { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.selection-size { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.open-link-button, .selection-action-button { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; border-radius: 7px; background: var(--ink); color: white; font-size: 12px; cursor: pointer; text-decoration: none; }
.open-link-button[hidden], .selection-action-button[hidden] { display: none; }
.open-link-button svg, .selection-action-button svg { width: 15px; height: 15px; }
.secondary-selection-action { border: 1px solid var(--hairline); background: white; color: var(--ink); }
.link-mode-switcher { display: flex; gap: 2px; padding: 3px; border-radius: 7px; background: rgba(29,29,31,.07); }
.link-mode-switcher[hidden] { display: none; }
.link-mode-switcher button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.link-mode-switcher button.is-active { background: white; color: var(--ink); box-shadow: 0 1px 3px rgba(20,20,22,.12); }

.empty-cue { position: fixed; left: 50%; top: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -54%); text-align: center; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; }
.empty-cue[hidden] { display: none; }
.empty-icon { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255,255,255,.64); color: #606064; box-shadow: 0 10px 32px rgba(20,20,22,.06); }
.empty-icon svg { width: 26px; height: 26px; }
.empty-cue h1 { margin: 0; font-size: 20px; font-weight: 550; line-height: 1.3; }
.empty-cue p { display: flex; gap: 4px; margin: 12px 0 0; }
kbd { min-width: 26px; height: 24px; display: grid; place-items: center; padding: 0 7px; border: 1px solid var(--hairline); border-bottom-color: rgba(22,22,24,.18); border-radius: 6px; background: rgba(255,255,255,.62); color: var(--muted); font: 11px ui-monospace, "SF Mono", monospace; }

.account-button { top: 20px; right: 20px; min-width: 156px; height: 46px; gap: 10px; padding: 5px 13px 5px 6px; border-radius: 10px; cursor: pointer; text-align: left; }
.account-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f7f5ee; color: #657b5b; font: 700 13px ui-monospace,"SF Mono",monospace; box-shadow: inset 0 0 0 1px rgba(22,22,24,.09); }
.account-button.is-signed-in .account-avatar { background: #8faa80; color: white; }
.account-copy { min-width: 0; display: grid; gap: 2px; }
.account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { max-width: 102px; font-size: 11px; }.account-copy small { color: var(--muted); font-size: 9px; }

.canvas-guide { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.canvas-guide[hidden] { display: none; }
.canvas-guide-close { position: absolute; left: calc(50% + 292px); top: calc(50% - 212px); z-index: 2; width: 30px; height: 30px; border: 1px solid var(--hairline); border-radius: 50%; background: rgba(255,255,255,.9); color: var(--muted); cursor: pointer; pointer-events: auto; }
.canvas-guide-card { position: absolute; width: 220px; min-height: 144px; display: grid; align-content: center; gap: 9px; padding: 24px; border: 1px solid rgba(22,22,24,.12); border-radius: 5px; box-shadow: 9px 11px 0 rgba(29,29,31,.07); pointer-events: auto; }
.canvas-guide-card small { font: 700 9px ui-monospace,"SF Mono",monospace; opacity: .55; }
.canvas-guide-card strong { font-family: "Songti SC","STSong",serif; font-size: 23px; font-weight: 600; }
.canvas-guide-card span { color: rgba(29,29,31,.66); font-size: 10px; line-height: 1.6; }
.canvas-guide-card span kbd { display: inline-grid; margin-right: 3px; }
.guide-copy { left: calc(50% - 330px); top: calc(50% - 190px); background: #f5f2e9; transform: rotate(-2deg); }
.guide-paste { left: calc(50% - 80px); top: calc(50% - 115px); background: #e4c46b; transform: rotate(1deg); }
.guide-return { left: calc(50% + 145px); top: calc(50% + 20px); background: #8faa80; color: white; transform: rotate(-1deg); }
.guide-return span { color: rgba(255,255,255,.78); }

.welcome-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: auto; padding: 32px; background: rgba(40,40,42,.2); backdrop-filter: blur(8px) saturate(.82); -webkit-backdrop-filter: blur(8px) saturate(.82); }
.welcome-screen[hidden] { display: none; }
.auth-return-screen { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; background: rgba(40,40,42,.2); backdrop-filter: blur(8px) saturate(.82); -webkit-backdrop-filter: blur(8px) saturate(.82); }
.auth-return-screen[hidden] { display: none; }
.auth-return-card { width: min(460px,100%); padding: 48px; border: 1px solid rgba(255,255,255,.68); border-radius: 8px; background: rgba(249,247,240,.9); box-shadow: 0 28px 80px rgba(20,20,22,.2), inset 0 0 0 1px rgba(24,24,26,.08); text-align: center; }
.auth-return-mark { width: 42px; height: 42px; display: block; margin: 0 auto 25px; border: 2px solid rgba(113,142,100,.22); border-top-color: #718e64; border-radius: 50%; animation: auth-return-spin 800ms linear infinite; }
.auth-return-screen[data-status="error"] .auth-return-mark { position: relative; border-color: #c8a195; animation: none; }
.auth-return-screen[data-status="error"] .auth-return-mark::before, .auth-return-screen[data-status="error"] .auth-return-mark::after { content: ""; position: absolute; left: 10px; top: 18px; width: 18px; height: 2px; background: #9a5848; transform: rotate(45deg); }
.auth-return-screen[data-status="error"] .auth-return-mark::after { transform: rotate(-45deg); }
.auth-return-kicker { color: #718e64; font: 700 9px ui-monospace,"SF Mono",monospace; letter-spacing: .08em; }
.auth-return-card h1 { margin: 18px 0 10px; font-family: "Songti SC","STSong",serif; font-size: 34px; }
.auth-return-card p { margin: 0 auto; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-return-card button { margin-top: 26px; }
@keyframes auth-return-spin { to { transform: rotate(360deg); } }
.welcome-layout { width: min(760px,calc(100vw - 48px)); }
.welcome-copy { position: relative; padding: 46px 50px 42px; border: 1px solid rgba(255,255,255,.68); border-radius: 9px; background: rgba(249,247,240,.88); box-shadow: 0 30px 90px rgba(20,20,22,.24), inset 0 0 0 1px rgba(24,24,26,.08); }
.welcome-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #77746d; cursor: pointer; }
.welcome-close:hover, .welcome-close:focus-visible { background: rgba(29,29,31,.06); color: var(--ink); outline: 0; }
.welcome-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.welcome-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 38px; font-size: 13px; }
.welcome-brand img { width: 24px; height: 24px; border-radius: 5px; }
.welcome-kicker { color: #718e64; font: 700 9px ui-monospace,"SF Mono",monospace; letter-spacing: .08em; }
.welcome-copy h1 { margin: 20px 0 20px; font-family: "Songti SC","STSong",Georgia,serif; font-size: 48px; font-weight: 600; line-height: 1.08; }
.welcome-copy>p { max-width: 430px; margin: 0 0 34px; color: #6f6d67; font-size: 13px; line-height: 1.8; }
.welcome-login-form { display: grid; gap: 8px; }
.welcome-login-form label { color: #77746d; font-size: 10px; }
.welcome-login-form>.welcome-email-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
.welcome-email-field { position: relative; min-width: 0; }
.welcome-login-form input { min-width: 0; height: 48px; padding: 0 14px; border: 1px solid rgba(22,22,24,.15); border-radius: 8px; outline: 0; background: rgba(255,255,255,.76); color: var(--ink); font-size: 14px; }
.welcome-email-field input { width: 100%; }
.welcome-login-form input:focus { border-color: #718e64; box-shadow: 0 0 0 3px rgba(113,142,100,.12); }
.welcome-login-form button { height: 48px; }
.welcome-email-suggestion { position: absolute; left: 0; right: 0; top: calc(100% + 7px); z-index: 3; height: auto !important; display: grid; gap: 3px; padding: 11px 13px; border: 1px solid rgba(22,22,24,.12); border-radius: 8px; background: rgba(255,255,255,.97); box-shadow: 0 12px 28px rgba(20,20,22,.13); color: var(--ink); cursor: pointer; text-align: left; }
.welcome-email-suggestion[hidden] { display: none; }
.welcome-email-suggestion:hover, .welcome-email-suggestion:focus-visible { background: #f1f3ed; outline: 0; }
.welcome-email-suggestion span { color: #85827b; font-size: 9px; font-weight: 500; }
.welcome-email-suggestion strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.auth-divider, .sync-auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: #99958d; font-size: 10px; }
.auth-divider::before, .auth-divider::after, .sync-auth-divider::before, .sync-auth-divider::after { content: ""; height: 1px; flex: 1; background: rgba(29,29,31,.12); }
.google-login-button { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(22,22,24,.16); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; }
.google-login-button:hover { background: #f8faf7; border-color: rgba(113,142,100,.55); }
.google-login-button:disabled { cursor: default; opacity: .55; }
.google-mark { width: 19px; height: 19px; display: grid; place-items: center; color: #4285f4; font: 700 17px Arial,sans-serif; }
.sync-auth-divider { margin: 16px 0 10px; }
.sync-auth-divider[hidden], .sync-google-login-button[hidden] { display: none; }
.welcome-guest-button { margin-top: 19px; padding: 0; border: 0; border-bottom: 1px solid rgba(29,29,31,.35); background: transparent; color: var(--ink); font-size: 12px; cursor: pointer; }
.welcome-install-button, .sync-install-button { border: 1px dashed rgba(80,97,201,.38); background: rgba(255,255,255,.5); color: var(--accent); cursor: pointer; }
.welcome-install-button { margin-top: 12px; min-height: 38px; padding: 0 13px; border-radius: 8px; font-size: 12px; }
.welcome-copy>small { display: block; max-width: 390px; margin-top: 18px; color: #8a8780; font-size: 9px; line-height: 1.6; }
.welcome-resources { margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(29,29,31,.12); }
.welcome-resources-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.welcome-resource-kicker { color: #718e64; font: 700 9px ui-monospace,"SF Mono",monospace; letter-spacing: .08em; }
.welcome-resources h2 { margin: 0; font-family: "Songti SC","STSong",Georgia,serif; font-size: 25px; font-weight: 600; }
.welcome-resources-heading p { flex-basis: 100%; margin: 5px 0 15px; color: #8a8780; font-size: 11px; }
.welcome-resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.welcome-resource-card { position: relative; min-height: 146px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px 18px 15px; border: 1px solid rgba(29,29,31,.11); border-radius: 8px; background: rgba(255,255,255,.52); color: var(--ink); text-decoration: none; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.welcome-resource-card:hover, .welcome-resource-card:focus-visible { border-color: rgba(113,142,100,.62); background: rgba(255,255,255,.84); outline: 0; transform: translateY(-2px); }
.resource-mobile { background: rgba(225,235,220,.68); }
.resource-plugin { background: rgba(239,226,188,.55); }
.resource-web { background: rgba(229,237,242,.64); }
.resource-code { background: rgba(237,229,232,.56); }
.resource-number { color: #77746d; font: 700 9px ui-monospace,"SF Mono",monospace; letter-spacing: .08em; }
.welcome-resource-card strong { margin-top: 10px; font-size: 15px; }
.welcome-resource-card>span:not(.resource-number) { max-width: 260px; margin-top: 6px; color: #77746d; font-size: 10px; line-height: 1.6; }
.welcome-resource-card em { margin-top: auto; padding-top: 12px; color: #718e64; font-size: 10px; font-style: normal; font-weight: 700; }
.resource-code .resource-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.resource-links a { color: #718e64; font-size: 10px; font-weight: 700; text-decoration: none; }
.resource-links a:hover, .resource-links a:focus-visible { text-decoration: underline; }

.migration-backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(27,27,29,.28); backdrop-filter: blur(8px); }
.migration-dialog { position: fixed; left: 50%; top: 50%; z-index: 89; width: min(560px,calc(100vw - 32px)); padding: 40px; border: 1px solid rgba(22,22,24,.14); border-radius: 8px; background: #f8f6ef; box-shadow: 0 30px 90px rgba(20,20,22,.2); transform: translate(-50%,-50%); }
.migration-backdrop[hidden], .migration-dialog[hidden] { display: none; }
.migration-close { position: absolute; right: 16px; top: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; }
.migration-close:hover { background: rgba(29,29,31,.06); }
.migration-kicker { color: #718e64; font: 700 9px ui-monospace,"SF Mono",monospace; letter-spacing: .08em; }
.migration-dialog h2 { margin: 14px 0 10px; font-family: "Songti SC","STSong",serif; font-size: 32px; }
.migration-dialog>p { color: #706d67; font-size: 12px; line-height: 1.7; }
.migration-stats { display: grid; grid-template-columns: repeat(3,1fr); margin: 26px 0; border-block: 1px solid var(--hairline); }
.migration-stats div { display: grid; gap: 4px; padding: 18px 0; text-align: center; }
.migration-stats div+div { border-left: 1px solid var(--hairline); }
.migration-stats strong { font: 600 26px Georgia,serif; }.migration-stats span { color: var(--muted); font-size: 9px; }
.migration-safety { padding: 14px; background: rgba(143,170,128,.12); color: #56634f !important; }
.migration-actions { display: flex; gap: 9px; margin-top: 25px; }

.account-migration { display: grid; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid rgba(113,142,100,.2); border-radius: 8px; background: rgba(143,170,128,.1); }
.account-migration[hidden] { display: none; }
.account-migration div { display: grid; gap: 4px; }.account-migration strong { font-size: 12px; }.account-migration span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.account-migration button { justify-self: start; min-height: 36px; font-size: 10px; }

.onboarding-cards { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 28px; background: rgba(237,236,231,.78); backdrop-filter: blur(14px); animation: onboarding-enter 420ms cubic-bezier(.2,.78,.2,1); }
.onboarding-cards[hidden] { display: none; }
.onboarding-shell { width: min(1080px, calc(100vw - 56px)); height: min(680px, calc(100vh - 56px)); min-height: 500px; overflow: hidden; border: 1px solid rgba(22,22,24,.14); border-radius: 8px; background: #f7f6f1; box-shadow: 0 32px 90px rgba(20,20,22,.16); }
.onboarding-header { height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid var(--hairline); }
.onboarding-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 12px; text-decoration: none; }
.onboarding-dismiss { justify-self: end; min-width: 48px; height: 32px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.onboarding-dismiss:hover { color: var(--ink); background: rgba(29,29,31,.06); }
.onboarding-guide { height: calc(100% - 62px); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.onboarding-copy { display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(40px,6vw,82px); }
.onboarding-index { margin-bottom: 24px; color: #718e64; font: 700 9px/1 ui-monospace,"SF Mono",monospace; letter-spacing: .08em; }
.onboarding-copy h1 { margin: 0; font-family: "Songti SC","STSong",Georgia,serif; font-size: clamp(46px,4.7vw,68px); font-weight: 600; line-height: 1.07; letter-spacing: 0; }
.onboarding-copy ol { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: guide; }
.onboarding-copy li { position: relative; display: grid; gap: 4px; padding: 13px 0 13px 34px; border-top: 1px solid var(--hairline); counter-increment: guide; }
.onboarding-copy li::before { content: counter(guide,decimal-leading-zero); position: absolute; left: 0; top: 15px; color: #718e64; font: 700 9px ui-monospace,monospace; }
.onboarding-copy li b { font-size: 12px; }.onboarding-copy li span { color: #77746d; font-size: 10px; line-height: 1.55; }
.onboarding-actions { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.onboarding-actions button { min-height: 42px; padding-inline: 17px; }
.onboarding-copy>small { margin-top: 16px; color: #8a8780; font-size: 9px; }
.onboarding-visual { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--hairline); background: #d2b6bd; }
.onboarding-note { position: absolute; display: grid; place-items: center; border: 1px solid rgba(22,22,24,.14); color: #222; font-family: "Songti SC","STSong",serif; box-shadow: 9px 11px 0 rgba(29,29,31,.08); }
.note-one { left: 11%; top: 15%; width: 150px; height: 112px; background: #f7f5ee; font-size: 26px; transform: rotate(-3deg); }
.note-two { right: 10%; top: 24%; width: 175px; height: 135px; background: #e4c46b; font-size: 29px; transform: rotate(2deg); }
.note-three { left: 17%; bottom: 25%; width: 210px; height: 145px; background: #8faa80; color: white; font-size: 32px; transform: rotate(-1deg); }
.note-four { right: 10%; bottom: 9%; width: 235px; height: 94px; background: #252527; color: white; font-size: 22px; transform: rotate(1deg); }
@keyframes onboarding-enter { from { opacity: 0; } }

.canvas-item { position: absolute; left: 0; top: 0; width: 300px; min-width: 72px; cursor: move; transform-origin: 0 0; touch-action: none; }
.canvas-item.is-selected { will-change: transform; }
.canvas-item::after { content: ""; position: absolute; inset: -5px; border: 1.5px solid transparent; border-radius: 9px; pointer-events: none; transition: border-color 120ms ease; }
.canvas-item.is-selected::after { border-color: var(--accent); }
.canvas-item.is-multi-selected::after { inset: -7px; border: 2px solid #151517; }
.selection-marquee { position: fixed; z-index: 18; border: 1.5px solid #151517; background: rgba(29,29,31,.08); pointer-events: none; }
.selection-marquee[hidden] { display: none; }
.canvas-item.is-new::after { inset: -7px; border: 2px solid #151517; border-radius: 10px; animation: new-item-pulse 900ms ease-in-out 3; }
.canvas-item.is-new::before { content: "刚刚添加"; position: absolute; left: 0; top: -34px; z-index: 4; padding: 6px 9px; border-radius: 5px; background: #151517; color: white; font-size: 10px; font-weight: 600; line-height: 1; pointer-events: none; }
.canvas-item.is-arriving { visibility: hidden; }
.canvas-item.is-duplicate-focus { transform-origin: center !important; animation: duplicate-focus 1050ms cubic-bezier(.2,.78,.2,1); }
.canvas-item.is-duplicate-focus::after { inset: -10px; border: 3px solid #151517; border-radius: 11px; animation: duplicate-focus-ring 1050ms ease-out; }
.arrival-ghost { margin: 0; pointer-events: none; transform-origin: center; will-change: transform, opacity; filter: drop-shadow(0 18px 22px rgba(20,20,22,.24)); }
.arrival-ghost::after { border-color: #151517; }
.arrival-ghost .resize-handle, .arrival-ghost .text-resize-handle, .arrival-ghost .item-caption { display: none !important; }
@keyframes new-item-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }
@keyframes duplicate-focus { 0%, 100% { scale: 1; } 34% { scale: 1.12; } 62% { scale: 1.07; } }
@keyframes duplicate-focus-ring { 0%, 100% { opacity: 0; } 16%, 72% { opacity: 1; } }
.canvas-item img { display: block; width: 100%; height: auto; border-radius: 5px; background: white; box-shadow: 0 14px 36px rgba(25,25,27,.13), 0 2px 7px rgba(25,25,27,.08); pointer-events: none; -webkit-user-drag: none; backface-visibility: hidden; }
.canvas-item video { display: block; width: 100%; height: auto; min-height: 120px; border-radius: 5px; background: #151517; box-shadow: 0 14px 36px rgba(25,25,27,.13), 0 2px 7px rgba(25,25,27,.08); }
.canvas-item.video-item { cursor: move; }
.video-drag-handle { position: absolute; left: 50%; top: 8px; z-index: 3; width: 34px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.82); box-shadow: 0 1px 4px rgba(0,0,0,.22); cursor: move; transform: translateX(-50%); }
.canvas-item.is-selected img { box-shadow: 0 16px 42px rgba(25,25,27,.17), 0 2px 8px rgba(25,25,27,.1); }
.resize-handle { position: absolute; right: -10px; bottom: -10px; z-index: 2; width: 22px; height: 22px; display: none; cursor: nwse-resize; }
.resize-handle::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.canvas-item.is-selected .resize-handle { display: block; }
.item-caption { display: none; position: absolute; left: 0; top: calc(100% + 9px); max-width: 100%; padding: 5px 8px; border-radius: 6px; background: rgba(29,29,31,.82); color: white; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.canvas-item.is-selected .item-caption { display: block; }

.text-item { min-width: 0; overflow: visible; border-radius: 6px; transform-origin: 0 0; }
.text-item::after { inset: -7px; border-radius: 9px; }
.text-block { width: 100%; height: 100%; overflow: hidden; color: #202022; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif; white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: 0; }
.text-item .item-caption, .text-item.is-selected .item-caption { display: none; }
.text-resize-handle { position: absolute; z-index: 8; display: none; pointer-events: auto; }
.text-item.is-selected .text-resize-handle { display: block; }
.text-card-item { overflow: hidden; border: 1px solid rgba(22,22,24,.12); background: #f1efe7; box-shadow: 0 14px 36px rgba(25,25,27,.1), 0 2px 7px rgba(25,25,27,.05); transition: border-color 140ms ease, box-shadow 140ms ease; cursor: move; }
.long-text-card { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding: 24px; color: #202022; isolation: isolate; }
.long-text-card::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .32; background-image: radial-gradient(rgba(44,39,31,.12) .45px, transparent .65px); background-size: 6px 6px; }
.long-text-type { width: fit-content; padding-bottom: 5px; border-bottom: 1px solid rgba(32,32,34,.24); color: rgba(32,32,34,.58); font-size: 9px; letter-spacing: .08em; }
.long-text-card h2 { align-self: end; margin: 0; font-family: "Songti SC", "STSong", Georgia, serif; font-size: 28px; font-weight: 600; line-height: 1.3; }
.long-text-open { display: block; color: inherit; transition: color 140ms ease; }
.text-card-item:hover .long-text-open { color: #3949aa; }
.long-text-card p { display: -webkit-box; margin: 0; overflow: hidden; color: rgba(32,32,34,.62); font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.text-card-item .item-caption, .text-card-item.is-selected .item-caption { display: none; }
.text-theme-dark { border-color: rgba(255,255,255,.12); background: #171719; box-shadow: 0 16px 40px rgba(10,10,12,.2), 0 2px 8px rgba(10,10,12,.16); }
.text-theme-dark .long-text-card { color: #f4f2eb; }
.text-theme-dark .long-text-card::after { background-image: radial-gradient(rgba(255,255,255,.09) .45px, transparent .65px); }
.text-theme-dark .long-text-type, .text-theme-dark .long-text-card p { color: rgba(244,242,235,.62); border-color: rgba(244,242,235,.2); }
.text-theme-dark:hover .long-text-open { color: #9eacff; }
.text-reader-backdrop { position: fixed; inset: 0; z-index: 68; display: grid; place-items: center; padding: 24px; background: rgba(27,27,29,.18); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.text-reader-backdrop[hidden] { display: none; }
.text-reader-dialog { position: relative; width: min(680px, calc(100vw - 48px)); height: min(760px, calc(100vh - 72px)); display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; border: 1px solid rgba(45,40,32,.08); border-radius: 8px; outline: 0; background: #f1efe7; color: #202022; box-shadow: 0 18px 55px rgba(25,22,17,.18); transform-origin: center; }
.text-reader-dialog::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .28; background-image: radial-gradient(rgba(44,39,31,.12) .45px, transparent .65px); background-size: 6px 6px; pointer-events: none; }
.text-reader-dialog > * { position: relative; z-index: 1; }
.text-reader-dialog.can-scroll::before { content: ""; position: absolute; left: 0; right: 8px; bottom: 0; z-index: 3; height: 36px; background: linear-gradient(transparent, #f1efe7 82%); pointer-events: none; }
.text-reader-dialog.text-reader-dark { border-color: rgba(255,255,255,.13); background: #171719; color: #f4f2eb; box-shadow: 0 34px 110px rgba(8,8,10,.38), 0 3px 12px rgba(8,8,10,.22); }
.text-reader-dialog.text-reader-dark::after { background-image: radial-gradient(rgba(255,255,255,.09) .45px, transparent .65px); }
.text-reader-dialog.text-reader-dark.can-scroll::before { background: linear-gradient(transparent, #171719); }
.text-reader-dialog.text-reader-paper { background: #f1efe7; color: #202022; }
.text-reader-header { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: start; gap: 24px; padding: 26px 28px 21px 30px; border-bottom: 1px solid rgba(32,32,34,.1); }
.text-reader-header h2 { display: -webkit-box; margin: 0; overflow: hidden; font-family: "Songti SC", "STSong", Georgia, serif; font-size: clamp(24px,2.6vw,28px); font-weight: 600; line-height: 1.28; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.text-reader-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: rgba(255,255,255,.28); color: inherit; cursor: pointer; opacity: .58; transition: opacity 140ms ease, background 140ms ease; }
.text-reader-close:hover, .text-reader-close:focus-visible { background: rgba(255,255,255,.62); opacity: 1; }
.text-reader-close svg { width: 16px; height: 16px; }
.text-reader-body { overflow: auto; padding: 25px 52px 72px; outline: 0; color: inherit; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif; font-size: clamp(17px,1.7vw,20px); font-weight: 400; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; overscroll-behavior: contain; scrollbar-color: rgba(40,36,30,.24) transparent; scrollbar-width: thin; }
.text-reader-body::-webkit-scrollbar { width: 4px; }
.text-reader-body::-webkit-scrollbar-track { background: transparent; }
.text-reader-body::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(40,36,30,.24); }
.text-reader-dark .text-reader-body { scrollbar-color: rgba(255,255,255,.22) transparent; }
.text-reader-dark .text-reader-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
.text-reader-dialog.text-reader-dark .text-reader-header { border-bottom-color: rgba(255,255,255,.13); }
.text-reader-dialog.text-reader-dark .text-reader-close { background: rgba(255,255,255,.06); }
.text-reader-dialog.text-reader-dark .text-reader-close:hover, .text-reader-dialog.text-reader-dark .text-reader-close:focus-visible { background: rgba(255,255,255,.12); }
.text-resize-handle::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(7px * var(--canvas-control-scale, 1)); height: calc(7px * var(--canvas-control-scale, 1)); border: calc(2px * var(--canvas-control-scale, 1)) solid white; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 calc(1px * var(--canvas-control-scale, 1)) var(--accent); transform: translate(-50%, -50%); }
.text-resize-nw, .text-resize-ne, .text-resize-se, .text-resize-sw { width: calc(24px * var(--canvas-control-scale, 1)); height: calc(24px * var(--canvas-control-scale, 1)); }
.text-resize-nw { left: calc(-12px * var(--canvas-control-scale, 1)); top: calc(-12px * var(--canvas-control-scale, 1)); cursor: nwse-resize; }.text-resize-ne { right: calc(-12px * var(--canvas-control-scale, 1)); top: calc(-12px * var(--canvas-control-scale, 1)); cursor: nesw-resize; }
.text-resize-se { right: calc(-12px * var(--canvas-control-scale, 1)); bottom: calc(-12px * var(--canvas-control-scale, 1)); cursor: nwse-resize; }.text-resize-sw { left: calc(-12px * var(--canvas-control-scale, 1)); bottom: calc(-12px * var(--canvas-control-scale, 1)); cursor: nesw-resize; }
.text-resize-n, .text-resize-s { left: calc(12px * var(--canvas-control-scale, 1)); right: calc(12px * var(--canvas-control-scale, 1)); height: calc(20px * var(--canvas-control-scale, 1)); cursor: ns-resize; }
.text-resize-n { top: calc(-10px * var(--canvas-control-scale, 1)); }.text-resize-s { bottom: calc(-10px * var(--canvas-control-scale, 1)); }
.text-resize-e, .text-resize-w { top: calc(12px * var(--canvas-control-scale, 1)); bottom: calc(12px * var(--canvas-control-scale, 1)); width: calc(20px * var(--canvas-control-scale, 1)); cursor: ew-resize; }
.text-resize-e { right: calc(-10px * var(--canvas-control-scale, 1)); }.text-resize-w { left: calc(-10px * var(--canvas-control-scale, 1)); }

.link-card { position: relative; aspect-ratio: 4 / 5; overflow: hidden; display: grid; grid-template-rows: 48% minmax(0, 1fr) auto; gap: 11px; padding: 22px; border: 1px solid rgba(22,22,24,.12); border-radius: 6px; background: #f1efe7; color: #202022; box-shadow: 0 14px 36px rgba(25,25,27,.1), 0 2px 7px rgba(25,25,27,.05); isolation: isolate; }
.link-card.has-purpose { grid-template-rows: 48% minmax(0, 1fr) auto auto; }
.link-card::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .32; background-image: radial-gradient(rgba(44,39,31,.12) .45px, transparent .65px); background-size: 6px 6px; pointer-events: none; }
.link-cover-image { grid-row: 1; position: relative; z-index: 1; min-width: 0; min-height: 0; background-image: var(--cover-image); background-position: center; background-size: cover; filter: grayscale(.82) sepia(.12) saturate(.68) contrast(.94); }
.link-cover-index, .link-title, .link-purpose, .link-card-footer { position: relative; z-index: 2; }
.link-cover-index { position: absolute; top: 18px; right: 20px; font: 8px ui-monospace, "SF Mono", monospace; opacity: .55; }
.link-title { grid-row: 2; align-self: start; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; color: inherit; font-family: "Songti SC", "STSong", "Noto Serif CJK SC", Georgia, serif; font-size: 25px; font-weight: 600; line-height: 1.32; text-decoration: none; overflow-wrap: anywhere; text-wrap: balance; }
.link-card.font-sans .link-title { font-family: "Hiragino Sans GB", "PingFang SC", sans-serif; font-size: 25px; font-weight: 500; line-height: 1.38; }
.link-card.font-fangsong .link-title { font-family: "FangSong", "STFangsong", serif; font-size: 28px; font-weight: 400; line-height: 1.4; }
.link-card.font-round .link-title { font-family: "Yuanti SC", "STYuanti-SC-Regular", "PingFang SC", sans-serif; font-size: 26px; font-weight: 400; line-height: 1.4; }
.link-title:hover { color: #5061c9; }
.link-purpose { grid-row: 3; min-width: 0; margin: 0; overflow: hidden; color: inherit; font-size: 10px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; opacity: .64; }
.link-card-footer { grid-row: 3; width: fit-content; padding: 5px 0; border-bottom: 1px solid rgba(32,32,34,.25); color: inherit; font-size: 9px; text-decoration: none; opacity: .58; }
.link-card.has-purpose .link-card-footer { grid-row: 4; }
.link-card-footer:hover { color: var(--ink); border-bottom-color: currentColor; }
.link-card.is-loading .link-cover-image { animation: breathe 1.1s ease-in-out infinite alternate; }
.tone-paper { background-color: #f1efe7; color: #27241f; }
.tone-stone { background-color: #d6d3cd; color: #202020; }
.tone-mist { background-color: #c5d0ce; color: #1e2928; }
.tone-pollen { background-color: #c9b66e; color: #282416; }
.tone-sage { background-color: #aeb49a; color: #22271f; }
.tone-rose { background-color: #c4a5a8; color: #302226; }
.tone-archive { background-color: #cdb18b; color: #2d241b; }
.cover-film .link-cover-image { width: 24%; justify-self: center; background-position: center; }
.cover-landscape .link-cover-image, .cover-specimen .link-cover-image { width: 100%; }
.cover-offset .link-cover-image { width: 62%; justify-self: end; }
.cover-center .link-cover-image { width: 34%; height: 72%; place-self: center; }
.cover-portrait .link-cover-image { width: 54%; justify-self: center; }
.cover-object .link-cover-image { width: 58%; justify-self: start; }
.cover-letter .link-cover-image { width: 76%; justify-self: center; opacity: .72; filter: sepia(.55) saturate(.6) contrast(.72); }
.mode-clean { grid-template-rows: minmax(0, 1fr) auto; gap: 11px; padding: 28px 26px 24px; background: #fff; color: #202022; }
.mode-clean.has-purpose { grid-template-rows: minmax(0, 1fr) auto auto; }
.mode-clean::after, .mode-clean .link-cover-image, .mode-clean .link-cover-index { display: none; }
.mode-clean .link-title { grid-row: 1; align-self: start; font-size: 27px; -webkit-line-clamp: 8; }
.mode-clean .link-purpose { grid-row: 2; }
.mode-clean .link-card-footer { grid-row: 2; }
.mode-clean.has-purpose .link-card-footer { grid-row: 3; }
.canvas-item.is-selected .link-card { box-shadow: 0 16px 42px rgba(25,25,27,.15), 0 2px 8px rgba(25,25,27,.08); }
.link-item .item-caption, .link-item.is-selected .item-caption { display: none; }
@keyframes breathe { from { opacity: .2; } to { opacity: 1; } }

.drop-state { position: fixed; inset: 12px; z-index: 40; display: grid; place-items: center; border: 1.5px dashed rgba(80,97,201,.7); border-radius: 16px; background: rgba(247,247,245,.78); color: var(--accent); opacity: 0; pointer-events: none; backdrop-filter: blur(6px); transition: opacity 150ms ease; }
.drop-state.is-visible { opacity: 1; }
.drop-state span { font-size: 18px; font-weight: 550; }
.toast { position: fixed; left: 50%; bottom: 84px; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; background: rgba(29,29,31,.92); color: white; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.15); opacity: 0; pointer-events: none; transform: translate(-50%, 8px); transition: opacity 180ms ease, transform 180ms ease; }
.toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast button { padding: 0; border: 0; background: transparent; color: #d9dcff; font: inherit; font-weight: 600; cursor: pointer; }
.toast-success-mark { display: none; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #718e64; color: #fff; font-size: 13px; font-weight: 700; }
.toast-success-mark:not([hidden]) { display: grid; animation: success-pop 220ms cubic-bezier(.2,.8,.2,1); }
.toast.is-capture-success { background: #718e64; color: #fff; }
@keyframes success-pop { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }

.capture-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(20,20,22,.28); backdrop-filter: blur(4px); }
.capture-dialog { position: fixed; left: 50%; top: 50%; z-index: 81; width: min(520px, calc(100vw - 28px)); padding: 20px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255,255,255,.97); box-shadow: 0 24px 70px rgba(20,20,22,.2); transform: translate(-50%, -50%); }
.capture-dialog[hidden], .capture-backdrop[hidden] { display: none; }
.install-backdrop { position: fixed; inset: 0; z-index: 82; background: rgba(20,20,22,.28); backdrop-filter: blur(4px); }
.install-dialog { position: fixed; left: 50%; top: 50%; z-index: 83; width: min(430px, calc(100vw - 28px)); padding: 22px; border: 1px solid var(--hairline); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: 0 24px 70px rgba(20,20,22,.2); transform: translate(-50%, -50%); }
.install-dialog[hidden], .install-backdrop[hidden] { display: none; }
.install-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.install-dialog h2 { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.3; }
.install-dialog-intro { margin: 14px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.install-handoff-status { margin: -8px 0 16px; padding: 10px 12px; border-radius: 10px; background: rgba(113,142,100,.12); color: #4f7044; font-size: 12px; line-height: 1.5; }
.install-steps { display: grid; gap: 9px; }
.install-steps[hidden] { display: none; }
.install-step { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; padding: 13px; border-radius: 12px; background: #f6f6f3; }
.install-step b { color: var(--accent); font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.install-step strong, .install-step span { display: block; }
.install-step strong { font-size: 13px; }
.install-step span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.install-native-prompt { width: 100%; margin-top: 14px; }
.install-dialog-hint { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.sync-entry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 9px; }
.sync-entry-actions .sync-install-button { min-height: 32px; padding: 0 10px; font-size: 11px; }
.welcome-install-button[hidden], .sync-install-button[hidden] { display: none; }
.mobile-focus-dialog, .mobile-canvas-back-button { display: none; }
.capture-dialog-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.capture-eyebrow { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.capture-dialog h2 { margin: 0; font-size: 19px; font-weight: 600; }
.capture-mode-switcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 18px; padding: 3px; border-radius: 9px; background: rgba(29,29,31,.06); }
.capture-mode-button { height: 36px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.capture-mode-button.is-active { background: white; color: var(--ink); font-weight: 600; box-shadow: 0 1px 4px rgba(20,20,22,.09); }
.capture-input-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.capture-dialog textarea { width: 100%; min-height: 150px; resize: vertical; padding: 13px; border: 1px solid var(--hairline); border-radius: 9px; outline: 0; background: #f8f8f6; color: var(--ink); font: 15px/1.5 inherit; }
.capture-dialog textarea:focus { border-color: rgba(80,97,201,.7); box-shadow: 0 0 0 3px rgba(80,97,201,.12); }
.link-purpose-group { margin-top: 14px; }
.link-purpose-group[hidden] { display: none; }
.link-purpose-group label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 600; }
.link-purpose-group label span { color: var(--muted); font-size: 10px; font-weight: 400; }
.link-purpose-group input { width: 100%; height: 42px; margin-bottom: 13px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 8px; outline: none; background: #f8f8f6; }
.link-purpose-group input:last-child { margin-bottom: 0; }
.link-purpose-group input:focus { border-color: rgba(80,97,201,.7); box-shadow: 0 0 0 3px rgba(80,97,201,.12); }
.capture-tag-group { margin-top: 16px; }
.capture-tag-group > label { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 600; }
.capture-tag-group > label span { color: var(--muted); font-size: 10px; font-weight: 400; }
.capture-tag-input-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; }
.capture-tag-input-row input { min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--hairline); border-radius: 7px; outline: 0; background: #f8f8f6; }
.capture-tag-input-row input:focus { border-color: rgba(80,97,201,.7); box-shadow: 0 0 0 3px rgba(80,97,201,.1); }
.capture-tag-input-row button { min-width: 58px; height: 38px; border: 1px solid var(--hairline); border-radius: 7px; background: white; color: var(--ink); cursor: pointer; }
.capture-tag-suggestions { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; margin-top: 9px; }
.capture-tag-chip { min-height: 25px; padding: 0 9px; border: 1px solid rgba(29,29,31,.12); border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.capture-tag-chip.is-selected { border-color: #1d1d1f; background: #1d1d1f; color: white; }
.image-capture-panel { width: 100%; min-height: 178px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed rgba(29,29,31,.2); border-radius: 9px; background: #f8f8f6; color: var(--ink); cursor: pointer; }
.image-capture-panel[hidden] { display: none; }
.image-capture-panel:hover { border-color: rgba(80,97,201,.55); background: #f6f6f4; }
.image-capture-panel svg { width: 25px; height: 25px; margin-bottom: 4px; color: var(--muted); }
.image-capture-panel strong { font-size: 13px; font-weight: 600; }
.image-capture-panel span { color: var(--muted); font-size: 11px; }
.capture-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.duplicate-backdrop { position: fixed; inset: 0; z-index: 69; background: rgba(20,20,22,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: dialog-fade 180ms ease-out; }
.duplicate-dialog { position: fixed; left: 50%; top: 50%; z-index: 70; width: min(390px, calc(100vw - 32px)); padding: 28px; border: 1px solid rgba(22,22,24,.1); border-radius: 8px; background: rgba(252,252,250,.97); box-shadow: 0 28px 80px rgba(20,20,22,.2); transform: translate(-50%, -50%); text-align: left; animation: dialog-enter 220ms cubic-bezier(.2,.78,.2,1); }
.duplicate-backdrop[hidden], .duplicate-dialog[hidden] { display: none; }
.duplicate-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 24px; border-radius: 8px; background: #1d1d1f; color: white; }
.duplicate-mark svg { width: 20px; height: 20px; }
.duplicate-dialog p { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 650; text-transform: uppercase; }
.duplicate-dialog h2 { margin: 0; font-size: 21px; font-weight: 620; line-height: 1.35; }
.duplicate-description { display: block; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.duplicate-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 28px; }
.duplicate-actions button { width: 100%; }
.storage-panel { top: 78px; right: 20px; z-index: 35; width: min(330px, calc(100vw - 40px)); display: block; padding: 18px; border-radius: 8px; }
.storage-panel[hidden] { display: none; }
.storage-panel header, .batch-dialog header { display: flex; align-items: flex-start; justify-content: space-between; }
.storage-panel header span, .batch-dialog header span { color: var(--muted); font-size: 10px; }
.storage-panel h2, .batch-dialog h2 { margin: 3px 0 0; font-size: 17px; }
.storage-meter { height: 6px; margin: 20px 0 16px; overflow: hidden; border-radius: 3px; background: rgba(29,29,31,.08); }
.storage-meter i { display: block; width: 0; height: 100%; background: #2f7550; transition: width 260ms ease; }
.storage-meter.is-warning i { background: #b45b45; }
.storage-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.storage-stats div { display: grid; gap: 4px; }
.storage-stats span { color: var(--muted); font-size: 10px; }
.storage-stats strong { font-size: 13px; font-weight: 600; }
.storage-panel p { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); color: var(--muted); font-size: 11px; line-height: 1.6; }
.sync-panel { top: 78px; right: 20px; z-index: 36; width: min(350px, calc(100vw - 40px)); max-height: calc(100dvh - 98px); display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; touch-action: pan-y; padding: 18px; border-radius: 8px; }
.sync-panel[hidden] { display: none; }
.sync-panel header { position: sticky; top: -18px; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; margin: -18px -18px 0; padding: 18px 18px 12px; background: linear-gradient(var(--surface) 78%, rgba(255,255,255,0)); }
.sync-panel header span { color: var(--muted); font-size: 10px; }
.sync-panel h2 { margin: 3px 0 0; font-size: 17px; }
.account-profile { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 10px; align-items: end; margin-top: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--hairline); }
.account-profile[hidden] { display: none; }
.account-profile-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #8faa80; color: white; font: 700 14px ui-monospace,"SF Mono",monospace; }
.account-profile label { display: grid; gap: 5px; color: var(--muted); font-size: 9px; }
.account-profile input { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 7px; outline: 0; background: white; color: var(--ink); font-size: 12px; }
.account-profile input:focus { border-color: #718e64; box-shadow: 0 0 0 3px rgba(113,142,100,.1); }
.account-profile button { min-height: 36px; padding-inline: 11px; font-size: 10px; }
.sync-status { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; margin-top: 20px; padding: 13px; border-radius: 7px; background: rgba(29,29,31,.045); }
.sync-status i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #999; }
.sync-status.is-ready i { background: #2f7550; }
.sync-status.is-error i { background: #b45b45; }
.sync-status div { display: grid; gap: 4px; }
.sync-status strong { font-size: 12px; }
.sync-status span { color: var(--muted); font-size: 10px; line-height: 1.45; }
.sync-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sync-actions button { min-width: 0; min-height: 38px; }
.sync-actions .sync-undo-migration { grid-column: 1 / -1; }
.sync-login { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.sync-login[hidden], .sync-actions[hidden] { display: none; }
.sync-login label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.sync-login input { width: 100%; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 8px; background: white; color: var(--ink); font: inherit; }
.sync-login button { align-self: end; min-height: 38px; padding-inline: 12px; font-size: 11px; }
.sync-mail-link { display: inline-flex; margin-top: 10px; color: var(--ink); font-size: 11px; text-decoration: underline; }
.sync-mail-link[hidden] { display: none; }
.sync-divider { height: 1px; margin: 18px 0; background: var(--hairline); }
.sync-entry { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px 0; }
.sync-entry strong { font-size: 12px; }
.sync-entry span { grid-row: 2; color: var(--muted); font-size: 10px; }
.sync-entry a { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--ink); font-size: 10px; }
.cloud-usage { display: grid; gap: 9px; margin-top: 14px; padding: 13px; border-radius: 8px; background: rgba(47,117,80,.07); }
.cloud-usage[hidden] { display: none; }
.cloud-usage > div:first-child { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.cloud-usage strong { font-size: 12px; }
.cloud-usage span, .cloud-usage p { color: var(--muted); font-size: 10px; }
.cloud-usage p { margin: 0; line-height: 1.5; }
.cloud-usage-meter { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(29,29,31,.09); }
.cloud-usage-meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: #2f7550; transition: width 240ms ease; }
.cloud-usage[data-level="warning"] .cloud-usage-meter i { background: #b58a32; }
.cloud-usage[data-level="urgent"] { background: rgba(180,91,69,.09); }
.cloud-usage[data-level="urgent"] .cloud-usage-meter i,
.cloud-usage[data-level="blocked"] .cloud-usage-meter i { background: #b45b45; }
.cloud-usage[data-level="blocked"] { background: rgba(180,91,69,.14); }
.capture-token-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.capture-token-actions[hidden] { display: none; }
.capture-token-actions button { min-height: 36px; padding: 0 11px; font-size: 10px; }
.capture-token-actions .text-button { border: 0; background: transparent; color: #9b4636; text-decoration: underline; }
@media (max-width: 700px) {
  .sync-panel {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom)));
    overflow-y: auto;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(29,29,31,.22);
  }
  .sync-panel header .tool-button,
  .sync-actions button,
  .sync-login button,
  .capture-token-actions button { min-width: 44px; min-height: 44px; }
  .sync-login { grid-template-columns: 1fr; }
  .sync-login input { height: 48px; font-size: 16px; }
  .sync-entry { min-height: 58px; align-items: center; }
  .sync-entry strong { font-size: 13px; }
  .sync-entry span, .sync-entry a, .cloud-usage span, .cloud-usage p { font-size: 12px; }
}

@media (min-width: 641px) and (max-height: 700px) {
  .onboarding-copy { padding-block: 28px; }
  .onboarding-index { margin-bottom: 16px; }
  .onboarding-copy h1 { font-size: 52px; }
  .onboarding-copy ol { margin-top: 18px; }
  .onboarding-copy li { padding-block: 10px; }
  .onboarding-copy li::before { top: 12px; }
  .onboarding-actions { margin-top: 16px; }
  .onboarding-copy > small { margin-top: 10px; }
}
.canvas-item[data-status="read"] { opacity: .72; }
.batch-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(20,20,22,.18); backdrop-filter: blur(8px); }
.batch-dialog { position: fixed; left: 50%; top: 50%; z-index: 80; width: min(430px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--hairline); border-radius: 8px; background: #fcfcfa; box-shadow: 0 28px 80px rgba(20,20,22,.2); transform: translate(-50%, -50%); }
.batch-dialog[hidden], .batch-backdrop[hidden] { display: none; }
.batch-dialog label { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 20px; font-size: 12px; font-weight: 600; }
.batch-dialog label span { color: var(--muted); font-size: 10px; font-weight: 400; }
.batch-dialog input { width: 100%; height: 42px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 7px; outline: 0; background: #f7f7f5; }
.batch-dialog input:focus { border-color: rgba(80,97,201,.7); box-shadow: 0 0 0 3px rgba(80,97,201,.1); }
.batch-dialog footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.tag-editor-hint { margin: 12px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.tag-editor-suggestions { margin-top: 14px; }
.tag-manage-backdrop { position: fixed; inset: 0; z-index: 82; background: rgba(20,20,22,.2); backdrop-filter: blur(8px); }
.tag-manage-dialog { position: fixed; left: 50%; top: 50%; z-index: 83; width: min(560px, calc(100vw - 32px)); max-height: min(680px, calc(100vh - 40px)); padding: 24px; overflow: hidden; border: 1px solid var(--hairline); border-radius: 10px; background: #fcfcfa; box-shadow: 0 28px 80px rgba(20,20,22,.2); transform: translate(-50%, -50%); }
.tag-manage-dialog[hidden], .tag-manage-backdrop[hidden] { display: none; }
.tag-manage-dialog header { display: flex; align-items: flex-start; justify-content: space-between; }
.tag-manage-dialog header span { color: var(--muted); font-size: 10px; }
.tag-manage-dialog h2 { margin: 3px 0 0; font-size: 18px; }
.tag-manage-dialog > p { margin: 12px 0 18px; color: var(--muted); font-size: 12px; }
.tag-manage-list { max-height: 480px; overflow-y: auto; border-top: 1px solid var(--hairline); }
.tag-manage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 62px; padding: 10px 2px; border-bottom: 1px solid var(--hairline); }
.tag-manage-name { min-width: 0; display: grid; gap: 3px; }
.tag-manage-name strong { overflow: hidden; text-overflow: ellipsis; font-size: 13px; white-space: nowrap; }
.tag-manage-name span { color: var(--muted); font-size: 10px; }
.tag-manage-actions { display: flex; gap: 4px; }
.tag-manage-actions button, .tag-manage-inline button { min-height: 30px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; }
.tag-manage-actions button:hover, .tag-manage-inline button:hover { background: rgba(29,29,31,.06); color: var(--ink); }
.tag-manage-actions button.danger:hover { color: #a83232; background: rgba(168,50,50,.08); }
.tag-manage-actions button:disabled { opacity: .3; cursor: default; }
.tag-manage-inline { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.tag-manage-inline input, .tag-manage-inline select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: 7px; outline: 0; background: white; }
.tag-manage-inline input:focus, .tag-manage-inline select:focus { border-color: rgba(80,97,201,.7); box-shadow: 0 0 0 3px rgba(80,97,201,.1); }
.tag-manage-inline button:first-of-type { background: var(--ink); color: white; }
.tag-manage-empty { padding: 32px 0; color: var(--muted); text-align: center; font-size: 12px; }
@keyframes dialog-fade { from { opacity: 0; } }
@keyframes dialog-enter { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); } }
.capture-dialog-footer[hidden] { display: none; }
.secondary-button, .primary-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.secondary-button { border: 1px solid var(--hairline); background: white; color: var(--ink); }
.primary-button { border: 1px solid var(--ink); background: var(--ink); color: white; }
.primary-button.is-synced { border-color: #2f7550; background: #2f7550; }
.primary-button.is-retry { border-color: #a44f45; background: #a44f45; }
.primary-button:disabled { cursor: default; opacity: .45; }
.secondary-button svg { width: 17px; height: 17px; }
.crop-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(20,20,22,.38); backdrop-filter: blur(5px); }
.crop-dialog { position: fixed; left: 50%; top: 50%; z-index: 91; width: min(680px, calc(100vw - 28px)); padding: 20px; border: 1px solid var(--hairline); border-radius: 12px; background: #f8f8f6; box-shadow: 0 26px 80px rgba(20,20,22,.25); transform: translate(-50%, -50%); }
.crop-dialog[hidden], .crop-backdrop[hidden] { display: none; }
.crop-dialog header, .crop-dialog footer { display: flex; align-items: center; justify-content: space-between; }
.crop-dialog header { margin-bottom: 16px; }
.crop-dialog header span { color: var(--muted); font-size: 10px; }
.crop-dialog h2 { margin: 3px 0 0; font-size: 18px; }
.crop-dialog footer { justify-content: flex-end; gap: 9px; margin-top: 18px; }
.crop-stage { position: relative; height: min(52vh, 440px); overflow: hidden; border-radius: 6px; background-color: #deded9; background-image: linear-gradient(45deg, #d2d2cd 25%, transparent 25%), linear-gradient(-45deg, #d2d2cd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d2d2cd 75%), linear-gradient(-45deg, transparent 75%, #d2d2cd 75%); background-position: 0 0, 0 8px, 8px -8px, -8px 0; background-size: 16px 16px; touch-action: none; }
.crop-stage > img { position: absolute; display: block; user-select: none; pointer-events: none; box-shadow: 0 8px 28px rgba(20,20,22,.16); }
.crop-frame { position: absolute; z-index: 2; border: 2px solid #fff; cursor: move; outline: 1px solid rgba(20,20,22,.45); box-shadow: 0 0 0 9999px rgba(20,20,22,.56); touch-action: none; }
.crop-frame:focus-visible { outline: 3px solid rgba(255,255,255,.82); outline-offset: 2px; }
.crop-grid-line { position: absolute; display: block; background: rgba(255,255,255,.48); pointer-events: none; }
.crop-grid-v1, .crop-grid-v2 { top: 0; bottom: 0; width: 1px; }
.crop-grid-v1 { left: 33.333%; } .crop-grid-v2 { left: 66.666%; }
.crop-grid-h1, .crop-grid-h2 { left: 0; right: 0; height: 1px; }
.crop-grid-h1 { top: 33.333%; } .crop-grid-h2 { top: 66.666%; }
.crop-handle { position: absolute; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; }
.crop-handle::after { content: ""; position: absolute; width: 10px; height: 10px; border-style: solid; border-color: white; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.crop-handle-nw { left: -12px; top: -12px; cursor: nwse-resize; } .crop-handle-nw::after { right: 2px; bottom: 2px; border-width: 3px 0 0 3px; }
.crop-handle-ne { right: -12px; top: -12px; cursor: nesw-resize; } .crop-handle-ne::after { left: 2px; bottom: 2px; border-width: 3px 3px 0 0; }
.crop-handle-sw { left: -12px; bottom: -12px; cursor: nesw-resize; } .crop-handle-sw::after { right: 2px; top: 2px; border-width: 0 0 3px 3px; }
.crop-handle-se { right: -12px; bottom: -12px; cursor: nwse-resize; } .crop-handle-se::after { left: 2px; top: 2px; border-width: 0 3px 3px 0; }
.crop-handle-w, .crop-handle-e { top: 50%; width: 28px; height: 52px; cursor: ew-resize; transform: translateY(-50%); }
.crop-handle-w { left: -14px; } .crop-handle-e { right: -14px; }
.crop-handle-w::after, .crop-handle-e::after { top: 50%; width: 3px; height: 22px; border: 0; border-radius: 2px; background: white; transform: translateY(-50%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.crop-handle-w::after { right: 5px; } .crop-handle-e::after { left: 5px; }
.crop-handle-n, .crop-handle-s { left: 50%; width: 52px; height: 28px; cursor: ns-resize; transform: translateX(-50%); }
.crop-handle-n { top: -14px; } .crop-handle-s { bottom: -14px; }
.crop-handle-n::after, .crop-handle-s::after { left: 50%; width: 22px; height: 3px; border: 0; border-radius: 2px; background: white; transform: translateX(-50%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.crop-handle-n::after { bottom: 5px; } .crop-handle-s::after { top: 5px; }
.crop-ratios { display: flex; gap: 7px; margin-top: 14px; }
.crop-ratios button { min-width: 58px; min-height: 36px; border: 1px solid var(--hairline); border-radius: 6px; background: white; color: var(--muted); cursor: pointer; }
.crop-ratios button.is-active { border-color: #252527; color: white; background: #252527; }
.crop-hint { margin: 11px 0 0; color: var(--muted); font-size: 11px; }

button:focus-visible, .canvas-item:focus-visible { outline: 3px solid rgba(80,97,201,.28); outline-offset: 2px; }

@media (max-width: 640px) {
  body { overflow: auto; background: #f7f7f5; }
  .text-reader-backdrop { padding: 0; }
  .text-reader-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .text-reader-header { padding: max(20px, env(safe-area-inset-top)) 18px 18px; }
  .text-reader-header h2 { font-size: 23px; }
  .text-reader-close { width: 44px; min-width: 44px; }
  .text-reader-body { padding: 25px 22px max(44px, env(safe-area-inset-bottom)); font-size: 17px; }
  .canvas { height: auto; min-height: 100vh; overflow: visible; background: #f7f7f5; background-image: none; cursor: default; }
  .world, .brand-bar, .search-tools, .view-switcher, .workflow-switcher, .appearance-switcher, .tool-bar, .selection-bar, .empty-cue, .account-button, .canvas-guide { display: none; }
  .welcome-screen { padding: 18px; }
  .welcome-layout { width: 100%; }
  .welcome-copy { width: auto; margin: 0; padding: 34px 24px 30px; }
  .welcome-brand { margin-bottom: 30px; }
  .welcome-copy h1 { margin-block: 18px 16px; font-size: 42px; }
  .welcome-copy>p { margin-bottom: 26px; font-size: 12px; }
  .welcome-login-form>.welcome-email-row { grid-template-columns: 1fr; }
  .welcome-email-suggestion { position: static; margin-top: 7px; }
  .welcome-login-form input, .welcome-login-form button { width: 100%; height: 48px; }
  .welcome-resources { margin-top: 31px; padding-top: 22px; }
  .welcome-resources h2 { font-size: 23px; }
  .welcome-resource-grid { grid-template-columns: 1fr; }
  .welcome-resource-card { min-height: 126px; }
  .migration-dialog { padding: 34px 24px 26px; }
  .migration-dialog h2 { padding-right: 24px; font-size: 28px; }
  .migration-actions { display: grid; }
  .onboarding-cards { padding: 10px; }
  .onboarding-shell { width: 100%; min-height: calc(100dvh - 20px); }
  .onboarding-header { height: 56px; padding: 0 14px; }
  .onboarding-guide { min-height: calc(100dvh - 76px); grid-template-columns: 1fr; grid-template-rows: 260px auto; }
  .onboarding-copy { justify-content: flex-start; grid-row: 2; padding: 32px 28px 36px; }
  .onboarding-index { margin-bottom: 20px; }
  .onboarding-copy h1 { font-size: 45px; }
  .onboarding-copy>p { margin-top: 20px; font-size: 12px; }
  .onboarding-actions { flex-wrap: wrap; margin-top: 25px; }
  .onboarding-actions button { min-height: 44px; }
  .onboarding-visual { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .note-one { left: 7%; top: 10%; width: 105px; height: 76px; font-size: 21px; }
  .note-two { right: 6%; top: 16%; width: 125px; height: 92px; font-size: 24px; }
  .note-three { left: 14%; bottom: 16%; width: 145px; height: 98px; font-size: 27px; }
  .note-four { right: 5%; bottom: 7%; width: 165px; height: 65px; font-size: 18px; }
  .mobile-inbox { display: block; min-height: 100vh; padding: max(24px, env(safe-area-inset-top)) 16px max(34px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, #f7f7f5 0%, #f2f1ed 100%); }
  .mobile-inbox-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 6px 2px 26px; }
  .mobile-inbox-kicker { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11px; letter-spacing: .04em; }
  .mobile-inbox-header h1 { margin: 0; font-family: "Songti SC", STSong, serif; font-size: 32px; letter-spacing: -.07em; }
  .mobile-inbox-settings { height: 34px; padding: 0 12px; border: 1px solid var(--hairline); border-radius: 9px; background: rgba(255,255,255,.7); color: var(--muted); font-size: 12px; }
  .mobile-inbox-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 9px; margin-bottom: 26px; }
  .mobile-inbox-actions button { height: 48px; border-radius: 13px; font-size: 14px; }
  .mobile-primary-action { border: 0; background: var(--ink); color: #fff; }
  .mobile-primary-action span { font-size: 20px; vertical-align: -1px; }
  .mobile-secondary-action { border: 1px solid var(--hairline); background: rgba(255,255,255,.68); color: var(--ink); }
  .mobile-install-action { grid-column: 1 / -1; border: 1px dashed rgba(80,97,201,.38); background: rgba(255,255,255,.48); color: var(--accent); }
  .mobile-install-action[hidden] { display: none; }
  .mobile-inbox-summary { display: flex; justify-content: space-between; align-items: baseline; padding: 0 2px 11px; border-bottom: 1px solid var(--hairline); }
  .mobile-inbox-summary strong { font-size: 15px; }
  .mobile-inbox-summary span { color: var(--muted); font-size: 12px; }
  .mobile-inbox-hint { margin: 9px 2px 0; color: var(--muted); font-size: 11px; }
  .mobile-inbox-list { display: grid; gap: 10px; padding-top: 12px; }
  .mobile-inbox-swipe { position: relative; overflow: hidden; border-radius: 16px; background: #d97867; }
  .mobile-inbox-item { position: relative; z-index: 1; display: grid; grid-template-columns: 54px minmax(0,1fr) 20px; gap: 12px; align-items: center; width: 100%; min-height: 78px; padding: 11px 12px; border: 1px solid rgba(22,22,24,.08); border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 5px 16px rgba(20,20,22,.04); text-align: left; transition: transform 180ms ease; }
  .mobile-inbox-swipe.is-swiped .mobile-inbox-item, .mobile-inbox-swipe.is-swiping .mobile-inbox-item { transform: translateX(var(--mobile-swipe-x, -92px)); }
  .mobile-inbox-swipe-delete { position: absolute; top: 0; right: 0; bottom: 0; width: 92px; border: 0; background: #d97867; color: white; font-size: 12px; }
  .mobile-inbox-thumb { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #ecebe6; color: #777; font-size: 24px; }
  .mobile-inbox-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-inbox-meta { min-width: 0; }
  .mobile-inbox-meta strong { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-inbox-meta span { display: block; overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-inbox-arrow { color: #aaa; font-size: 20px; }
  .mobile-inbox-empty { padding: 84px 30px; color: var(--muted); text-align: center; }
  .mobile-inbox-empty span { display: block; margin-bottom: 14px; font-size: 48px; }
  .mobile-inbox-empty strong { display: block; color: var(--ink); font-size: 17px; }
  .mobile-inbox-empty p { margin: 8px auto 0; font-size: 13px; line-height: 1.6; }
  body.mobile-show-canvas .mobile-inbox { display: none; }
  body.mobile-show-canvas { overflow: hidden; }
  body.mobile-show-canvas .canvas { height: 100%; min-height: 0; overflow: hidden; background-color: var(--canvas); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.2px); cursor: grab; }
  body.mobile-show-canvas .brand-bar, body.mobile-show-canvas .search-tools, body.mobile-show-canvas .view-switcher, body.mobile-show-canvas .workflow-switcher, body.mobile-show-canvas .appearance-switcher, body.mobile-show-canvas .tool-bar, body.mobile-show-canvas .selection-bar, body.mobile-show-canvas .empty-cue, body.mobile-show-canvas .account-button { display: none; }
  body.mobile-show-canvas .world { display: block; }
  body.mobile-show-canvas .empty-cue { display: none; }
  body.mobile-show-canvas .mobile-canvas-back-button { display: inline-flex; }
  .mobile-canvas-back-button { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px; z-index: 50; align-items: center; min-height: 40px; padding: 0 13px; border: 1px solid rgba(22,22,24,.12); border-radius: 12px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 13px; box-shadow: 0 6px 20px rgba(20,20,22,.08); }
  .mobile-focus-dialog { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; overflow-y: auto; background: #f7f7f5; }
  .mobile-focus-dialog[hidden] { display: none; }
  .mobile-focus-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 58px; padding: max(8px, env(safe-area-inset-top)) 16px 8px; border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,.8); }
  .mobile-focus-header > span { color: var(--muted); font-size: 12px; }
  .mobile-focus-back, .mobile-focus-close { border: 0; background: transparent; color: var(--ink); font-size: 14px; text-align: left; }
  .mobile-focus-close { justify-self: end; font-size: 25px; font-weight: 300; }
  .mobile-focus-content { flex: 1; padding: 28px 20px 22px; }
  .mobile-focus-type { color: var(--muted); font-size: 11px; }
  .mobile-focus-content h2 { margin: 10px 0 24px; font-size: 25px; line-height: 1.35; }
  .mobile-focus-text { margin: 0; white-space: pre-wrap; font-size: 17px; line-height: 1.8; }
  .mobile-focus-link { display: block; padding: 17px; border: 1px solid var(--hairline); border-radius: 13px; background: #fff; color: var(--accent); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .mobile-focus-media { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 14px; background: #eae9e4; }
  .mobile-focus-footer { padding: 14px 20px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); background: rgba(255,255,255,.82); }
  .mobile-focus-footer button { width: 100%; min-height: 46px; }
  .mobile-focus-footer .mobile-focus-delete { min-height: 34px; margin-top: 6px; color: #a44f45; }
  .mobile-trash-entry { margin-top: 12px; padding: 14px; border: 1px solid rgba(113,142,100,.22); border-radius: 12px; background: linear-gradient(145deg,#f1f5ed,#fbfbf9); }
  .trash-entry-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .trash-entry-heading > div { display: grid; gap: 4px; }
  .trash-entry-heading strong { font-size: 13px; }
  .trash-entry-heading span:not(.trash-entry-icon) { color: var(--muted); font-size: 10px; }
  .trash-entry-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(113,142,100,.14); color: #718e64; font-size: 19px; }
  .mobile-trash-list { display: grid; gap: 8px; margin-top: 13px; }
  .mobile-trash-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(29,29,31,.09); border-radius: 9px; background: rgba(255,255,255,.78); }
  .trash-item-main { min-width: 0; display: grid; gap: 3px; }
  .trash-item-type { color: #718e64 !important; font-size: 9px !important; font-weight: 700; letter-spacing: .08em; }
  .mobile-trash-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-trash-item span, .mobile-trash-empty { color: var(--muted); font-size: 10px; }
  .trash-item-actions { display: flex; gap: 6px; }
  .mobile-trash-item button { min-height: 30px; padding: 0 9px; border: 1px solid var(--hairline); border-radius: 7px; background: white; color: var(--ink); font-size: 10px; }
  .mobile-trash-item button.trash-restore { border-color: rgba(113,142,100,.45); color: #5e8053; font-weight: 700; }
  .mobile-trash-item button.danger { color: #a44f45; }
  .mobile-trash-empty { margin: 14px 0 2px; padding: 12px; border: 1px dashed rgba(29,29,31,.12); border-radius: 8px; text-align: center; }
  .brand-bar { top: 12px; left: 12px; }
  .account-button { top: 12px; right: 12px; min-width: 44px; width: 44px; padding: 5px; }
  .account-copy { display: none; }
  .view-switcher { top: 62px; right: 12px; }
  .appearance-switcher { top: 112px; right: 12px; }
  .workflow-switcher { top: 112px; left: 12px; max-width: calc(100vw - 24px); overflow-x: auto; transform: none; }
  .search-tools { top: 162px; left: 12px; width: calc(100vw - 24px); }
  .view-button { min-width: 44px; padding: 0 8px; }
  .tool-bar { bottom: max(12px, env(safe-area-inset-bottom)); }
  .selection-bar { top: 64px; max-width: calc(100vw - 24px); }
  .selection-size { display: none; }
  .selection-bar { width: calc(100vw - 24px); justify-content: flex-end; }
  .selection-bar > span:first-child { margin-right: auto; }
  .canvas-item img { border-radius: 4px; }
  .empty-cue { top: 46%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .link-card.is-loading .link-cover-image { animation: none; }
  .canvas-item.is-arriving { visibility: visible; }
}