:root{--menu-bg:#161616;--menu-text:#f4f4f4;--menu-muted:#a3a3a3;--menu-border:#2a2a2a;--menu-hover:#2a4543;--menu-selected:#1f3a38;--accent:#2ec4b6;--accent-text:#052e2b;--main-bg:#fff;--main-text:#171717;--danger:#f87171;--success:#34d399;--menu-width:300px;--menu-collapsed:48px;color:var(--main-text);background:var(--main-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-weight:400;line-height:1.45}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}button,input,select,textarea{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:none}.menu input:focus,.menu textarea:focus,.menu .dropdown-trigger:focus,.menu .dropdown-menu button:focus,.menu .site-button:focus,.menu .icon-button:focus,.menu .mode-switch button:focus,.menu .submit:focus,.menu input:focus-visible,.menu textarea:focus-visible,.menu .dropdown-trigger:focus-visible,.menu .dropdown-menu button:focus-visible,.menu .site-button:focus-visible,.menu .icon-button:focus-visible,.menu .mode-switch button:focus-visible,.menu .submit:focus-visible{border-color:var(--accent)}.main :focus-visible{outline:2px solid var(--accent);outline-offset:0}.app{height:100%;min-height:100vh;display:flex}.menu{width:var(--menu-width);flex:0 0 var(--menu-width);background:var(--menu-bg);color:var(--menu-text);flex-direction:column;gap:1rem;height:100%;min-height:0;padding:1rem;display:flex;overflow:hidden}.menu-collapsed{width:var(--menu-collapsed);flex-basis:var(--menu-collapsed);align-items:center;padding:.75rem .4rem}.menu-header,.mode-row,.expanded-actions,.card-actions,.notes-toolbar{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.menu-header h1{margin:0;font-size:1rem;font-weight:600}.field>span,.site-section h2{color:var(--menu-text);margin:0;font-size:.9rem;font-weight:700}.icon-button,.text-button{color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;padding:.35rem .45rem}.icon-button:hover{background:var(--menu-hover);border-color:var(--accent);color:var(--accent)}.mode-switch button:hover:not(.active){background:var(--menu-hover);color:inherit;border-color:#0000}.text-button:hover,.site-button:hover{background:var(--menu-hover)}.icon-button:disabled,.submit:disabled,.text-button:disabled{opacity:.5;cursor:not-allowed}.mode-switch,.filter-switch{background:#0f0f0f;border-radius:8px;flex:1;padding:3px;display:flex}.filter-switch{background:#f3f3f3;max-width:22rem}.mode-switch button,.filter-switch button{color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;flex:1;justify-content:center;align-items:center;min-height:2rem;padding:.3rem .45rem;font-size:.8rem;display:flex}.refresh-button{justify-content:center;align-items:center;padding:.25rem;display:flex}.viewport-switch{flex:none;width:100%}.filter-switch button{color:#404040}.mode-switch button.active{background:var(--menu-hover);border:1px solid var(--accent);color:var(--accent)}.filter-switch button.active{color:#111;background:#fff}.menu-compose{flex-direction:column;flex:1 1 0;gap:1rem;min-height:0;display:flex;overflow:hidden}.menu-compose>:not(.note-field){flex-shrink:0}.menu-footer{flex-direction:column;gap:.5rem;display:flex}.note-field{flex:1 1 0;min-height:0}.field{flex-direction:column;gap:.35rem;display:flex}.field input,.field textarea,.dropdown-trigger,.dropdown-menu button,.site-button{font-size:.8rem}.field input,.field textarea,.dropdown-trigger{border:1px solid var(--menu-border);width:100%;color:var(--menu-text);background:#111;border-radius:8px;padding:.55rem .65rem}.field textarea{resize:none;flex:1;min-height:0}.dropdown{position:relative}.dropdown.open{z-index:20}.dropdown-trigger{text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.dropdown-trigger .placeholder{color:var(--menu-muted)}.dropdown.open .dropdown-trigger{border-color:var(--accent)}.dropdown-menu{z-index:20;border:1px solid var(--menu-border);background:#111;border-radius:8px;margin:0;padding:.3rem;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;box-shadow:0 8px 20px #00000073}.dropdown-menu button{text-align:left;width:100%;color:var(--menu-text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:.5rem .6rem}.dropdown-menu button:hover,.dropdown-menu button.selected{background:var(--menu-hover);border-color:var(--accent)}.help,.count,.muted{color:var(--menu-muted);font-size:.75rem}.site-section{flex-direction:column;gap:.35rem;display:flex}.count.warn{color:#fbbf24}.site-list{flex-direction:column;gap:.35rem;margin:0;padding:0;list-style:none;display:flex}.site-list li{gap:.25rem;display:flex}.site-button{text-align:left;color:var(--menu-text);border:1px solid var(--menu-border);cursor:pointer;background:#111;border-radius:8px;flex:1;padding:.55rem .7rem}.site-button.selected{background:var(--menu-selected);border-color:var(--accent)}.external{color:var(--menu-muted)}.submit{background:var(--accent);width:100%;color:var(--accent-text);cursor:pointer;border:0;border-radius:8px;padding:.7rem .9rem;font-weight:650}.status{margin:0;font-size:.85rem}.status.error,.badge.unreviewed{color:var(--danger)}.status.success{color:var(--success)}.main{background:var(--main-bg);flex-direction:column;flex:1;min-width:0;display:flex}.empty-main{color:#525252;text-align:center;justify-content:center;align-items:center;padding:2rem}.review-iframe{background:#fff;border:0;flex:1;width:100%;height:100%}.site-main{background:#ececec;justify-content:stretch;align-items:stretch;min-height:0}.preview-frame{background:#fff;min-width:0;height:100%;min-height:0;display:flex}.site-main.viewport-desktop{background:#fff}.site-main.viewport-desktop .preview-frame{width:100%}.site-main.viewport-tablet,.site-main.viewport-phone{justify-content:center;align-items:stretch;padding:.75rem}.site-main.viewport-tablet .preview-frame{width:min(768px,100%);box-shadow:0 0 0 1px #d4d4d4,0 8px 24px #0000001f}.site-main.viewport-phone .preview-frame{width:min(390px,100%);box-shadow:0 0 0 1px #d4d4d4,0 8px 24px #0000001f}.notes-main{gap:1rem;padding:1.25rem;overflow:auto}.note-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-rows:320px;gap:1rem;margin:0;padding:0;list-style:none;display:grid}.note-card,.note-expanded{background:#fff;border:1px solid #e5e5e5;border-radius:12px;flex-direction:column;gap:.65rem;min-height:0;padding:1rem;display:flex}.note-expanded{flex:1;overflow:auto}.note-meta{color:#525252;flex-direction:column;flex-shrink:0;gap:.2rem;font-size:.78rem;display:flex}.meta-row{grid-template-columns:4.6rem minmax(0,1fr);gap:.4rem;min-width:0;display:grid}.meta-label{color:#737373;font-weight:600}.meta-label:after{content:":"}.meta-value{overflow-wrap:anywhere;color:#404040;min-width:0}.meta-status{flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:.15rem;display:flex}.note-preview{-webkit-line-clamp:4;-webkit-box-orient:vertical;flex:1;margin:0;display:-webkit-box;overflow:hidden}.note-full{white-space:pre-wrap;margin:0}.badge{font-weight:600}.badge.reviewed{color:#0f766e}.notes-main .text-button{color:#0f766e;border-color:#d1d5db;font-size:.8rem}.notes-main .text-button:hover{background:#f3f4f6}@media (width<=800px){.app{position:relative}.menu:not(.menu-collapsed){z-index:2;position:absolute;inset:0 auto 0 0;box-shadow:8px 0 24px #0003}}