:root { --bg:#f6f5f1; --panel:#fff; --panel-2:#efeee9; --text:#20231f; --muted:#70756d; --border:#ddded8; --accent:#385e44; --accent-contrast:#fff; --hover:#f0f2ed; --danger:#a53535; --danger-bg:#fff0f0; --shadow:0 16px 45px rgba(34,38,31,.15); --reader-bg:#2f312e; } body.dark { --bg:#181916; --panel:#20221e; --panel-2:#292c25; --text:#f0f1eb; --muted:#aeb3aa; --border:#383c34; --accent:#83ad8e; --accent-contrast:#132018; --hover:#292c25; --danger:#ef9292; --danger-bg:#331b1b; --shadow:0 16px 45px rgba(0,0,0,.40); --reader-bg:#121310; } *{box-sizing:border-box} html,body{margin:0;min-height:100%} body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text)} button,input,select,textarea{font:inherit} button{cursor:pointer}.hidden{display:none!important}.hidden-input{position:fixed;left:-9999px;width:1px;height:1px;opacity:0} .app-shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{background:var(--panel);border-right:1px solid var(--border);padding:20px 16px;display:flex;flex-direction:column;gap:18px;min-width:0;transition:.2s ease}.sidebar.collapsed{width:0;padding-left:0;padding-right:0;overflow:hidden;border-right:0} .brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--accent);color:var(--accent-contrast);font-weight:800;font-size:22px}.brand h1{margin:0;font-size:18px}.brand p{margin:3px 0 0;color:var(--muted);font-size:12px} .nav-list{display:grid;gap:7px}.nav-item{border:0;background:transparent;color:var(--text);border-radius:10px;padding:10px 12px;text-align:left}.nav-item:hover,.nav-item.active{background:var(--hover)}.nav-item.active{font-weight:700}.nav-item span{margin-left:8px}.sidebar-spacer{flex:1}.library-status{border-top:1px solid var(--border);padding-top:14px;display:grid;gap:8px;color:var(--muted);font-size:13px}.status-line{display:flex;justify-content:space-between;gap:12px}.status-line strong{color:var(--text);max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .main-area{min-width:0;min-height:100vh}.topbar{position:sticky;top:0;z-index:5;min-height:72px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center;padding:14px 24px}.search-wrap{flex:1;max-width:720px;position:relative}.search-wrap input,.dynamic-form input,.dynamic-form select,.dynamic-form textarea{width:100%;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:10px 12px;outline:none}.search-wrap input{padding-left:38px;border-radius:12px}.search-wrap input:focus,.dynamic-form input:focus,.dynamic-form select:focus,.dynamic-form textarea:focus{border-color:var(--accent)}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)} .primary-button,.secondary-button,.danger-button,.icon-button,.link-button{border-radius:10px;border:1px solid var(--border);padding:9px 12px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}.primary-button{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent);font-weight:700}.secondary-button,.icon-button,.link-button{background:var(--panel);color:var(--text)}.danger-button{background:var(--danger-bg);color:var(--danger)}.icon-button{width:40px;height:40px;padding:0}.full-width{width:100%} .content{padding:28px;max-width:1500px;margin:0 auto}.hero{background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:28px;margin-bottom:24px}.hero h2{font-size:clamp(28px,3vw,42px);margin:0 0 8px}.hero p{color:var(--muted);max-width:760px;line-height:1.6;margin:0}.hero-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}.section{margin-top:28px}.section-header{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px}.section-header h3{margin:0;font-size:20px}.section-header p{margin:3px 0 0;color:var(--muted);font-size:13px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.toolbar select{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:9px;padding:7px 10px} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:13px}.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:15px;min-height:135px;display:flex;flex-direction:column;gap:8px;transition:.12s ease}.card:hover{transform:translateY(-1px);border-color:var(--accent)}.card-top{display:flex;gap:12px;align-items:flex-start}.file-icon,.folder-icon{width:42px;height:42px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;flex:0 0 auto;font-size:16px;font-weight:800}.card h4{margin:0;font-size:15px;line-height:1.35;word-break:break-word}.card .meta{color:var(--muted);font-size:12px;word-break:break-word}.card-actions{margin-top:auto;display:flex;gap:7px;flex-wrap:wrap}.card-actions button{padding:6px 8px;font-size:12px}.favorite-button{width:32px;padding:5px!important;font-size:18px!important}.favorite-button.active{color:#b88a00}.menu-button{margin-left:auto}.empty-state{background:var(--panel);border:1px dashed var(--border);border-radius:16px;padding:44px 24px;text-align:center;color:var(--muted)}.empty-state h3{color:var(--text);margin-top:0}.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-bottom:16px;color:var(--muted)}.breadcrumbs button{border:0;background:transparent;color:var(--accent);padding:3px 4px}.path-chip{display:inline-flex;border:1px solid var(--border);background:var(--panel-2);border-radius:999px;padding:3px 8px;font-size:11px;color:var(--muted)} .modal{position:fixed;inset:0;z-index:50}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.48)}.form-window{position:absolute;width:min(580px,calc(100vw - 24px));max-height:90vh;overflow:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--panel);border-radius:16px;box-shadow:var(--shadow)}.form-header{border-bottom:1px solid var(--border);padding:12px 16px;display:flex;justify-content:space-between;gap:16px;align-items:center}.form-header h2{margin:0;font-size:18px}.form-header p{margin:3px 0 0;color:var(--muted);font-size:12px}.dynamic-form{padding:18px;display:grid;gap:14px}.form-field{display:grid;gap:6px}.form-field label{font-size:13px;font-weight:700}.dynamic-form textarea{min-height:130px;resize:vertical}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.form-error{color:var(--danger);background:var(--danger-bg);border-radius:10px;padding:10px;font-size:13px}.danger-zone{margin-top:6px;padding:12px;border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));border-radius:12px;background:var(--danger-bg);display:flex;align-items:center;justify-content:space-between;gap:14px}.danger-zone>div{display:grid;gap:4px}.danger-zone strong{color:var(--danger);font-size:13px}.danger-zone span{color:var(--muted);font-size:11px;line-height:1.4} .toast{position:fixed;z-index:100;right:20px;bottom:20px;background:var(--text);color:var(--panel);padding:11px 14px;border-radius:10px;box-shadow:var(--shadow);max-width:420px}.drop-overlay{position:fixed;z-index:90;inset:14px;border:3px dashed var(--accent);background:color-mix(in srgb,var(--panel) 92%,transparent);border-radius:20px;display:grid;place-items:center;pointer-events:none}.drop-overlay>div{text-align:center;display:grid;gap:6px}.drop-overlay strong{font-size:22px}.drop-overlay span{color:var(--muted)} .history-list,.notes-library-list{display:grid;gap:8px}.history-row,.note-library-row{width:100%;display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:16px;align-items:center;text-align:left;padding:12px 14px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:11px}.history-row span,.history-row time,.note-library-row span,.note-library-row time{color:var(--muted);font-size:12px}.note-library-row .note-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:13px} /* Reader page */ body.reader-focus .sidebar,body.reader-focus .topbar{display:none}body.reader-focus .app-shell{display:block}body.reader-focus .content{max-width:none;padding:0} .reader-page{height:calc(100vh - 72px);min-height:620px;display:grid;grid-template-rows:auto 1fr;background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden}.reader-page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--panel)}.reader-book-info{min-width:0;display:flex;align-items:center;gap:10px}.reader-back{flex:0 0 auto}.reader-title-wrap{min-width:0}.reader-title-wrap h2{font-size:17px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-title-wrap p{font-size:11px;color:var(--muted);margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reader-top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.reader-location-label{font-size:12px;color:var(--muted);min-width:64px;text-align:center} .reader-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px}.reader-main{min-width:0;min-height:0;display:grid;grid-template-rows:auto 1fr;background:var(--reader-bg)}.reader-toolbar{min-height:48px;padding:7px 10px;background:var(--panel-2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-wrap:wrap}.reader-toolbar .spacer{flex:1}.reader-toolbar input[type=number]{width:72px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:6px 7px;text-align:center}.reader-toolbar button{padding:6px 9px}.reader-surface{min-height:0;position:relative;overflow:hidden;background:var(--reader-bg)} .pdf-frame{width:100%;height:100%;border:0;background:#fff}.text-reader,.docx-reader,.rtf-reader{height:100%;overflow:auto;background:var(--panel);color:var(--text);padding:clamp(24px,5vw,70px);line-height:1.75;font-size:17px;direction:auto;scroll-behavior:smooth}.text-reader pre{white-space:pre-wrap;margin:0;font:inherit}.docx-document{max-width:860px;margin:0 auto}.docx-document p{margin:.5em 0 1em}.docx-document h1,.docx-document h2,.docx-document h3{line-height:1.3}.docx-document table{width:100%;border-collapse:collapse;margin:1em 0}.docx-document td,.docx-document th{border:1px solid var(--border);padding:7px;vertical-align:top}.reader-placeholder{height:100%;display:grid;place-items:center;background:var(--panel);padding:30px;text-align:center;color:var(--muted)}.reader-placeholder h3{color:var(--text)} .reader-side{min-height:0;border-left:1px solid var(--border);background:var(--panel);display:grid;grid-template-rows:auto auto 1fr}.reader-side-tabs{display:flex;border-bottom:1px solid var(--border)}.reader-side-tabs button{flex:1;border:0;background:transparent;color:var(--muted);padding:12px 8px}.reader-side-tabs button.active{color:var(--text);font-weight:700;border-bottom:2px solid var(--accent)}.side-action-row{padding:10px;border-bottom:1px solid var(--border);display:flex;gap:8px}.side-action-row button{flex:1}.reader-side-content{min-height:0;overflow:auto;padding:10px}.side-empty{color:var(--muted);text-align:center;padding:30px 12px;font-size:13px}.note-item,.bookmark-item{border:1px solid var(--border);border-radius:11px;padding:10px;margin-bottom:9px;background:var(--bg)}.note-item-header,.bookmark-item-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}.note-location,.bookmark-location{font-size:11px;color:var(--accent);font-weight:700}.note-item textarea{width:100%;min-height:100px;resize:vertical;border:0;background:transparent;color:var(--text);outline:none;line-height:1.5}.note-footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;margin-top:7px}.tiny-button{border:0;background:transparent;color:var(--muted);padding:3px 5px}.tiny-button:hover{color:var(--text)}.bookmark-title{font-weight:700;font-size:13px;word-break:break-word}.bookmark-item button.jump-bookmark{width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:0}.save-status{font-size:11px;color:var(--muted)} .reader-side.closed{display:none}.reader-layout.side-closed{grid-template-columns:1fr} @media (max-width:980px){.reader-layout{grid-template-columns:minmax(0,1fr) 290px}.reader-page{height:calc(100vh - 72px)}} @media (max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;width:260px;box-shadow:var(--shadow)}.sidebar.collapsed{transform:translateX(-100%);width:260px;padding:20px 16px}.topbar{padding:10px 12px;flex-wrap:wrap}.search-wrap{order:4;max-width:none;flex-basis:100%}.content{padding:18px 12px}.history-row,.note-library-row{grid-template-columns:1fr}.reader-page{height:calc(100vh - 124px);border-radius:12px}.reader-layout{grid-template-columns:1fr}.reader-side{position:absolute;right:0;top:0;bottom:0;width:min(88vw,360px);z-index:10;box-shadow:var(--shadow)}.reader-layout{position:relative}.reader-page-header{align-items:flex-start}.reader-top-actions{justify-content:flex-end}} body.reader-open .topbar{display:none} body.reader-open .content{padding:0;max-width:none;margin:0} body.reader-open .reader-page{height:100vh;min-height:0;border:0;border-radius:0} body.reader-focus .reader-page{height:100vh} .reader-toolbar.empty{display:none} .reader-side{grid-template-rows:auto auto auto 1fr} .reader-side-location{min-height:0;padding:9px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:8px;background:var(--panel-2)} .reader-side-location:empty{display:none} .reader-side-location label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:700} .reader-side-location input[type=number]{width:70px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:6px 7px;text-align:center} .reader-side-location button{padding:6px 10px} /* Global sidebar + persistent tabs (v0.8) */ .app-shell{grid-template-columns:260px minmax(0,1fr);height:100vh;min-height:0;overflow:hidden;transition:grid-template-columns .2s ease} .app-shell.sidebar-collapsed{grid-template-columns:0 minmax(0,1fr)} .sidebar{height:100vh;min-height:0;padding:0;gap:0;overflow:hidden;display:flex;flex-direction:column} .sidebar.collapsed{width:0;padding:0;overflow:hidden;border-right:0} .sidebar-top-fixed{flex:0 0 auto;padding:18px 14px 14px;border-bottom:1px solid var(--border);background:var(--panel)} .brand{min-width:0}.brand-copy{min-width:0;flex:1}.brand-copy h1,.brand-copy p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-collapse{font-size:22px;line-height:1;margin-left:auto} .sidebar-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 14px;scrollbar-gutter:stable} .sidebar-bottom-fixed{flex:0 0 auto;padding:10px;border-top:1px solid var(--border);background:var(--panel)} .sidebar-bottom-fixed .nav-item{width:100%} .nav-list{gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:4px} .nav-item span{margin-left:5px} .sidebar-tabs-section{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)} .sidebar-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:0 7px 7px} .sidebar-section-title .tiny-button{font-size:20px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;padding:0} .sidebar-section-title .tiny-button:hover{background:var(--hover)} .sidebar-book-tabs{display:grid;gap:5px;align-content:start} .reader-tab{display:grid;grid-template-columns:minmax(0,1fr) 25px;gap:2px;border:1px solid transparent;border-radius:10px;background:transparent;overflow:hidden} .reader-tab:hover{background:var(--hover)}.reader-tab.active{background:var(--panel-2);border-color:var(--border)} .reader-tab-open{min-width:0;border:0;background:transparent;color:var(--text);text-align:left;padding:8px 4px 8px 8px;display:grid;gap:2px} .reader-tab-open span{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reader-tab-open small{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .reader-tab-close{align-self:center;border:0;background:transparent;color:var(--muted);border-radius:7px;width:23px;height:23px;padding:0;font-size:16px} .reader-tab-close:hover{background:var(--bg);color:var(--text)} .sidebar-empty-tabs{padding:8px;color:var(--muted);font-size:11px;text-align:center} .topbar-spacer{flex:1} .main-area{height:100vh;min-height:0;overflow:auto} body.reader-open .main-area{overflow:hidden} /* Reader layout fixes */ body.reader-open .topbar{display:none} body.reader-open .content{padding:0;max-width:none;margin:0;height:100vh;overflow:hidden} body.reader-open .reader-page{height:100vh;min-height:0;border:0;border-radius:0} .reader-page{min-width:0}.reader-layout,.reader-main,.reader-surface{min-width:0;min-height:0} .reader-surface{height:100%;position:relative;overflow:hidden} .pdf-frame{position:absolute;inset:0;width:100%;height:100%;min-width:100%;min-height:100%;display:block;border:0;background:#fff} body.reader-focus .sidebar,body.reader-focus .topbar{display:none} body.reader-focus .app-shell{display:block;height:100vh}.reader-side.closed{display:none}.reader-layout.side-closed{grid-template-columns:1fr} .connection-item{border:1px solid var(--border);border-radius:11px;padding:9px;margin-bottom:9px;background:var(--bg)} .connection-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:700} .connection-launch{width:100%;border:0;background:transparent;color:var(--text);padding:4px 0;text-align:left;display:grid;gap:4px}.connection-launch strong{font-size:13px}.connection-launch small{color:var(--muted);font-size:10px}.connection-launch:hover strong{color:var(--accent)} /* Dedicated search */ .search-page-box{max-width:900px;margin:0 auto 20px}.search-page-input-wrap{display:flex;gap:8px;align-items:center}.search-page-input{flex:1;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:14px;padding:13px 15px;font-size:16px;outline:none}.search-page-input:focus{border-color:var(--accent)} .tag-filter-row,.book-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.tag-filter-row{margin:14px 0 4px}.tag-chip{border:1px solid var(--border);background:var(--panel-2);color:var(--text);border-radius:999px;padding:5px 9px;font-size:11px}.tag-chip:hover,.tag-chip.active{border-color:var(--accent);background:var(--hover);color:var(--accent)}.book-tags{margin-top:3px}.book-tags .tag-chip{padding:2px 7px;font-size:10px;cursor:default} /* Home compact expanding search */ .home-search{display:flex;align-items:center;gap:7px;margin-top:18px}.home-search .home-search-input{width:0;opacity:0;pointer-events:none;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 0;transition:width .18s ease,opacity .18s ease,padding .18s ease}.home-search.expanded .home-search-input{width:min(420px,70vw);opacity:1;pointer-events:auto;padding:9px 11px}.home-search-button{width:40px;height:40px} /* Trash */ .trash-list{display:grid;gap:9px}.trash-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 14px}.trash-row .meta{color:var(--muted);font-size:11px;margin-top:4px}.trash-actions{display:flex;gap:7px;flex-wrap:wrap} /* Settings */ .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.settings-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:17px}.settings-card h4{margin:0 0 6px}.settings-card p{color:var(--muted);font-size:12px;line-height:1.55}.settings-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.stat-box{background:var(--panel-2);border-radius:10px;padding:10px}.stat-box strong{display:block;font-size:20px}.stat-box span{font-size:10px;color:var(--muted)}.tag-admin-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.tag-admin-item{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--border);border-radius:999px;padding:4px 7px;background:var(--panel-2);font-size:11px}.tag-admin-item button{border:0;background:transparent;color:var(--muted);padding:0 2px} @media (max-width:820px){ .app-shell{grid-template-columns:1fr;height:100vh}.app-shell.sidebar-collapsed{grid-template-columns:1fr} .sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:260px;height:100vh;box-shadow:var(--shadow);transform:none} .sidebar.collapsed{transform:translateX(-100%);width:260px} .main-area{height:100vh}.topbar{padding:10px 12px;flex-wrap:nowrap}.content{padding:18px 12px} .reader-page{height:100vh}.reader-layout{grid-template-columns:1fr}.reader-side{position:absolute;right:0;top:0;bottom:0;width:min(88vw,360px);z-index:10;box-shadow:var(--shadow)}.reader-layout{position:relative} .trash-row{grid-template-columns:1fr}.trash-actions{justify-content:flex-start} } /* ===== v0.9 navigation + reader repair ===== */ /* Only the open-book tab area scrolls. */ .sidebar-top-fixed{padding:14px 12px 8px;border-bottom:1px solid var(--border)} .compact-nav{margin-top:10px;display:grid;gap:2px} .compact-nav .nav-item{padding:7px 9px;border-radius:8px;font-size:13px;min-height:32px} .compact-nav .nav-item span{margin-left:4px} .sidebar-tabs-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 10px 12px;margin:0;border-top:0;scrollbar-gutter:stable} .sidebar-tabs-scroll .sidebar-section-title{position:sticky;top:0;z-index:2;background:var(--panel);padding-top:3px} .sidebar-bottom-fixed{display:grid;gap:3px;padding:8px 10px} .sidebar-bottom-fixed .nav-item{padding:8px 9px;min-height:34px;font-size:13px} .sidebar-scroll{display:none!important} /* Three-dot management controls */ .menu-button,.row-menu{margin-left:auto;flex:0 0 auto} .card-actions .menu-button{width:34px;height:34px;padding:0;font-size:20px;letter-spacing:2px} .active-toggle{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--hover)!important} /* Reader tool drawer: one compact icon in the header. */ .reader-tools-toggle{font-size:20px;line-height:1} /* PDF repair: give the native Chrome PDF plugin an explicit, unclipped viewport. */ .reader-layout{height:100%;overflow:hidden} .reader-main{height:100%;overflow:hidden} .reader-surface{position:relative!important;width:100%;height:100%;min-height:0;overflow:hidden!important;background:var(--reader-bg)} .pdf-frame{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;border:0!important;margin:0!important;padding:0!important;background:#fff} .reader-toolbar.empty{display:none!important} .reader-main:has(.reader-toolbar.empty){grid-template-rows:minmax(0,1fr)} /* Notes/bookmarks list pages now have separate action buttons. */ .notes-library-list,.bookmark-library-list{display:grid;gap:8px} .note-library-row,.bookmark-library-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;align-items:stretch;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:0;overflow:hidden} .note-library-open,.bookmark-library-row>button:first-child{border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,1fr) auto;gap:14px;align-items:center;text-align:left;padding:12px 14px;min-width:0} .note-library-open span,.note-library-open time,.bookmark-library-row small,.bookmark-library-row span{color:var(--muted);font-size:12px} .note-library-open .note-preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);font-size:13px} .note-library-row .row-menu,.bookmark-library-row .row-menu{align-self:center;justify-self:center;width:34px;height:34px;font-size:19px} /* Tag creation on Search. */ .search-tag-create{display:flex;gap:7px;align-items:center;margin-top:10px;max-width:520px} .search-tag-create input{flex:1;min-width:0;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 10px;outline:none} .search-tag-create input:focus{border-color:var(--accent)} .view-tag-filters{margin:10px 0 14px} /* Optional filesystem-style tree view with visible stems. */ .library-tree{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px 14px;min-height:80px} .tree-node{position:relative;margin:1px 0} .tree-node>summary{list-style:none;display:flex;align-items:center;gap:8px;min-height:38px;padding:4px 7px;border-radius:8px;color:var(--text)} .tree-node>summary::-webkit-details-marker{display:none} .tree-node>summary::before{content:'›';width:14px;color:var(--muted);font-size:17px;transition:transform .12s ease} .tree-node[open]>summary::before{transform:rotate(90deg)} .tree-node>summary:hover,.tree-book-row:hover{background:var(--hover)} .tree-folder-icon{color:var(--muted);font-size:15px} .tree-name,.tree-book-open{border:0;background:transparent;color:var(--text);text-align:left;padding:0;min-width:0} .tree-name{font-weight:650;font-size:14px;flex:0 1 auto} .tree-meta{font-size:10px;color:var(--muted);margin-right:auto} .tree-menu{border:0;background:transparent;color:var(--muted);width:30px;height:28px;border-radius:7px;font-size:18px;line-height:1} .tree-menu:hover{background:var(--panel-2);color:var(--text)} .tree-children{position:relative;margin-left:17px;padding-left:19px;border-left:1px solid var(--border)} .tree-children>.tree-node:before,.tree-children>.tree-book-row:before{content:'';position:absolute;left:-19px;top:19px;width:15px;border-top:1px solid var(--border)} .tree-book-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 30px 30px;align-items:center;gap:5px;min-height:38px;padding:4px 7px;border-radius:8px} .tree-file-icon{font-size:9px;font-weight:800;color:var(--muted);background:var(--panel-2);border-radius:6px;width:30px;height:26px;display:grid;place-items:center} .tree-book-open{display:flex;gap:9px;align-items:baseline;overflow:hidden} .tree-book-open strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tree-book-open small{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tree-star{border:0;background:transparent!important;width:28px!important;height:28px;padding:0!important} /* Trash supports several object types. */ .trash-row strong{display:block} @media (max-width:820px){ .compact-nav{grid-template-columns:1fr 1fr;gap:3px} .note-library-open,.bookmark-library-row>button:first-child{grid-template-columns:1fr;gap:5px} .tree-children{margin-left:10px;padding-left:13px} } /* PDF v0.9 final override: restore the proven normal-flow iframe sizing. */ .pdf-frame{position:static!important;inset:auto!important;width:100%!important;height:100%!important;display:block!important;border:0!important;background:#fff!important;min-width:0!important;min-height:0!important} /* ===== v1.0 Hebrew-first layout + persistent readers ===== */ .reader-host{height:100vh;min-width:0;overflow:hidden;background:var(--panel)} .reader-pane{height:100vh!important;min-height:0!important;border:0!important;border-radius:0!important} /* Hebrew UI mirrors the global navigation to the right. */ body.ui-he .app-shell{grid-template-columns:minmax(0,1fr) 248px} body.ui-he .app-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr) 0} body.ui-he .sidebar{grid-column:2;grid-row:1;border-right:0;border-left:1px solid var(--border)} body.ui-he .main-area{grid-column:1;grid-row:1} body.ui-he .nav-item{text-align:right} body.ui-he .nav-item span{margin-left:0;margin-right:6px} body.ui-he .sidebar-collapse{margin-left:0;margin-right:auto} body.ui-he .reader-tab-open{text-align:right;padding:8px 8px 8px 4px} body.ui-he .menu-button,body.ui-he .row-menu{margin-left:0;margin-right:auto} /* In Hebrew the reading tools live on the left, opposite the main library sidebar. */ body.ui-he .reader-layout{grid-template-columns:340px minmax(0,1fr)} body.ui-he .reader-side{grid-column:1;grid-row:1;border-left:0;border-right:1px solid var(--border)} body.ui-he .reader-main{grid-column:2;grid-row:1} body.ui-he .reader-layout.side-closed{grid-template-columns:1fr} body.ui-he .reader-layout.side-closed .reader-main{grid-column:1} body.ui-he .reader-book-info,body.ui-he .reader-top-actions{direction:rtl} /* Smaller, tighter fixed navigation; only the open-book list scrolls. */ .sidebar-top-fixed{padding:11px 10px 7px} .brand{gap:8px}.brand-mark{width:36px;height:36px;border-radius:10px;font-size:19px}.brand h1{font-size:15px}.brand p{font-size:10px} .compact-nav{margin-top:7px;gap:1px}.compact-nav .nav-item{padding:6px 8px;min-height:29px;font-size:12px} .sidebar-tabs-scroll{padding:7px 8px 9px}.sidebar-section-title{padding:0 5px 5px;font-size:10px} .sidebar-bottom-fixed{padding:7px 8px}.sidebar-bottom-fixed .nav-item{padding:7px 8px;min-height:31px;font-size:12px} /* Combined reading/history area. */ .study-hub{max-width:1100px;margin-left:auto;margin-right:auto} .study-switcher{position:sticky;top:84px;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:5px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:13px;margin-bottom:16px} .study-switcher button{border:0;background:transparent;color:var(--muted);border-radius:9px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:6px} .study-switcher button.active{background:var(--panel);color:var(--text);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.06)} .study-filters{margin-bottom:10px} .study-open-tabs{display:grid;gap:7px}.study-open-tab{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:5px}.study-open-tab>button:first-child{border:0;background:transparent;color:var(--text);text-align:inherit;padding:8px 10px;display:flex;justify-content:space-between;gap:14px}.study-open-tab small{color:var(--muted)} /* Search: tag creation appears only after +. */ .search-tag-heading{display:flex;align-items:center;gap:6px;margin-top:12px;color:var(--muted);font-size:12px;font-weight:700} .tag-add-toggle{font-size:18px;width:26px;height:26px;border-radius:7px;padding:0;display:grid;place-items:center}.tag-add-toggle:hover{background:var(--hover)} .search-tag-create{margin-top:6px} /* Settings tag creator stays inside its card. */ .settings-card{min-width:0;overflow:hidden} .settings-tag-create{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;align-items:center;margin-top:10px;max-width:100%} .settings-tag-create input{min-width:0;width:100%;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 10px;outline:none} .settings-tag-create input:focus{border-color:var(--accent)} .settings-tag-create button{width:42px;min-width:42px;padding:8px} /* RTL-aware list rows and tree stems. */ body.ui-he .history-row,body.ui-he .note-library-open,body.ui-he .bookmark-library-row>button:first-child{text-align:right} body.ui-he .tree-name,body.ui-he .tree-book-open{text-align:right} body.ui-he .tree-children{margin-left:0;padding-left:0;border-left:0;margin-right:17px;padding-right:19px;border-right:1px solid var(--border)} body.ui-he .tree-children>.tree-node:before,body.ui-he .tree-children>.tree-book-row:before{left:auto;right:-19px;border-top:1px solid var(--border)} body.ui-he .tree-meta{margin-right:0;margin-left:auto} /* Reader header uses compact icons; PDF frame remains the proven native implementation. */ .reader-top-actions .icon-button{width:36px;height:36px}.reader-page-header{padding:9px 11px} .pdf-frame{position:static!important;inset:auto!important;width:100%!important;height:100%!important;display:block!important;border:0!important;background:#fff!important;min-width:0!important;min-height:0!important} @media (max-width:820px){ body.ui-he .app-shell{grid-template-columns:1fr} body.ui-he .sidebar{grid-column:1;position:fixed;inset:0 0 0 auto;border-left:1px solid var(--border);border-right:0} body.ui-he .sidebar.collapsed{transform:translateX(100%)} body.ui-he .main-area{grid-column:1} body.ui-he .reader-layout{grid-template-columns:1fr} body.ui-he .reader-main{grid-column:1} body.ui-he .reader-side{position:absolute;left:0;right:auto;top:0;bottom:0;width:min(88vw,360px);z-index:10;box-shadow:var(--shadow);border-right:0;border-left:1px solid var(--border)} .study-switcher{top:64px}.study-switcher span{display:none} } .reader-host{position:relative} .reader-pane.reader-inactive{position:absolute!important;inset:0!important;visibility:hidden!important;pointer-events:none!important;opacity:0!important} .reader-pane:not(.reader-inactive){position:relative!important;visibility:visible!important;opacity:1!important} /* ===== v1.1 Library aesthetic: shelves, book spines, quieter chrome ===== */ :root{ --paper:#f7f3eb; --paper-deep:#efe9de; --ink:#2c2924; --shelf-line:#cfc6b7; --shelf-shadow:rgba(69,55,39,.14); --volume-0:#34483c; --volume-1:#604433; --volume-2:#3c5356; --volume-3:#555861; --volume-4:#725b49; --volume-5:#4e6758; --volume-6:#67464a; --volume-7:#4f5260; } body:not(.dark){--bg:var(--paper);--panel:#fbf8f2;--panel-2:var(--paper-deep);--text:var(--ink);--border:#ded7cb;--hover:#f0ebe2;--accent:#394b3d} body.dark{--shelf-line:#494b44;--shelf-shadow:rgba(0,0,0,.3);--volume-0:#293a31;--volume-1:#4e372c;--volume-2:#304447;--volume-3:#44464e;--volume-4:#594638;--volume-5:#3e5246;--volume-6:#51383b;--volume-7:#40424d} body{background:var(--bg);letter-spacing:.003em} /* Top chrome resembles a quiet reading room rather than a utility app. */ .topbar{min-height:58px;padding:8px 18px;background:color-mix(in srgb,var(--bg) 94%,transparent);box-shadow:none} .topbar-title{position:absolute;left:50%;transform:translateX(-50%);font-family:Georgia,"Times New Roman",serif;font-size:21px;letter-spacing:.01em;white-space:nowrap;color:var(--text)} body.ui-he .topbar-title{font-family:"Noto Serif Hebrew","Times New Roman",serif} .topbar .icon-button{width:34px;height:34px;border-color:transparent;background:transparent;color:var(--muted)} .topbar .icon-button:hover{background:var(--hover);color:var(--text)} /* Sidebar: less dashboard, more understated navigation drawer. */ body.ui-he .app-shell{grid-template-columns:minmax(0,1fr) 238px} .app-shell{grid-template-columns:238px minmax(0,1fr)} .sidebar{background:color-mix(in srgb,var(--panel) 97%,var(--bg));} .sidebar-top-fixed{padding:14px 13px 10px;background:transparent} .brand{padding:1px 2px 10px}.brand-mark{display:none}.brand-copy{min-width:0}.brand h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:17px;white-space:nowrap}.brand p{display:none} body.ui-he .brand h1{font-family:"Noto Serif Hebrew","Times New Roman",serif} .sidebar-collapse{border:0;background:transparent;color:var(--muted)} .compact-nav{gap:2px;margin-top:3px}.compact-nav .nav-item{font-size:13px;font-weight:450;padding:8px 9px;border-radius:8px;color:color-mix(in srgb,var(--text) 86%,var(--muted))}.compact-nav .nav-item.active{font-weight:650;background:var(--hover)} .sidebar-tabs-scroll{border-top:1px solid var(--border);padding-top:10px}.sidebar-section-title{letter-spacing:.025em;text-transform:none;font-weight:600} .sidebar-bottom-fixed{background:transparent} .content{max-width:1580px;padding:26px clamp(24px,4vw,62px) 56px} /* Home hero inspired by the supplied mockups. */ .library-hero{border:0;background:transparent;border-radius:0;text-align:center;padding:56px 16px 34px;margin:0 auto 18px;max-width:1080px} .library-hero .hero-kicker{font-size:11px;letter-spacing:.28em;color:var(--muted);margin-bottom:15px} .library-hero h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,4.7vw,66px);font-weight:400;line-height:1.12;margin:0 auto 28px} body.ui-he .library-hero h2{font-family:"Noto Serif Hebrew","Times New Roman",serif} .library-hero .hero-actions{justify-content:center;margin-top:16px}.library-hero .hero-actions .secondary-button{background:transparent;border-color:var(--border)} .home-search{margin:0 auto;max-width:730px;display:flex;align-items:center;justify-content:center;position:relative;transition:.2s ease} .home-search .home-search-button{position:absolute;inset-inline-start:10px;z-index:2;width:38px;height:38px;padding:0;border:0;background:transparent;font-size:22px} .home-search .home-search-input{width:100%;height:58px;border:1px solid #cfc7bb;background:color-mix(in srgb,var(--panel) 82%,transparent);color:var(--text);border-radius:13px;padding:0 58px 0 20px;outline:none;font-size:15px;box-shadow:0 2px 10px rgba(56,43,30,.04)} body.ui-he .home-search .home-search-input{padding:0 58px 0 20px} .home-search .home-search-input:focus{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)} .home-search:not(.expanded) .home-search-input{opacity:1;pointer-events:auto} /* Section typography and spacing. */ .section{margin-top:42px}.section-header{margin-bottom:13px}.section-header h3,.shelf-subtitle{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:29px;margin:0} body.ui-he .section-header h3,body.ui-he .shelf-subtitle{font-family:"Noto Serif Hebrew","Times New Roman",serif} .section-header p{font-size:12px}.shelf-subtitle{font-size:22px;margin:34px 0 10px}.shelf-section+.shelf-section{padding-top:4px} /* The shelf itself: one quiet row by default, expanding into additional rows. */ .book-shelf{position:relative;min-width:0;padding:2px 0 22px;border-bottom:1px solid var(--shelf-line)} .book-shelf::after{content:"";position:absolute;inset-inline:0;bottom:-5px;height:5px;border-radius:0 0 3px 3px;background:linear-gradient(to bottom,color-mix(in srgb,var(--shelf-line) 85%,transparent),transparent);opacity:.72;pointer-events:none} .book-shelf-track{position:relative;display:flex;align-items:flex-end;gap:16px;min-width:0;overflow:hidden;white-space:normal;padding:0 4px 6px;min-height:250px;scrollbar-width:thin} body.ui-he .book-shelf-track{direction:rtl} body.ui-en .book-shelf-track{direction:ltr} .book-shelf.expanded .book-shelf-track{flex-wrap:wrap;overflow:visible;row-gap:34px;padding-bottom:9px;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 268px,color-mix(in srgb,var(--shelf-line) 72%,transparent) 269px,color-mix(in srgb,var(--shelf-line) 72%,transparent) 270px,transparent 276px);background-size:100% 276px} .book-shelf.has-overflow:not(.expanded) .book-shelf-track{padding-inline-end:116px} .shelf-expand-control{position:absolute;z-index:8;inset-inline-end:6px;bottom:12px;width:102px;height:226px;border:1px dashed color-mix(in srgb,var(--border) 90%,transparent);border-radius:9px;background:color-mix(in srgb,var(--panel) 93%,var(--bg));color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-size:12px;box-shadow:0 5px 18px rgba(45,36,28,.05)} .shelf-expand-control:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 42%,var(--border));background:var(--panel)} .shelf-expand-icon{font-size:23px;font-weight:300}.book-shelf.expanded .shelf-expand-control{position:static;width:auto;height:34px;margin:10px auto -9px;padding:0 14px;flex-direction:row;border-radius:999px} /* Book/category volumes. */ .shelf-volume{--volume-color:var(--volume-0);position:relative;flex:0 0 132px;width:132px;height:226px;border-radius:6px 6px 4px 4px;transform-origin:center bottom;transition:transform .18s ease,filter .18s ease;isolation:isolate;box-shadow:0 8px 12px rgba(44,35,27,.11),inset 1px 0 rgba(255,255,255,.13),inset -1px 0 rgba(0,0,0,.18)} .category-volume{flex-basis:146px;width:146px;height:238px} .shelf-volume:hover,.shelf-volume:focus-within{transform:translateY(-7px);filter:saturate(1.03)} .volume-tone-0{--volume-color:var(--volume-0)}.volume-tone-1{--volume-color:var(--volume-1)}.volume-tone-2{--volume-color:var(--volume-2)}.volume-tone-3{--volume-color:var(--volume-3)}.volume-tone-4{--volume-color:var(--volume-4)}.volume-tone-5{--volume-color:var(--volume-5)}.volume-tone-6{--volume-color:var(--volume-6)}.volume-tone-7{--volume-color:var(--volume-7)} .volume-cover{position:absolute;inset:0;width:100%;height:100%;border:1px solid color-mix(in srgb,var(--volume-color) 76%,#1d1b18);border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 9%,transparent 89%,rgba(0,0,0,.09)),linear-gradient(180deg,color-mix(in srgb,var(--volume-color) 108%,white) 0%,var(--volume-color) 100%);color:#f8f4eb;padding:26px 15px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;overflow:hidden} .volume-cover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 15%,rgba(255,255,255,.08),transparent 32%),linear-gradient(115deg,transparent 48%,rgba(255,255,255,.025) 49%,transparent 52%);pointer-events:none} .volume-cover strong{position:relative;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:17px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 1px rgba(0,0,0,.16)} body.ui-he .volume-cover strong{font-family:"Noto Serif Hebrew","Times New Roman",serif;font-size:18px} .volume-kind{position:relative;font-size:9px;letter-spacing:.13em;text-transform:uppercase;opacity:.73}.volume-author{position:relative;font-size:10px;line-height:1.25;opacity:.78;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .volume-rule{position:absolute;top:28px;left:14px;right:14px;height:1px;background:rgba(247,242,232,.36)}.volume-rule-bottom{top:auto;bottom:28px} .volume-star{position:absolute;z-index:4;top:8px;inset-inline-end:8px;border:0;background:transparent;color:rgba(255,255,255,.76);font-size:22px;width:30px;height:30px;display:grid;place-items:center;padding:0;opacity:.78}.volume-star.active{color:#ffe2a3;opacity:1}.volume-star:hover{transform:scale(1.08)} /* Hover reveals metadata without turning the shelf into a dashboard. */ .volume-details{position:absolute;z-index:5;inset:0;border-radius:inherit;padding:15px 12px 11px;background:linear-gradient(180deg,rgba(27,27,25,.96),rgba(31,30,27,.985));color:#f6f1e8;display:flex;flex-direction:column;opacity:0;transform:translateY(3px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;box-shadow:0 13px 30px rgba(0,0,0,.26)} .shelf-volume:hover .volume-details,.shelf-volume:focus-within .volume-details{opacity:1;transform:none;pointer-events:auto} .volume-details-main{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:6px}.volume-detail-kind{font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#bab6ae}.volume-details h4{font-family:Georgia,"Times New Roman",serif;font-size:16px;font-weight:500;line-height:1.25;margin:1px 0 2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.volume-details p{margin:0;font-size:10px;line-height:1.4;color:#c8c4bc;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.volume-detail-author{color:#eee9df!important;font-size:11px!important}.volume-detail-stats{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.volume-detail-stats span{font-size:9px;border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:3px 6px;color:#d5d0c7} .volume-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px;max-height:50px;overflow:hidden}.volume-tags .tag-chip{font-size:8px;padding:3px 6px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.13);color:#e5e0d7} .volume-detail-actions{margin-top:auto;display:flex;align-items:center;gap:5px;padding-top:9px}.volume-action-primary,.volume-action-icon{border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.08);color:#fff;border-radius:7px;height:29px}.volume-action-primary{flex:1;padding:0 9px;font-size:10px}.volume-action-icon{width:29px;padding:0;font-size:15px}.volume-action-primary:hover,.volume-action-icon:hover{background:rgba(255,255,255,.15)}.volume-action-icon.active{color:#ffe2a3} /* Old card styling stays available for non-library utilities, but shelves no longer look like cards. */ .book-shelf .card{display:none} /* Category/library controls float lightly above the shelf. */ .breadcrumbs{margin-bottom:22px;font-size:12px}.breadcrumbs button{color:var(--muted)}.breadcrumbs button:hover{color:var(--text)} .toolbar .secondary-button,.toolbar .icon-button,.toolbar select{background:transparent;border-color:var(--border)}.toolbar .active-toggle{background:var(--panel)} @media (max-width:1050px){ .content{padding-inline:28px}.book-shelf-track{gap:13px}.shelf-volume{flex-basis:124px;width:124px;height:216px}.category-volume{flex-basis:136px;width:136px;height:226px}.library-hero{padding-top:40px}.library-hero h2{font-size:46px} } @media (max-width:820px){ .content{padding:18px 14px 44px}.topbar-title{font-size:18px}.library-hero{padding:30px 4px 20px}.library-hero h2{font-size:36px;margin-bottom:20px}.library-hero .hero-kicker{letter-spacing:.16em}.home-search .home-search-input{height:52px}.section{margin-top:32px}.section-header h3{font-size:25px} .book-shelf-track{overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}.book-shelf.has-overflow:not(.expanded) .book-shelf-track{padding-inline-end:8px}.shelf-expand-control{display:none!important}.shelf-volume{scroll-snap-align:start} } @media (hover:none){ .shelf-volume:hover{transform:none}.volume-details{display:none}.volume-star{opacity:1} } /* Keep the existing home interaction: compact search control that opens into the large search bar. */ .home-search{width:48px;max-width:min(730px,100%);height:58px} .home-search .home-search-input{width:0!important;opacity:0!important;pointer-events:none!important;padding-inline:0!important;border-color:transparent!important;box-shadow:none!important} .home-search.expanded{width:min(730px,100%)} .home-search.expanded .home-search-input{width:100%!important;opacity:1!important;pointer-events:auto!important;padding-inline-start:58px!important;padding-inline-end:20px!important;border-color:#cfc7bb!important;box-shadow:0 2px 10px rgba(56,43,30,.04)!important} body.ui-he .home-search.expanded .home-search-input{padding-inline-start:58px!important;padding-inline-end:20px!important} /* ===== v1.2 polish: organic palettes, stable chrome, reader actions ===== */ .content{position:relative} /* Always provide a way back to the global sidebar, including inside the reader. */ .sidebar-reopen{display:none;position:fixed;z-index:45;top:12px;inset-inline-end:12px;width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--text);box-shadow:0 5px 18px rgba(0,0,0,.08);place-items:center;font-size:19px} .app-shell.sidebar-collapsed .sidebar-reopen{display:grid} body.reader-focus .sidebar-reopen{display:none!important} /* Hebrew is the primary layout: global navigation on the right, reading tools on the left. */ body.ui-he .sidebar{grid-column:2!important;border-right:0!important;border-left:1px solid var(--border)!important} body.ui-he .main-area{grid-column:1!important} body.ui-he .reader-layout{grid-template-columns:340px minmax(0,1fr)!important} body.ui-he .reader-side{grid-column:1!important;grid-row:1!important;border-left:0!important;border-right:1px solid var(--border)!important} body.ui-he .reader-main{grid-column:2!important;grid-row:1!important} body.ui-he .reader-layout.side-closed{grid-template-columns:1fr!important} body.ui-he .reader-layout.side-closed .reader-main{grid-column:1!important} /* Top actions should explain destructive/important filesystem actions. */ .topbar-action{height:36px;padding:0 10px!important;background:transparent!important;border-color:var(--border)!important;color:var(--muted)!important;font-size:12px;white-space:nowrap} .topbar-action:hover{color:var(--text)!important;background:var(--hover)!important} /* Home-only בס״ד. */ .home-bsd{position:absolute;top:10px;right:clamp(18px,3vw,48px);font-family:"Noto Serif Hebrew","Times New Roman",serif;font-size:12px;color:var(--muted);letter-spacing:.04em;opacity:.82} /* User-selectable book palettes. Deterministic tone assignment still keeps each volume stable. */ body.palette-organic{ --volume-0:#465a48;--volume-1:#6e503b;--volume-2:#3f5b5a;--volume-3:#5b5c61; --volume-4:#80664d;--volume-5:#63725b;--volume-6:#744e52;--volume-7:#4c5564; } body.palette-forest{ --volume-0:#314739;--volume-1:#3e5540;--volume-2:#506149;--volume-3:#2e4b49; --volume-4:#5c6044;--volume-5:#425947;--volume-6:#4c5140;--volume-7:#35505a; } body.palette-earth{ --volume-0:#665044;--volume-1:#7a563e;--volume-2:#685c4d;--volume-3:#705047; --volume-4:#84674e;--volume-5:#5f5949;--volume-6:#754948;--volume-7:#5f514c; } body.palette-quiet{ --volume-0:#4d5551;--volume-1:#5b514b;--volume-2:#46565a;--volume-3:#565860; --volume-4:#655b52;--volume-5:#536058;--volume-6:#605052;--volume-7:#4d5360; } body.dark.palette-organic{--volume-0:#334338;--volume-1:#513c30;--volume-2:#304746;--volume-3:#44464a;--volume-4:#5e4c3d;--volume-5:#465343;--volume-6:#543b3f;--volume-7:#3b424e} body.dark.palette-forest{--volume-0:#26382d;--volume-1:#304333;--volume-2:#3d4c39;--volume-3:#263d3b;--volume-4:#464a34;--volume-5:#334537;--volume-6:#3a3f31;--volume-7:#2b4149} body.dark.palette-earth{--volume-0:#493a32;--volume-1:#5a402f;--volume-2:#4b4439;--volume-3:#513a35;--volume-4:#604b3a;--volume-5:#454136;--volume-6:#563638;--volume-7:#463b38} body.dark.palette-quiet{--volume-0:#3b413e;--volume-1:#443d39;--volume-2:#354246;--volume-3:#41434a;--volume-4:#4c453f;--volume-5:#3e4942;--volume-6:#483d3f;--volume-7:#393e48} /* Books and categories share the shelf language, but are subtly recognizable. */ .shelf-volume{box-shadow:0 8px 13px rgba(44,35,27,.13),inset 1px 0 rgba(255,255,255,.13),inset -1px 0 rgba(0,0,0,.2)} .book-volume{border-radius:5px 7px 4px 4px} .category-volume{border-radius:9px 4px 4px 4px;transform-origin:center bottom} .book-volume .volume-cover::after{content:"";position:absolute;top:0;bottom:0;inset-inline-start:8px;width:3px;border-inline-start:1px solid rgba(255,255,255,.17);border-inline-end:1px solid rgba(0,0,0,.11);opacity:.72} .category-volume .volume-cover::after{content:"";position:absolute;inset:12px 9px;border:1px solid rgba(249,243,232,.18);border-radius:7px;pointer-events:none} .category-volume .volume-kind{border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 7px;letter-spacing:.08em;background:rgba(0,0,0,.07)} .category-volume .volume-cover strong{font-size:19px} /* Hover metadata keeps the book visually present instead of replacing it. */ .volume-details{inset:auto 5px 5px 5px;height:69%;border-radius:8px 8px 4px 4px;padding:11px 10px 9px;background:linear-gradient(180deg,rgba(30,29,26,.78),rgba(27,26,23,.94));backdrop-filter:blur(4px);transform:translateY(7px);box-shadow:0 9px 20px rgba(0,0,0,.22)} .shelf-volume:hover .volume-cover,.shelf-volume:focus-within .volume-cover{filter:brightness(.94) saturate(1.02)} .volume-details h4{font-size:14px;-webkit-line-clamp:2}.volume-details p{font-size:9px;-webkit-line-clamp:2}.volume-detail-actions{padding-top:6px}.volume-tags{max-height:31px} /* Align the overflow volume with the books on the shelf. */ .book-shelf.has-overflow:not(.expanded) .book-shelf-track{padding-inline-end:118px} .shelf-expand-control{bottom:28px;height:226px;width:102px} .category-shelf-section .shelf-expand-control{height:238px} .book-shelf.expanded .shelf-expand-control{margin-top:14px;margin-bottom:-6px} /* Reader chrome: compact actionable title + clickable breadcrumb trail. */ .reader-page-header{padding:8px 11px;min-height:58px} .reader-book-info{flex:1;min-width:0}.reader-title-wrap{display:grid;gap:1px;min-width:0}.reader-title-wrap h2{font-size:16px} .reader-breadcrumb-wrap{min-width:0;overflow:hidden}.reader-breadcrumbs{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden;white-space:nowrap;font-size:10px;color:var(--muted)} .reader-breadcrumbs button{border:0;background:transparent;color:var(--muted);padding:1px 2px;max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reader-breadcrumbs button:hover{color:var(--accent)}.reader-breadcrumbs span{opacity:.55} .reader-book-meta{font-size:10px!important;margin:1px 0 0!important}.reader-favorite.active,.saved-favorite.active,.favorite-saved-star.active{color:#c99633!important} .reader-top-actions{flex-wrap:nowrap}.reader-top-actions .icon-button{border-color:transparent;background:transparent}.reader-top-actions .icon-button:hover{background:var(--hover)} /* Saved-note/bookmark favorite states. */ .saved-favorite{font-size:17px}.favorite-saved-list{display:grid;gap:8px}.favorite-saved-row{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:6px;border:1px solid var(--border);background:var(--panel);border-radius:11px;padding:5px}.favorite-saved-open{border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:minmax(140px,.8fr) minmax(180px,1.5fr) auto;align-items:center;gap:12px;text-align:inherit;padding:9px 10px;min-width:0}.favorite-saved-open span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px}.favorite-saved-open small{color:var(--muted);font-size:11px}.favorite-saved-star{border:0;background:transparent;font-size:19px;color:var(--muted);border-radius:8px}.favorite-saved-star:hover{background:var(--hover)}.saved-subtitle{font-size:20px;margin-top:28px} /* Settings palette and repair controls. */ .palette-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}.palette-choice{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;padding:8px;display:flex;align-items:center;gap:8px;text-align:inherit}.palette-choice.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent)}.palette-swatches{width:48px;height:18px;border-radius:999px;flex:0 0 auto;background:linear-gradient(90deg,#465a48 0 25%,#6e503b 25% 50%,#3f5b5a 50% 75%,#744e52 75%)}.palette-swatches.forest{background:linear-gradient(90deg,#314739 0 25%,#506149 25% 50%,#2e4b49 50% 75%,#5c6044 75%)}.palette-swatches.earth{background:linear-gradient(90deg,#665044 0 25%,#7a563e 25% 50%,#84674e 50% 75%,#754948 75%)}.palette-swatches.quiet{background:linear-gradient(90deg,#4d5551 0 25%,#5b514b 25% 50%,#46565a 50% 75%,#605052 75%)} .settings-file-actions{align-items:stretch}.settings-file-actions button{flex:1;white-space:nowrap}.settings-help{font-size:11px!important;color:var(--muted);line-height:1.45;margin-top:9px!important} @media (max-width:820px){ .topbar-action span:last-child{display:none}.topbar-action{width:36px;padding:0!important} .home-bsd{top:8px;right:16px} .favorite-saved-open{grid-template-columns:1fr;gap:4px} .palette-choices{grid-template-columns:1fr} body.ui-he .reader-layout{grid-template-columns:1fr!important} body.ui-he .reader-main{grid-column:1!important} body.ui-he .reader-side{left:0!important;right:auto!important;position:absolute!important;width:min(88vw,360px)!important} } h4.shelf-subtitle + .book-shelf .shelf-expand-control{height:238px} .saved-row-actions{display:flex;align-items:center;justify-content:center;gap:2px;align-self:center}.saved-row-actions .saved-favorite{width:28px;height:28px;display:grid;place-items:center;padding:0} .note-library-row,.bookmark-library-row{grid-template-columns:minmax(0,1fr) auto} /* ===== v1.3 shelf simplification + per-item colors ===== */ /* Hebrew layout: navigation is physically on the RIGHT. */ body.ui-he .app-shell{grid-template-columns:minmax(0,1fr) 238px!important} body.ui-he .app-shell.sidebar-collapsed{grid-template-columns:minmax(0,1fr) 0!important} body.ui-he .sidebar{grid-column:2!important;grid-row:1!important;border-right:0!important;border-left:1px solid var(--border)!important} body.ui-he .main-area{grid-column:1!important;grid-row:1!important} /* Category heading: title on the right, create button on the left in RTL. */ .shelf-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:30px 0 10px;min-height:40px} .shelf-title-row .shelf-subtitle{margin:0} .shelf-title-add{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:transparent!important} .tree-category-title{margin-top:18px} /* Simpler, flatter books: muted organic color, two rules, title. */ .shelf-volume{--volume-color:#4e5d51;cursor:pointer;box-shadow:0 7px 11px rgba(44,35,27,.13);border-radius:5px 6px 4px 4px;transition:transform .16s ease,box-shadow .16s ease} .shelf-volume:hover,.shelf-volume:focus-within{transform:translateY(-5px);filter:none;box-shadow:0 11px 18px rgba(44,35,27,.17)} .book-volume{width:132px;flex-basis:132px;height:226px;border-radius:5px 7px 4px 4px} .category-volume{width:142px;flex-basis:142px;height:232px;border-radius:8px 5px 4px 4px} .volume-cover{border:1px solid color-mix(in srgb,var(--volume-color) 80%,#24211d);background:linear-gradient(180deg,color-mix(in srgb,var(--volume-color) 93%,#fff) 0%,var(--volume-color) 100%);padding:25px 14px;color:#f7f3ea;gap:0} .volume-cover::before{display:none!important} .book-volume .volume-cover::after{display:none!important} .category-volume .volume-cover::after{content:""!important;display:block!important;position:absolute!important;top:-1px!important;inset-inline-start:14px!important;width:30px!important;height:5px!important;border:0!important;border-radius:0 0 4px 4px!important;background:color-mix(in srgb,var(--volume-color) 74%,#1d1b18)!important;opacity:.7!important} .volume-cover strong{font-weight:400;font-size:18px;line-height:1.45;-webkit-line-clamp:4;text-shadow:none} body.ui-he .volume-cover strong{font-size:19px;font-weight:400} .volume-rule{top:29px;left:15px;right:15px;background:rgba(247,242,232,.42)} .volume-rule-bottom{top:auto;bottom:29px} .volume-kind,.volume-author{display:none!important} /* Favorite star: filled and clearly yellow only when selected. */ .volume-star{top:8px;inset-inline-end:7px;color:rgba(255,255,255,.7);opacity:.75;font-size:20px} .volume-star.active{color:#f4c542!important;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.18)} .volume-star:hover{transform:scale(1.07)} /* Hover information stays small and leaves most of the physical book visible. */ .volume-details{inset:auto 6px 6px 6px!important;height:auto!important;max-height:47%!important;min-height:58px;border-radius:7px 7px 3px 3px;padding:9px 9px 8px;background:rgba(28,27,24,.82)!important;backdrop-filter:blur(3px);box-shadow:none;transform:translateY(6px);overflow:hidden} .volume-details-main{gap:3px;overflow:hidden} .volume-details h4{display:none!important} .volume-details p{font-size:9px!important;line-height:1.35!important;-webkit-line-clamp:2!important;color:#ddd8cf!important} .volume-detail-author{font-size:10px!important;color:#f3eee5!important} .volume-detail-kind{font-size:8px;color:#bbb6ad;letter-spacing:.04em;text-transform:none} .volume-detail-stats{display:none!important} .volume-tags{max-height:24px;margin-top:2px;gap:3px;overflow:hidden} .volume-tags .tag-chip{font-size:8px;padding:2px 5px} .volume-detail-actions{padding-top:4px;justify-content:flex-end;margin-top:2px} .volume-action-primary{display:none!important} .volume-action-icon{width:27px;height:27px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)} .category-volume .volume-details{min-height:44px;max-height:38%!important} .category-volume .volume-details p{-webkit-line-clamp:2!important} /* Expand control visually sits on the same baseline as the volumes. */ .book-shelf.has-overflow:not(.expanded) .book-shelf-track{padding-inline-end:108px} .shelf-expand-control{inset-inline-end:4px;bottom:28px;width:92px;height:226px;border-radius:7px;box-shadow:none} .category-shelf-section .shelf-expand-control{height:232px} h4.shelf-subtitle + .book-shelf .shelf-expand-control{height:226px} /* Open-book tabs carry the same book color. */ .reader-tab{border-inline-start:4px solid var(--tab-color,#66736a)!important;padding-inline-start:1px} .reader-tab.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tab-color,#66736a) 35%,transparent)} /* Any color can be selected in book/category management. */ .color-input-wrap{display:flex;align-items:center;gap:10px;border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:7px 9px;color:var(--muted);font-size:12px} .color-input-wrap input[type="color"]{width:48px;height:34px;padding:2px;border:0;background:transparent;cursor:pointer} .color-input-wrap input[type="color"]::-webkit-color-swatch-wrapper{padding:0} .color-input-wrap input[type="color"]::-webkit-color-swatch{border:1px solid var(--border);border-radius:7px} /* Old palette controls no longer exist, but suppress any stale styling if cached DOM appears. */ .palette-choices,.palette-choice{display:none!important} @media (max-width:820px){ body.ui-he .sidebar{right:0!important;left:auto!important;inset:0 0 0 auto!important} body.ui-he .sidebar.collapsed{transform:translateX(100%)!important} .shelf-title-row{margin-top:24px} .volume-details{display:none!important} } /* ===== v1.3.1 screenshot-driven layout fixes ===== */ /* RTL changes the physical meaning of CSS Grid line numbers. Keep the outer placement coordinate system LTR, then restore RTL inside the actual UI. This guarantees that column 2 is physically the RIGHT column. */ body.ui-he .app-shell{ direction:ltr!important; grid-template-columns:minmax(0,1fr) 238px!important; } body.ui-he .app-shell.sidebar-collapsed{ grid-template-columns:minmax(0,1fr) 0!important; } body.ui-he .sidebar{ direction:rtl!important; grid-column:2!important; grid-row:1!important; right:auto!important; left:auto!important; border-left:1px solid var(--border)!important; border-right:0!important; } body.ui-he .main-area{ direction:rtl!important; grid-column:1!important; grid-row:1!important; } /* There were two hamburger buttons. Keep the in-sidebar close control, and when collapsed show only the floating reopen control on the RIGHT. */ #sidebarToggle{display:none!important} body.ui-he .sidebar-reopen{ inset-inline-start:auto!important; inset-inline-end:12px!important; right:12px!important; left:auto!important; } body.ui-he .sidebar-collapse{ margin-right:auto!important; margin-left:0!important; } /* Reader tools are the opposite rail: physically LEFT in Hebrew. */ body.ui-he .reader-layout{direction:ltr!important;grid-template-columns:340px minmax(0,1fr)!important} body.ui-he .reader-side{direction:rtl!important;grid-column:1!important;grid-row:1!important;border-left:0!important;border-right:1px solid var(--border)!important} body.ui-he .reader-main{direction:rtl!important;grid-column:2!important;grid-row:1!important} body.ui-he .reader-layout.side-closed{grid-template-columns:1fr!important} body.ui-he .reader-layout.side-closed .reader-main{grid-column:1!important} /* Home category title actions: simple, compact, clearly labeled. */ .shelf-title-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto} .shelf-title-action{min-height:34px;padding:6px 10px;border-radius:9px;font-size:12px;white-space:nowrap} /* Collapsed shelf: the expand volume gets real layout space instead of being absolutely placed over the last book. */ .book-shelf.has-overflow:not(.expanded){ display:flex; align-items:flex-end; gap:14px; } body.ui-he .book-shelf.has-overflow:not(.expanded){direction:rtl} body.ui-en .book-shelf.has-overflow:not(.expanded){direction:ltr} .book-shelf.has-overflow:not(.expanded) .book-shelf-track{ flex:1 1 auto; width:auto; min-width:0; padding-inline-end:4px!important; } .book-shelf.has-overflow:not(.expanded) .shelf-expand-control{ position:relative!important; inset:auto!important; flex:0 0 92px; width:92px!important; height:226px!important; margin:0 0 6px!important; transform:none!important; } .category-shelf-section .book-shelf.has-overflow:not(.expanded) .shelf-expand-control{ height:226px!important; } /* Expanded shelves use a fixed row pitch. Every volume is bottom-aligned in a 260px row, and the repeating rule is drawn at that same bottom edge. This prevents the second row from visually sitting on the previous shelf. */ .book-shelf.expanded{display:block!important} .book-shelf.expanded .book-shelf-track{ display:grid!important; grid-template-columns:repeat(auto-fill,132px)!important; grid-auto-rows:260px!important; justify-content:start!important; align-items:end!important; column-gap:16px!important; row-gap:0!important; overflow:visible!important; padding:0 4px 4px!important; min-height:0!important; background-image:repeating-linear-gradient( to bottom, transparent 0, transparent 254px, color-mix(in srgb,var(--shelf-line) 82%,transparent) 255px, color-mix(in srgb,var(--shelf-line) 82%,transparent) 256px, transparent 257px, transparent 260px )!important; background-size:100% 260px!important; } body.ui-he .book-shelf.expanded .book-shelf-track{direction:rtl} body.ui-en .book-shelf.expanded .book-shelf-track{direction:ltr} .book-shelf.expanded .shelf-volume{ align-self:end!important; margin-bottom:4px!important; } /* Category covers stay subtly distinct, but share the same shelf baseline. */ .book-shelf.expanded .category-volume{height:232px!important} .book-shelf.expanded .book-volume{height:226px!important} .book-shelf.expanded .shelf-expand-control{ position:static!important; width:max-content!important; height:34px!important; margin:12px auto 0!important; padding:0 14px!important; flex-direction:row!important; border-radius:999px!important; } /* The outer shelf's single bottom line is only needed for the collapsed row; expanded rows draw their own shelf rules. */ .book-shelf.expanded{border-bottom:0!important;padding-bottom:4px!important} .book-shelf.expanded::after{display:none!important} @media (max-width:820px){ body.ui-he .app-shell{direction:ltr!important;grid-template-columns:1fr!important} body.ui-he .sidebar{ direction:rtl!important; position:fixed!important; top:0!important;right:0!important;bottom:0!important;left:auto!important; grid-column:auto!important; } body.ui-he .sidebar.collapsed{transform:translateX(100%)!important} body.ui-he .main-area{grid-column:auto!important} body.ui-he .reader-layout{grid-template-columns:1fr!important;position:relative!important} body.ui-he .reader-main{grid-column:1!important} body.ui-he .reader-side{ position:absolute!important;left:0!important;right:auto!important;top:0!important;bottom:0!important; width:min(88vw,360px)!important;z-index:10!important;border-left:1px solid var(--border)!important;border-right:0!important; } .shelf-title-actions{gap:5px}.shelf-title-action{padding:5px 8px;font-size:11px} } /* ===== v1.3.2 compact visual cleanup ===== */ /* Sidebar header is intentionally devotional/minimal; product title remains in the top bar. */ .sidebar-bsd-brand{min-height:40px;display:flex;align-items:center;justify-content:space-between;padding-inline:4px} .sidebar-bsd{font-family:"Noto Serif Hebrew","Times New Roman",serif;font-size:12px;font-weight:400;letter-spacing:.03em;color:var(--muted);opacity:.82;white-space:nowrap} .sidebar-bsd-brand .sidebar-collapse{margin-inline-start:auto!important} .home-bsd{display:none!important} /* Subtle translucent linear lighting, matching the quiet reference-cover treatment. */ .volume-cover::before{ content:""!important;display:block!important;position:absolute!important;inset:0!important; background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.045) 31%,rgba(255,255,255,0) 55%,rgba(15,12,9,.11) 100%)!important; opacity:.58!important;pointer-events:none!important;z-index:0!important } .volume-cover strong,.volume-rule{z-index:1} .category-volume .volume-cover::after{z-index:1} /* Keep the favorite glyph clear of the decorative top rule. */ .book-volume .volume-rule:first-child{inset-inline-start:42px!important} .volume-star{top:5px!important;inset-inline-end:7px!important;width:30px!important;height:30px!important;font-size:20px!important;line-height:1!important;z-index:5!important} /* Home is now intentionally spare: no mid-page navigation/search controls. */ .library-hero{padding-bottom:18px!important} .library-hero h2{margin-bottom:0!important} .library-hero .hero-actions,.library-hero .home-search{display:none!important} .book-shelf-title-row{margin-top:30px;margin-bottom:10px} /* Folder + icon: recognizable but visually as quiet as the rest of the toolbar. */ .folder-plus-icon{width:19px;height:19px;display:inline-grid;place-items:center;flex:0 0 auto} .folder-plus-icon svg{width:19px;height:19px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* The title-row actions belong opposite the heading in both RTL and LTR. */ body.ui-he .shelf-title-row{direction:rtl} body.ui-he .shelf-title-actions{margin-inline-start:auto} body.ui-en .shelf-title-actions{margin-inline-start:auto} /* ===== v1.3.3 small visual fixes ===== */ /* The star uses the clear space above the top rule. It is always physically in the upper-right corner, independent of RTL/LTR logical properties. */ .volume-star{ top:5px!important; right:8px!important; left:auto!important; inset-inline-start:auto!important; inset-inline-end:auto!important; width:27px!important; height:27px!important; font-size:20px!important; line-height:1!important; } /* Leave a little extra room between the star and the decorative rule. */ .volume-rule{top:31px!important} .volume-rule-bottom{top:auto!important;bottom:29px!important} /* Chrome/ChromeOS may paint native