:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:#111827;background:#f9fafb;line-height:1.5;font-weight:400;color-scheme:light;text-rendering:optimizeLegibility;--bg: #f9fafb;--surface: #ffffff;--surface-strong: #ffffff;--surface-muted: #f3f4f6;--border: #e5e7eb;--text: #111827;--muted: #6b7280;--primary: #2563eb;--primary-strong: #1d4ed8;--accent: #3b82f6;--success: #16a34a;--danger: #ef4444;--warning: #f59e0b;--shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);--shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl: 0 20px 25px -5px rgba(0,0,0,.15), 0 10px 10px -5px rgba(0,0,0,.06);--radius-sm: 8px;--radius: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-backdrop{display:none}.app-header{position:sticky;top:0;z-index:10;display:flex;gap:12px;justify-content:space-between;align-items:center;padding:14px 20px;background:#1e293b;color:#f8fafc;box-shadow:var(--shadow)}.app-kicker{display:none}.section-kicker{margin:0 0 4px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}.app-brand-row{display:flex;align-items:center;gap:8px}.app-brand-row h1{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;color:#f8fafc}.section-toolbar h2,.detail-heading h2,.dialog-header h3,.empty-state h3{margin:0}.app-header-status{display:flex;gap:8px;align-items:center;color:#94a3b8}.app-main{max-width:768px;margin:0 auto;width:100%;flex:1}.screen-section{background:var(--surface);border-bottom:1px solid var(--border);min-height:calc(100vh - 56px)}.editor-screen{border:none;background:transparent}.screen-section{padding:0}.section-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:20px 16px 16px;border-bottom:1px solid var(--border)}.section-toolbar-detail{align-items:center}.detail-heading{flex:1}.detail-heading h2{font-size:1.2rem;font-weight:700;line-height:1.2}.panel{margin:16px;padding:20px;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface)}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:48px 24px;color:var(--muted)}.empty-state h3{font-size:1.1rem;font-weight:600;color:var(--text)}.muted-panel{color:var(--muted);font-size:.95rem}.error-panel{color:var(--danger);background:#fef2f2;border-color:#fecaca}.project-grid{display:grid;gap:12px;padding:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.entry-list{display:grid;gap:0}.project-card{border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--surface);overflow:hidden;display:grid;grid-template-columns:1fr auto;align-items:stretch;box-shadow:var(--shadow-sm);transition:box-shadow .18s ease,transform .18s ease}.project-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}.project-open-button{all:unset;padding:16px 20px;display:grid;gap:6px;cursor:pointer}.project-open-button:hover,.project-open-button:focus-visible{background:#eff6ff}.project-number{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--primary)}.project-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.875rem}.project-meta span:last-child{background:var(--surface-muted);padding:2px 8px;border-radius:var(--radius-sm);font-size:.78rem;font-weight:600}.primary-button,.secondary-button,.icon-button,.tool-button{min-height:44px;border-radius:var(--radius);border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;font-weight:600;font-size:.9rem;transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}.primary-button{background:var(--primary);color:#fff;box-shadow:0 1px 3px #2563eb59}.primary-button:hover{background:var(--primary-strong);box-shadow:0 4px 8px #2563eb4d;transform:translateY(-1px)}.primary-button:active{background:var(--primary-strong);transform:translateY(0)}.secondary-button{background:var(--surface);color:var(--text);border-color:var(--border)}.secondary-button:hover{background:var(--surface-muted)}.icon-button{background:transparent;color:var(--muted);border-color:transparent;min-width:44px;padding:0 12px}.icon-button:hover{background:var(--surface-muted);color:var(--text)}.tool-button{background:#1e293b;color:#94a3b8;border-color:transparent;min-width:44px;padding:0 14px}.tool-button:hover{color:#f1f5f9}.tool-button.active{background:#ef4444;color:#fff}.active-recording{background:#fef2f2!important;border-color:#fca5a5!important;color:var(--danger)!important;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.danger-button{color:var(--muted)}.danger-button:hover{color:var(--danger);background:#fff1f2}.dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}.dialog-panel{width:min(100%,440px);padding:24px;border-radius:var(--radius-xl);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-xl)}.dialog-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:20px}.dialog-header h3{font-size:1.2rem;font-weight:700}.stack-form{display:grid;gap:16px}.stack-form label{display:grid;gap:6px;font-weight:600;font-size:.9rem;color:#374151}.text-label{display:grid;gap:6px;font-weight:600;font-size:.875rem;color:#374151}input,textarea{width:100%;border:1px solid #d1d5db;border-radius:var(--radius);padding:10px 14px;background:#f9fafb;color:var(--text);font-size:.95rem;transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f;background:#fff}textarea{min-height:80px;resize:vertical}.entry-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);border-bottom:1px solid var(--border)}.entry-image-wrap{position:relative;background:#111827;min-height:240px}.entry-image{width:100%;height:100%;object-fit:contain}.entry-counter{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:var(--radius-full);background:#0009;color:#fff;font-size:.8rem;font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.entry-body{padding:16px;display:flex;flex-direction:column;gap:12px;background:#fffdf5}.entry-actions,.entry-order-actions,.dictation-row{display:flex;gap:8px;align-items:center}.entry-actions{justify-content:space-between}.helper-text{color:var(--muted);font-size:.85rem}.capture-bar{position:fixed;bottom:24px;left:0;right:0;display:flex;justify-content:center;pointer-events:none;z-index:20}.capture-button{pointer-events:auto;min-height:56px;border-radius:var(--radius-full);padding:0 28px;font-size:1rem;font-weight:700;box-shadow:var(--shadow-xl);border:4px solid #ffffff!important}.editor-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;background:#000}.editor-toolbar{display:flex;justify-content:flex-start;gap:12px;align-items:center;padding:12px 16px;background:#0f172a;color:#f1f5f9;flex-shrink:0;flex-wrap:wrap}.editor-toolbar .secondary-button{background:transparent;border-color:#ffffff26;color:#94a3b8}.editor-toolbar .secondary-button:hover{background:#ffffff14;color:#f1f5f9}.editor-toolbar .primary-button{background:#16a34a;box-shadow:none}.editor-toolbar .primary-button:hover{background:#15803d}.editor-toolbar .tool-button,.editor-toolbar .secondary-button,.editor-toolbar .primary-button{min-height:36px;padding:0 10px}.editor-toolbar .primary-button{margin-left:auto}.color-palette{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.color-swatch{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);padding:0;cursor:pointer;flex-shrink:0;transition:transform .15s ease,border-color .15s ease;box-shadow:0 0 0 1px #00000040}.color-swatch:hover{transform:scale(1.25);border-color:#fff9}.color-swatch.active{outline:2px solid #ffffff;outline-offset:2px;border-color:transparent;transform:scale(1.15)}.editor-history{display:flex;gap:2px}.tool-button:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.primary-button:disabled,.secondary-button:disabled,.icon-button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.desktop-detail{display:flex;flex-direction:column;height:calc(100vh - 56px);background:var(--surface)}.desktop-detail-header{display:flex;align-items:center;gap:10px;padding:14px 24px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--surface)}.desktop-detail-header .detail-heading{min-width:0}.desktop-detail-header .detail-heading h2{font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-meta-count{font-size:.875rem;color:var(--muted);font-weight:500;margin-right:auto;white-space:nowrap}.desktop-detail-body{display:grid;grid-template-columns:220px 1fr;flex:1;overflow:hidden}.desktop-thumb-strip{border-right:1px solid var(--border);overflow-y:auto;background:var(--surface-muted);display:flex;flex-direction:column}.desktop-thumb-item{all:unset;position:relative;cursor:pointer;border-bottom:1px solid var(--border);display:block;flex-shrink:0;transition:opacity .12s ease}.desktop-thumb-item:hover .desktop-thumb-img{opacity:.8}.desktop-thumb-item.active{box-shadow:inset 3px 0 0 var(--primary);background:#eff6ff}.desktop-thumb-img{width:100%;aspect-ratio:4 / 3;object-fit:cover;display:block}.desktop-thumb-num{position:absolute;bottom:6px;left:6px;background:#0009;color:#fff;font-size:.72rem;font-weight:600;padding:2px 6px;border-radius:4px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.desktop-thumb-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 16px;color:var(--muted);font-size:.875rem;text-align:center}.desktop-entry-detail{overflow-y:auto;display:flex;flex-direction:column}.desktop-entry-image-wrap{background:#111827;flex-shrink:0;max-height:52vh;display:flex;align-items:center;justify-content:center;overflow:hidden}.desktop-entry-image{max-width:100%;max-height:52vh;object-fit:contain;display:block}.desktop-entry-controls{padding:20px 24px;display:flex;flex-direction:column;gap:14px}.editor-canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#111827;padding:12px;touch-action:none}.editor-canvas{max-width:100%;max-height:100%;border-radius:var(--radius);touch-action:none;transform-origin:center center;transition:transform 60ms linear}.editor-hint{position:absolute;bottom:12px;left:50%;transform:translate(-50%);white-space:nowrap;background:#0000008c;color:#ffffffbf;font-size:.78rem;padding:4px 12px;border-radius:var(--radius-full);pointer-events:none}.tool-switcher{display:flex;gap:4px;background:#1e293b;padding:4px;border-radius:var(--radius);align-items:center;flex-wrap:wrap}@media(max-width:560px){.editor-toolbar{gap:8px;padding:10px}.editor-toolbar .tool-button,.editor-toolbar .secondary-button,.editor-toolbar .primary-button{min-height:34px;min-width:34px;padding:0 8px}.editor-toolbar .primary-button{margin-left:0}.tool-switcher{gap:2px;padding:3px}.color-palette{gap:4px}.color-swatch{width:20px;height:20px}.editor-hint{max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.25}}.status-pill{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:var(--radius-full);font-weight:600;font-size:.78rem;letter-spacing:.02em}.status-pill-success{background:#16a34a2e;color:#bbf7d0}.status-pill-warning{background:#f59e0b38;color:#fde68a}.status-pill-danger{background:#ef444438;color:#fecaca}.status-pill-muted{background:#94a3b826;color:#cbd5e1}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(min-width:900px){.app-main{max-width:1200px}.screen-section{min-height:calc(100vh - 56px);border-bottom:none}.project-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));padding:24px;gap:16px}.section-toolbar{padding:24px 24px 20px}.panel{margin:24px}}@media(max-width:899px){.entry-card{grid-template-columns:1fr}.entry-image-wrap{min-height:220px}.section-toolbar-detail{flex-wrap:wrap}.tool-switcher{gap:2px}}.install-banner-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-end;justify-content:center;padding:0 0 env(safe-area-inset-bottom,0);z-index:100}@media(min-width:540px){.install-banner-backdrop{align-items:center}}.install-banner{width:min(100%,480px);background:var(--surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:28px 24px 32px;box-shadow:var(--shadow-xl);border:1px solid var(--border);border-bottom:none;display:flex;flex-direction:column;gap:20px;animation:banner-slide-up .25s cubic-bezier(.34,1.1,.64,1) both}@media(min-width:540px){.install-banner{border-radius:var(--radius-xl);border-bottom:1px solid var(--border);animation:banner-fade-in .2s ease both}}@keyframes banner-slide-up{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes banner-fade-in{0%{opacity:0;transform:scale(.97) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.install-banner-header{display:flex;align-items:flex-start;gap:14px}.install-banner-icon{font-size:2.2rem;line-height:1;flex-shrink:0;margin-top:2px}.install-banner-title{margin:0 0 4px;font-size:1.15rem;font-weight:700;color:var(--text);line-height:1.2}.install-banner-subtitle{margin:0;font-size:.875rem;color:var(--muted)}.install-banner-close{all:unset;margin-left:auto;flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--surface-muted);color:var(--muted);font-size:.875rem;cursor:pointer;transition:background .15s ease,color .15s ease}.install-banner-close:hover{background:var(--border);color:var(--text)}.install-banner-features{display:flex;flex-direction:column;gap:10px;background:var(--surface-muted);border-radius:var(--radius-lg);padding:16px;border:1px solid var(--border)}.install-banner-feature{display:flex;gap:10px;align-items:baseline;font-size:.9rem;color:var(--text);line-height:1.45}.install-banner-feature-icon{font-size:1rem;flex-shrink:0}.install-banner-actions{display:flex;flex-direction:column;gap:10px}.install-banner-btn-install{width:100%;min-height:48px;font-size:1rem;border-radius:var(--radius-lg)}.install-banner-btn-later{all:unset;cursor:pointer;text-align:center;padding:10px;font-size:.9rem;color:var(--muted);border-radius:var(--radius);transition:color .15s,background .15s}.install-banner-btn-later:hover{color:var(--text);background:var(--surface-muted)}.btn-primary{min-height:44px;border-radius:var(--radius);border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;font-weight:600;font-size:.95rem;cursor:pointer;background:var(--primary);color:#fff;box-shadow:0 1px 3px #2563eb59;transition:background .15s ease,transform .15s ease}.btn-primary:hover{background:var(--primary-strong);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}
