:root{--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-bg:#f8fafc;--color-surface:#fff;--color-text:#1e293b;--color-text-secondary:#64748b;--color-border:#e2e8f0;--color-error:#dc2626;--radius:8px;--nav-width:200px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-bg);color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{height:100vh;display:flex;overflow:hidden}.app-content{flex:1;overflow:hidden}.nav-sidebar{width:var(--nav-width);background:var(--color-surface);border-right:1px solid var(--color-border);flex-direction:column;flex-shrink:0;justify-content:space-between;padding:16px 8px;display:flex}.nav-top{flex-direction:column;gap:16px;display:flex}.nav-title{padding:0 12px;font-size:16px;font-weight:700}.nav-links{flex-direction:column;gap:2px;display:flex}.nav-bottom{flex-direction:column;gap:8px;padding:0 12px;display:flex}.nav-user{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;font-size:13px;overflow:hidden}.nav-logout{width:100%;padding:6px 12px;font-size:13px}.nav-item{border-radius:var(--radius);color:var(--color-text-secondary);align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:flex}.nav-item:hover{background:var(--color-bg);color:var(--color-text)}.nav-item-active{color:var(--color-primary);background:#eff6ff}.nav-item-active:hover{color:var(--color-primary);background:#dbeafe}.btn{border-radius:var(--radius);cursor:pointer;border:none;padding:8px 16px;font-size:14px;font-weight:500;transition:background .15s}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.icon-btn{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);width:36px;height:36px;color:var(--color-text-secondary);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:color .15s,border-color .15s,background .15s;display:flex;position:relative}.icon-btn[data-tooltip]:after{content:attr(data-tooltip);background:var(--color-text);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;border-radius:4px;padding:4px 8px;font-size:12px;transition:opacity .15s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)}.icon-btn[data-tooltip]:hover:after{opacity:1}.preview-header .icon-btn[data-tooltip]:after{top:calc(100% + 6px);bottom:auto}.icon-btn:hover{color:var(--color-primary);border-color:var(--color-primary)}.icon-btn-copied{color:#16a34a;border-color:#16a34a}.icon-btn-danger:hover{color:var(--color-error);border-color:var(--color-error)}.login-page{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{text-align:center;background:var(--color-surface);border-radius:12px;padding:48px;box-shadow:0 1px 3px #0000001a}.login-card h1{margin-bottom:8px;font-size:28px}.login-card>p{color:var(--color-text-secondary);margin-bottom:32px}.btn-google{align-items:center;gap:10px;padding:12px 24px;font-size:16px;display:inline-flex}.google-icon{flex-shrink:0}.login-note{color:var(--color-text-secondary);margin-top:16px;font-size:13px}.layout{height:100%;display:flex;overflow:hidden}.content-main{flex-direction:column;flex:1;padding:24px;display:flex;overflow:hidden}.content-main:not(.content-main-with-preview){max-width:980px;margin:0 auto}.content-main-with-preview{border-right:1px solid var(--color-border)}.pages-layout{height:100%;display:flex;overflow:hidden}.pages-list{flex:1;padding:24px;overflow-y:auto}.pages-list-with-preview{border-right:1px solid var(--color-border)}.pages-header{align-items:baseline;gap:12px;margin-bottom:16px;display:flex}.pages-header h2{font-size:18px}.pages-count{color:var(--color-text-secondary);font-size:14px}.preview-panel{background:var(--color-bg);flex-direction:column;flex:1;display:flex;overflow:hidden}.preview-panel-hidden{display:none}.preview-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.preview-title{text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}.preview-iframe{background:#fff;border:none;flex:1;width:100%}.preview-empty{color:var(--color-text-secondary);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;font-size:14px;display:flex}.upload-section{flex-shrink:0;margin-bottom:24px}.upload-section h2{margin-bottom:16px;font-size:18px}.upload-area{border:2px dashed var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:40px;transition:border-color .15s;display:flex}.upload-area:hover{border-color:var(--color-primary)}.upload-area.dragging{border-color:var(--color-primary);background:#eff6ff}.upload-area.uploading{opacity:.6;pointer-events:none}.upload-drop-text{color:var(--color-primary);font-size:18px;font-weight:600}.upload-icon{color:var(--color-text-secondary);margin-bottom:8px;font-size:32px}.upload-hint{color:var(--color-text-secondary);margin-top:4px;font-size:13px}.error-message{color:var(--color-error);margin-top:8px;font-size:14px}.files-section-title{flex-shrink:0;margin-bottom:16px;font-size:18px}.files-section{flex:1;min-height:0;overflow-y:auto}.empty-state{color:var(--color-text-secondary);text-align:center;padding:32px}.file-list{list-style:none}.file-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer;justify-content:space-between;align-items:center;margin-bottom:8px;padding:16px;transition:border-color .15s;display:flex}.file-item-active{border-color:var(--color-primary);background:#eff6ff}.file-info{flex-direction:column;gap:4px;display:flex}.file-name{font-weight:500}.file-date{color:var(--color-text-secondary);font-size:13px}.file-actions{gap:8px;display:flex}.loading-screen{min-height:100vh;color:var(--color-text-secondary);justify-content:center;align-items:center;display:flex}.loading-state{color:var(--color-text-secondary);flex-direction:column;align-items:center;gap:12px;padding:32px;display:flex}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.file-table{table-layout:fixed;border-collapse:collapse;background:var(--color-surface);width:100%;font-size:14px}.file-table thead th{text-align:left;color:var(--color-text-secondary);border-bottom:2px solid var(--color-border);white-space:nowrap;padding:10px 16px;font-size:13px;font-weight:600}.file-table tbody tr{cursor:pointer;transition:background .15s}.file-table tbody tr:hover{background:var(--color-bg)}.file-table tbody tr.row-active{background:#eff6ff}.file-table td{border-bottom:1px solid var(--color-border);padding:12px 16px}.cell-filename{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.cell-user,.cell-date{color:var(--color-text-secondary);white-space:nowrap}.cell-actions{white-space:nowrap;width:100px}.cell-actions .icon-btn{vertical-align:middle;margin-right:4px;display:inline-flex}.icon-btn-sm{width:30px;height:30px}.icon-btn-sm[data-tooltip]:after{font-size:11px}.load-more{justify-content:center;padding:16px 0;display:flex}