/* Simple everyday controls and a live view of the actual page. */
body[data-direction=focus]{font-family:'Segoe UI Variable Text','Microsoft YaHei UI','PingFang SC',system-ui,sans-serif}
body[data-direction=focus][data-wallpaper=black]{background:#000!important;--bg:#000}
body[data-direction=focus][data-wallpaper=white]{background:#fff!important;--bg:#fff}
body[data-direction=focus]:is([data-wallpaper=black],[data-wallpaper=white]) .wallpaper-layer{display:none}
/* One reading treatment per component, including headings, navigation and footer. */
body.app[data-direction=focus][data-material] .desktop-grid .site-name{font-weight:500;font-size:14px;letter-spacing:0}
body.app[data-direction=focus][data-material] #clock-time{font-weight:350;letter-spacing:-1.5px}
body.app[data-direction=focus][data-material] .appearance-label{font-weight:600}
body.app[data-direction=focus][data-material] :is(.site-info,.desktop-tile-domain,.tile-open-label,.category-tile-copy,.category-tile-count,#clock-time,.clock-calendar,.appearance-label,.section-title,.section-title>small,.app-footer>span,.manage-context>span,.intro h1,.intro-description,.eyebrow,.search-wrap input,.collection-tabs>button,.quick-filters>button,.topbar .breadcrumb,.topbar .top-actions,.sidebar .brand,.sidebar .main-nav,.sidebar .category-nav,.sidebar .nav-heading,.sidebar .sidebar-bottom,.category-heading-actions>button,.quick-actions){background:none!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.app[data-direction=focus][data-material] :is(.appearance-label,.section-title>small,.app-footer>span,.manage-context>span,.intro h1,.intro-description,.eyebrow){padding:0}
body.app[data-direction=focus][data-material] .section-title{padding:5px 0}
body.app[data-direction=focus][data-material] .table-wrap table{background:none!important}
/* Reading changes ink, never the configured glass fill. First paint, enhanced
   reading and unavailable sampling also stay uniformly transparent. */
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .appearance-piece[data-piece-surface=glass]:not(.desktop-tile){--surface-reading-ink:rgb(24 43 55);--surface-reading-muted:rgb(45 62 72);--surface-reading-alpha:0;--surface-reading-shadow:0 1px 1px #fff8,0 0 1px #fff9;--text:var(--surface-reading-ink);--muted:var(--surface-reading-muted);color:var(--text);text-shadow:var(--surface-reading-shadow)}
body.app[data-direction=focus][data-theme=dark]:is([data-reading=soft],[data-reading=protected]) .appearance-piece[data-piece-surface=glass]:not(.desktop-tile){--surface-reading-ink:rgb(246 249 252);--surface-reading-muted:rgb(220 231 238);--surface-reading-shadow:0 1px 1px #0009,0 0 1px #000a}
/* Headings and toolbars are real material surfaces, never a separate fog veil.
   They use the same background, blur, radius and effect tokens as other pieces. */
body.app[data-direction=focus][data-material] .appearance-piece[data-reading-kind=toolbar]{padding:10px 14px;min-height:44px;gap:12px}
body.app[data-direction=focus][data-material] .appearance-piece[data-reading-kind=toolbar]::before{content:none}
body.app[data-direction=focus][data-material] .section-header .section-title{margin:0;padding:0;min-width:0}
body.app[data-direction=focus][data-material] .section-title>small{margin-left:9px}
body.app[data-direction=focus][data-material] .section-header .quick-actions{padding:0}
#material-scope-note{line-height:1.8;margin:9px 0 0}#quick-sync-materials[hidden]{display:none}
/* Desktop navigation and actions share one outer header surface. On phones
   the topbar is the surface, while navigation remains in its own drawer. */
@media(min-width:701px){
 body.app[data-direction=focus][data-material] .topbar.appearance-piece[data-joined-chrome=true]{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 body.app[data-direction=focus][data-material] .topbar .top-actions{padding:0}
}
@media(min-width:701px) and (max-width:1100px){
 body.app[data-direction=focus] .sidebar .brand{min-width:37px;width:37px}
 body.app[data-direction=focus] .sidebar .brand>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
body.app[data-direction=focus][data-material] :is(.collection-tabs,.quick-filters)>button{color:var(--text)!important}
body.app[data-direction=focus][data-material] :is(.collection-tabs>button.active,.quick-filters>button[aria-pressed=true]){text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;font-weight:600}
body.app[data-direction=focus][data-material] .appearance-piece[data-surface-reading=light] img[src^='/assets/icons/']:not(.site-favicon){filter:invert(1)}
body.app[data-direction=focus][data-material] .appearance-piece[data-surface-reading=ink] img[src^='/assets/icons/']:not(.site-favicon){filter:none}
body.app[data-direction=focus][data-theme=dark] .appearance-piece:not([data-surface-reading]) img[src^='/assets/icons/']:not(.site-favicon){filter:invert(1)}
body.app[data-direction=focus][data-material] .appearance-piece .button.primary img{filter:invert(1)!important}
body.app[data-direction=focus][data-theme=light] :is(.category-tile-icon,.site-icon) img[src^='/assets/icons/']{filter:none!important}
body.app[data-direction=focus][data-theme=dark] .category-tile-icon img[src^='/assets/icons/']{filter:invert(1)!important}
body.app[data-direction=focus][data-material] .site-icon img.favicon-fallback{filter:brightness(0)!important}
body.app[data-direction=focus][data-material] .brand-symbol img{filter:brightness(0) invert(1)!important}
body.app[data-direction=focus][data-material=calm][data-theme=dark] .brand-symbol img{filter:brightness(0)!important}
body.app[data-direction=focus][data-material=calm][data-theme=dark] .layout-edit-button[aria-pressed=true] img{filter:brightness(0)!important}
body.app[data-direction=focus][data-theme=dark] :is(.form-error,#category-error){color:#ffada9}
body.app[data-direction=focus][data-theme=dark] .site-icon.has-favicon{background:#e8eef2!important;border-color:#ffffff29;box-shadow:inset 0 1px 0 #ffffff50,0 2px 6px #0002}
/* The grid wrapper has no material of its own. Historical dark shadows must
   not frame the individual transparent heading and tiles in a rectangle. */
body.app[data-direction=focus][data-material=glass] .quick-access{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body.app[data-direction=focus][data-material=glass] .quick-access::before{content:none;display:none}
body.app[data-direction=focus][data-material] .search-wrap input::placeholder{color:var(--muted);opacity:1}
body.app[data-direction=focus][data-material] .top-actions .icon-button{background:var(--surface);border:1px solid var(--line);box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.app[data-direction=focus][data-material] .top-actions .icon-button:hover{background:var(--accent-soft)}
/* Icon plates and functional form/button/selected states retain their own fill. */
body[data-direction=focus]{--control-ink:#182b37;--control-muted:#2d3e48;--control-icon:none}
body[data-direction=focus][data-theme=dark]{--control-ink:#f6f9fc;--control-muted:#dce7ee;--control-icon:invert(1)}
/* Table headers paint a theme-colored fill, so their text uses that fill's
   palette rather than ink sampled from the underlying photo. */
body.app[data-direction=focus][data-material] .table-wrap th{color:var(--control-muted);text-shadow:none}
body.app[data-direction=focus][data-material] :is(.button:not(.primary),.main-nav button:is(.active,:hover),.category-nav button:is(.active,:hover),.layout-edit-button:not([aria-pressed=true]),.category-picker select,.tag){color:var(--control-ink)}
body.app[data-direction=focus][data-material] :is(.main-nav,.category-nav) button:is(.active,:hover)>span{color:var(--control-muted)}
body.app[data-direction=focus][data-material] :is(.button:not(.primary),.top-actions .icon-button,.main-nav button:is(.active,:hover),.category-nav button:is(.active,:hover),.layout-edit-button:not([aria-pressed=true]),.row-actions button:hover,.site-tools button,.tile-config,.tile-drag-handle,.category-drag-handle) img[src^='/assets/icons/']{filter:var(--control-icon)!important}
body.app[data-direction=focus][data-material] .appearance-piece[data-surface-reading=light] .text-link{color:var(--surface-reading-ink)}
/* No lower-half mask or per-name badge: the wallpaper passes through the
   entire tile. Tiny text edges are the only enhanced-reading treatment. */
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass]{--tile-label-ink:rgb(24 43 55);--tile-label-muted:rgb(45 62 72);--tile-label-shade:0;--tile-label-shadow:0 1px 1px #fff8,0 0 1px #fff9}
body.app[data-direction=focus][data-theme=dark]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass]{--tile-label-ink:rgb(246 249 252);--tile-label-muted:rgb(220 231 238);--tile-label-shadow:0 1px 1px #0009,0 0 1px #000a}
body.app[data-direction=focus][data-material] .desktop-tile::after{content:none}
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass]>a{z-index:1}
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass] .site-tools{z-index:3}
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass] :is(.site-info,.desktop-tile-domain,.tile-open-label){background:none!important;border-color:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--tile-label-ink)!important;text-shadow:var(--tile-label-shadow)}
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass] .site-info :is(.site-name,.site-note){color:var(--tile-label-ink)!important}
body.app[data-direction=focus]:is([data-reading=soft],[data-reading=protected]) .desktop-tile[data-piece-surface=glass] .site-info .site-note{color:var(--tile-label-muted)!important}
/* Density changes real geometry, including explicitly wide/large cards. */
body.app[data-direction=focus][data-density=compact] .desktop-grid{grid-auto-rows:88px;gap:calc(var(--layout-gap,12px)*.66)}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile>a{padding:10px 11px;gap:6px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-icon{width:34px;height:34px;border-radius:10px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-favicon{width:25px;height:25px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-name{font-size:12px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile[data-tile-size=wide] .site-name{font-size:15px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile[data-tile-size=large] .site-name{font-size:19px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile[data-tile-size=large]>a{padding:15px;gap:10px}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-note{font-size:11px;line-height:1.5}
body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .tile-open-label{bottom:12px;right:14px}
body.app[data-direction=focus][data-density=compact] .category-grid{gap:calc(var(--layout-gap,12px)*.66)}
body.app[data-direction=focus][data-density=compact] .category-tile{min-height:84px;padding:14px 13px}
.density-button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}
/* A non-modal drawer keeps the real page visible. The phone sheet can be
   collapsed to a single return button to inspect the full page. */
#appearance-dialog[open]{position:fixed;inset:88px 18px 18px auto;margin:0;width:380px;max-width:calc(100% - 24px);height:calc(100dvh - 106px);max-height:900px;border-radius:20px;padding:20px;background:var(--surface);box-shadow:0 16px 60px #10203028;z-index:55}
#appearance-dialog .dialog-heading{margin-bottom:8px;align-items:flex-start}
#appearance-dialog .dialog-heading h2{font-size:17px;margin:0;letter-spacing:0}
.appearance-live-note{font-size:11px;line-height:1.7;color:var(--muted);margin:6px 0 0}
#appearance-dialog .appearance-section{padding:16px 0}
#appearance-dialog .appearance-section h3{font-size:12px;margin-bottom:11px}
#appearance-dialog .appearance-examples{gap:7px}
#appearance-dialog .example-scene{height:72px}
#appearance-dialog .appearance-examples strong{font-size:11px;margin:8px 3px 0}
#appearance-dialog .appearance-examples small{display:none}
#appearance-dialog .example-clock{font-size:17px;top:8px;padding:2px 6px}
#appearance-dialog .example-search{top:39px;height:9px}
#appearance-dialog .example-tiles{height:13px;bottom:9px}
#appearance-dialog .vista .example-clock{font-size:12px;left:5px;top:14px;padding:2px}
#appearance-dialog .vista .example-search{left:54%;top:21px}
#appearance-dialog .quiet .example-clock{font-size:13px;left:8px}
#appearance-dialog .quiet .example-search{top:37px}
#appearance-dialog .wallpaper-presets{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:10px}
#appearance-dialog .wallpaper-presets button{font-size:10px;padding:3px}
#appearance-dialog .wallpaper-swatch{height:33px;margin-bottom:5px;border-radius:7px}
.wallpaper-swatch.black{background:#000}.wallpaper-swatch.white{background:#fff}
#appearance-dialog .upload-wallpaper{min-height:34px;padding:6px 10px;font-size:11px}
.quick-choice-row{display:flex;gap:6px}.quick-choice-row>button{flex:1;min-height:44px;padding:7px;border:1px solid var(--line);border-radius:9px;font-size:12px;background:var(--bg);color:var(--text)}
.quick-choice-row>button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.theme-choices{margin-top:8px}.quick-effects{display:flex;gap:15px;flex-wrap:wrap}.quick-effects .appearance-check{margin:0;font-size:11px;min-height:44px}
#appearance-dialog .clock-position-options button{min-height:44px}
#appearance-advanced>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:46px;font-size:12px;font-weight:600;padding:10px 0;list-style:none}
#appearance-advanced>summary::-webkit-details-marker{display:none}
#appearance-advanced>summary>span{font-size:10px;color:var(--muted);font-weight:400}
#appearance-advanced[open]>summary{border-bottom:1px solid var(--line)}
#appearance-advanced .appearance-control-grid{grid-template-columns:1fr;gap:13px}
#appearance-advanced .appearance-switches{grid-template-columns:1fr}
#appearance-advanced .material-options{gap:8px}#appearance-advanced .material-options button{padding:12px 10px}#appearance-advanced .material-options strong{font-size:12px}
#appearance-dialog .settings-footer{display:flex;flex-direction:column;gap:9px;align-items:stretch;margin-top:9px;padding-top:12px}
.appearance-footer-actions{display:flex;gap:8px;justify-content:space-between}.appearance-footer-actions .button{min-height:38px;padding:8px 13px;font-size:11px}
.resume-appearance{position:fixed;right:20px;bottom:22px;z-index:50;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:0 8px 30px #10203025;min-height:44px;padding:10px 17px}
.resume-appearance[hidden]{display:none}
@media(min-width:1101px){body[data-direction=focus][data-appearance-open=true] main#main{margin-left:0;margin-right:412px;max-width:calc(100% - 412px)}}
@media(max-width:1100px){
 #appearance-dialog[open]{inset:auto 12px 12px;margin:0;width:calc(100% - 24px);max-width:600px;height:51dvh;max-height:600px;padding:16px 17px;border-radius:20px}
 #appearance-dialog .dialog-heading h2{font-size:15px}#appearance-dialog .appearance-live-note{font-size:10px;margin-top:3px}
 #appearance-dialog .settings-footer{gap:4px;margin-top:6px;padding-top:8px}#appearance-dialog .settings-footer>p{font-size:10px;max-height:34px;overflow:auto}
 #appearance-dialog .appearance-footer-actions .button{min-height:36px}
}
@media(max-width:700px){
 body.app[data-direction=focus][data-material] .desktop-grid .site-name{font-size:12px}
 body.app[data-direction=focus][data-material] .desktop-grid .desktop-tile[data-tile-size=small]>a{padding:7px 3px;gap:5px}
 body.app[data-direction=focus][data-material] .desktop-grid .desktop-tile[data-tile-size=small] .site-info{padding:1px 2px}
 body.app[data-direction=focus][data-material] .desktop-grid .desktop-tile[data-tile-size=small] .site-name{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.15}
 body.app[data-direction=focus][data-density=compact] .desktop-grid{grid-auto-rows:70px;gap:7px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile>a{padding:7px 5px;gap:3px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile[data-tile-size=small]>a{padding:5px 3px;gap:2px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-icon{width:29px;height:29px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-favicon{width:22px;height:22px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile .site-name{font-size:11px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile[data-tile-size=wide] .site-name{font-size:13px}
 body.app[data-direction=focus][data-density=compact] .desktop-grid .desktop-tile[data-tile-size=large] .site-name{font-size:16px}
 body.app[data-direction=focus][data-density=compact] .category-tile{min-height:114px;padding:10px;gap:7px}
 .resume-appearance{right:14px;bottom:15px;font-size:12px}
}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
 body.app[data-direction=focus][data-material] .appearance-piece[data-piece-surface=glass]:not(.desktop-tile):not([data-joined-chrome=true]){background:var(--surface)!important;--text:#182b37;--muted:#2d3e48;text-shadow:none}
 body.app[data-direction=focus][data-material][data-theme=dark] .appearance-piece[data-piece-surface=glass]:not(.desktop-tile){--text:#f6f9fc;--muted:#dce7ee}
 body.app[data-direction=focus][data-material] .appearance-piece[data-reading-kind=toolbar]::before{display:none}
}