:root{--accent:#000;--accent-hover:#333;--accent-soft:#e0e0e0;--accent-ring:#0000001f;--text:#1a1a1a;--text-h:#000;--text-muted:#666;--text-light:#a9a9a9;--label-color:#1a1a1a;--placeholder:#aaa;--bg:#fff;--card-bg:#fff;--panel-bg:#f0f0f0;--icon-bg:#f5f5f5;--viewer-bg:#e8e8e8;--kbd-bg:#eee;--footer-bg:#f5f5f5;--border:#ccc;--input-border:#999;--input-bg:#fff;--header-bg:#fff;--header-border:#000;--brand-color:#000;--link:#000;--shadow-soft:#00000014;--code-bg:#f0f0f0;--pdf-color:#c00;--sans:Roboto, sans-serif;--small-margin-space:5px;--medium-margin-space:12px;--large-margin-space:32px;font-family:var(--sans), sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.5}*,:before,:after{box-sizing:border-box}html{overflow-y:scroll}body{background:var(--bg);color:var(--text);margin:0;padding:0}#root{width:100%;min-height:100vh}button{font-family:var(--sans), sans-serif;cursor:pointer}input,select{font-family:var(--sans), sans-serif}h1,h2,h3{color:var(--text-h)}a{color:var(--link)}.app-shell{background:var(--bg);min-height:100vh;color:var(--text);flex-direction:column;display:flex}.page-loading{background:var(--bg);min-height:100vh}.auth-loading{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-loading-spinner{border:3px solid var(--border,#e0e0e0);border-top-color:var(--brand-color,#0078d4);border-radius:50%;width:40px;height:40px;animation:.75s linear infinite auth-spin}@keyframes auth-spin{to{transform:rotate(360deg)}}.app-main{box-sizing:border-box;flex:1;width:100%;max-width:1360px;margin:0 auto;padding:24px 32px 32px}@media (width<=860px){.app-main{padding:16px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.filter-list-spinner{border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite filter-list-spin}@keyframes filter-list-spin{to{transform:rotate(360deg)}}.filter-list-spinner--sm{border-width:2px;width:12px;height:12px}.btn-primary{font-size:13px;font-weight:700;font-family:var(--sans), sans-serif;text-transform:uppercase;letter-spacing:.5px;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:0;padding:8px 24px;transition:background .1s}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-secondary{font-size:13px;font-weight:700;font-family:var(--sans), sans-serif;text-transform:uppercase;letter-spacing:.5px;color:var(--text-h);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:0;padding:8px 24px;transition:background .1s,border-color .1s}.btn-secondary:hover{background:var(--panel-bg);border-color:var(--text-muted)}.btn-secondary:focus-visible{outline:2px solid var(--text-h);outline-offset:2px}.btn-danger{font-size:13px;font-weight:700;font-family:var(--sans), sans-serif;text-transform:uppercase;letter-spacing:.5px;color:#fff;cursor:pointer;background:#c00;border:none;border-radius:0;padding:8px 24px;transition:background .1s}.btn-danger:hover:not(:disabled){background:#a00}.btn-danger:disabled{opacity:.4;cursor:default}.text-input{box-sizing:border-box;width:100%;font-size:14px;font-family:var(--sans), sans-serif;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-h);border-radius:0;padding:8px 10px;transition:border-color .1s,box-shadow .1s}.text-input:focus{border-color:var(--text-h);box-shadow:0 0 0 2px var(--accent-ring);outline:none}.text-input::placeholder{color:var(--placeholder);font-style:italic}.upload-zone-input{display:none}.blobs-upload-zone{border:2px dashed var(--border);background:var(--panel-bg);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:110px;padding:28px 20px;transition:border-color .15s,background .15s;display:flex}.blobs-upload-zone:hover,.blobs-upload-zone--active{border-color:var(--text-h);background:var(--bg)}.blobs-upload-zone-label{color:var(--text-muted);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:13px}.app-footer{background:var(--footer-bg);border-top:1px solid var(--border);color:var(--text-muted);flex-shrink:0;justify-content:center;align-items:center;gap:8px;padding:12px 32px;font-size:12px;display:flex}.app-footer a{color:var(--text-muted);text-decoration:none}.app-footer a:hover{color:var(--text-h);text-decoration:underline}.footer-sep{color:var(--border)}.app-header{background:var(--header-bg);border-bottom:3px solid var(--header-border);flex-shrink:0}.app-header-inner{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;max-width:1360px;margin:0 auto;padding:10px 32px;display:flex}.header-brand{color:var(--brand-color);letter-spacing:-.5px;font-size:clamp(32px,5vw,37px);font-weight:700;text-decoration:none}.header-brand img{width:auto;height:clamp(32px,5vw,37px);display:block}.header-title{color:var(--brand-color);letter-spacing:.1px;margin-bottom:-.4em;font-size:clamp(18px,2vw,32px);font-weight:600;line-height:1}.header-logout{align-items:center;display:flex}.btn-logout{font-size:12px;font-weight:600;font-family:var(--sans), sans-serif;color:var(--text-muted);cursor:pointer;letter-spacing:.2px;background:0 0;border:1px solid #0000;border-radius:0;align-items:center;gap:6px;padding:6px 12px;transition:color .1s,border-color .1s,background .1s;display:flex}.btn-logout:hover{color:var(--text-h);border-color:var(--border);background:var(--panel-bg)}.btn-logout:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-admin-link{font-size:11px;font-weight:700;font-family:var(--sans), sans-serif;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border:1px solid var(--border);background:0 0;border-radius:0;align-items:center;gap:5px;margin-right:10px;padding:5px 12px;text-decoration:none;transition:color .1s,border-color .1s,background .1s;display:inline-flex}.btn-admin-link:hover{color:var(--text-h);border-color:var(--text-muted);background:var(--panel-bg)}@media (width<=860px){.app-header-inner{padding:8px 16px}}@media (width<=600px){.app-header-inner{flex-direction:column;align-items:center;gap:8px;padding:12px 16px}.header-title{text-align:center}}