*{margin:0;padding:0;box-sizing:border-box}body{font:400 var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--md-sys-color-primary);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:var(--md-sys-shape-corner-extra-small)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--md-sys-color-surface-container)}::-webkit-scrollbar-thumb{background:var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-full)}::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-on-surface-variant)}*{scrollbar-width:thin;scrollbar-color:var(--md-sys-color-outline) var(--md-sys-color-surface-container)}.app-shell{display:flex;flex-direction:column;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:var(--md-sys-spacing-4) var(--md-sys-spacing-6);background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);position:sticky;top:0;z-index:100}.app-header h1{font:600 var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface);display:flex;align-items:center;gap:var(--md-sys-spacing-2)}.app-header h1 svg{color:var(--md-sys-color-primary)}.header-actions{display:flex;gap:var(--md-sys-spacing-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--md-sys-spacing-2);padding:var(--md-sys-spacing-2) var(--md-sys-spacing-4);border-radius:var(--md-sys-shape-corner-full);border:none;font:500 var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-font-family-body);letter-spacing:var(--md-sys-typescale-label-large-tracking);cursor:pointer;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);text-decoration:none}.btn-primary{background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.btn-primary:hover{box-shadow:var(--md-sys-elevation-1);text-decoration:none}.btn-primary:disabled{opacity:.38;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.btn-ghost:hover{background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent);text-decoration:none}.btn-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.btn-tonal:hover{box-shadow:var(--md-sys-elevation-1);text-decoration:none}.btn-danger{background:transparent;color:var(--md-sys-color-error);border:1px solid var(--md-sys-color-error)}.btn-danger:hover{background:color-mix(in srgb,var(--md-sys-color-error) 8%,transparent);text-decoration:none}.btn-sm{padding:var(--md-sys-spacing-1) var(--md-sys-spacing-3);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height)}.main-content{flex:1;padding:var(--md-sys-spacing-8) var(--md-sys-spacing-6);max-width:960px;width:100%;margin:0 auto}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--md-sys-spacing-16) var(--md-sys-spacing-6);text-align:center}.empty-state svg{color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--md-sys-spacing-4)}.empty-state h2{font:500 var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface);margin-bottom:var(--md-sys-spacing-2)}.empty-state p{font:var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface-variant);max-width:400px;line-height:1.5}.search-bar{display:flex;align-items:center;gap:var(--md-sys-spacing-3);margin-bottom:var(--md-sys-spacing-6);background:var(--md-sys-color-surface-container-high);border-radius:var(--md-sys-shape-corner-full);padding:0 var(--md-sys-spacing-4)}.search-bar svg{color:var(--md-sys-color-on-surface-variant);flex-shrink:0}.search-bar input{flex:1;padding:var(--md-sys-spacing-3) 0;border:none;background:transparent;color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-font-family-body)}.search-bar input::placeholder{color:var(--md-sys-color-on-surface-variant)}.search-bar input:focus{outline:none}.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--md-sys-spacing-4)}.page-card{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-medium);padding:var(--md-sys-spacing-5);cursor:default;transition:background var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);display:flex;flex-direction:column;gap:var(--md-sys-spacing-3);text-decoration:none;color:inherit}.page-card:hover{background:var(--md-sys-color-surface-container);border-color:var(--md-sys-color-outline)}.page-card-title{font:500 var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.page-card-slug{font:400 var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-font-family-mono);color:var(--md-sys-color-primary)}.page-card-desc{font:var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface-variant);flex:1}.page-card-meta{display:flex;align-items:center;justify-content:space-between;font:400 var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface-variant)}.chip{display:inline-flex;align-items:center;padding:var(--md-sys-spacing-1) var(--md-sys-spacing-3);border-radius:var(--md-sys-shape-corner-small);font:500 var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-font-family-body);letter-spacing:var(--md-sys-typescale-label-small-tracking);background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-on-surface-variant);border:1px solid var(--md-sys-color-outline-variant)}.upload-form{max-width:720px;margin:0 auto}.form-group{margin-bottom:var(--md-sys-spacing-6)}.form-group label{display:block;font:500 var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-font-family-body);letter-spacing:var(--md-sys-typescale-label-medium-tracking);color:var(--md-sys-color-on-surface-variant);margin-bottom:var(--md-sys-spacing-2)}.form-group input,.form-group textarea{width:100%;padding:var(--md-sys-spacing-3) var(--md-sys-spacing-4);border:1px solid var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-small);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-font-family-body);transition:border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--md-sys-color-primary)}.form-group textarea{min-height:200px;font-family:var(--md-sys-font-family-mono);font-size:var(--md-sys-typescale-body-small-size);line-height:1.6;resize:vertical}.form-group .hint{font:400 var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface-variant);margin-top:var(--md-sys-spacing-1)}.dropzone{border:2px dashed var(--md-sys-color-outline);border-radius:var(--md-sys-shape-corner-medium);padding:var(--md-sys-spacing-10) var(--md-sys-spacing-6);text-align:center;cursor:pointer;transition:all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);color:var(--md-sys-color-on-surface-variant)}.dropzone:hover{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 5%,transparent)}.dropzone.active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 8%,transparent)}.toast-container{position:fixed;bottom:var(--md-sys-spacing-6);right:var(--md-sys-spacing-6);z-index:1000;display:flex;flex-direction:column;gap:var(--md-sys-spacing-2)}.toast{padding:var(--md-sys-spacing-3) var(--md-sys-spacing-5);border-radius:var(--md-sys-shape-corner-small);font:500 var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-font-family-body);background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);animation:slideIn var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate);max-width:400px}.toast-success{border-left:3px solid var(--md-sys-color-primary)}.toast-error{border-left:3px solid var(--md-sys-color-error)}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.spinner{width:24px;height:24px;border:3px solid var(--md-sys-color-surface-container-highest);border-top-color:var(--md-sys-color-primary);border-radius:var(--md-sys-shape-corner-full);animation:spin var(--md-sys-motion-duration-medium2) linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.view-page{display:flex;flex-direction:column;height:calc(100vh - 57px)}.view-page iframe{flex:1;border:none;width:100%;height:100%;background:#fff}.back-link{display:inline-flex;align-items:center;gap:var(--md-sys-spacing-2);font:500 var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-primary);text-decoration:none;padding:var(--md-sys-spacing-2) 0;margin-bottom:var(--md-sys-spacing-4);transition:color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard)}.back-link:hover{text-decoration:underline}.card-actions{display:flex;gap:var(--md-sys-spacing-2);align-items:center;padding-top:var(--md-sys-spacing-2);border-top:1px solid var(--md-sys-color-outline-variant)}.view-header{display:flex;align-items:center;justify-content:space-between;padding:var(--md-sys-spacing-2) var(--md-sys-spacing-4);background:var(--md-sys-color-surface-container);border-bottom:1px solid var(--md-sys-color-outline-variant);flex-shrink:0}.view-header-title{font:500 var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-font-family-body);color:var(--md-sys-color-on-surface);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.divider{text-align:center;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-font-family-body);margin:var(--md-sys-spacing-3) 0}@media(max-width:640px){.app-header{padding:var(--md-sys-spacing-3) var(--md-sys-spacing-4)}.main-content{padding:var(--md-sys-spacing-5) var(--md-sys-spacing-4)}.page-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}