:root {
    --bg:#f5f6f8; --bg2:#ffffff; --card:#ffffff; --border:#e5e7eb;
    --text:#1f2937; --muted:#6b7280; --accent:#2563eb; --accent-soft:#eff4ff;
    --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
    --shadow-hover:0 6px 20px rgba(0,0,0,.10);
    --page-margin:16px;
    --sidebar-inset:0px;
  }
  [data-theme="dark"] {
    --bg:#0f1115; --bg2:#161a20; --card:#1b2027; --border:#2a313b;
    --text:#e6e8eb; --muted:#9aa4b2; --accent:#3b82f6; --accent-soft:#1e2a44;
    --shadow:0 1px 3px rgba(0,0,0,.4); --shadow-hover:0 8px 26px rgba(0,0,0,.5);
  }
  * { box-sizing:border-box; }
  html,body { height:100%; }
  body {
    margin:0; font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
    background:var(--bg); color:var(--text); min-height:100%;
    background-size:cover; background-position:center; background-attachment:fixed;
  }
  body.has-wallpaper { --bg:transparent; --bg2:rgba(22,26,32,.88); --card:rgba(27,32,39,.9); }
  html[data-theme="light"] body.has-wallpaper { --bg2:rgba(255,255,255,.88); --card:rgba(255,255,255,.9); }

  .topbar { position:fixed; top:10px; right:10px; z-index:30; display:flex; align-items:center; gap:8px; }
  #meta { font-size:11px; color:var(--muted); opacity:.6; }
  .icon-btn {
    width:34px; height:34px; border-radius:8px; border:1px solid var(--border);
    background:var(--card); color:var(--text); cursor:pointer; font-size:15px;
    display:inline-flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
    opacity:.7; transition:opacity .15s;
  }
  .icon-btn:hover { opacity:1; border-color:var(--accent); }

  body.mode-launch .clock { font-size:52px; }
  body.mode-launch .hero { margin:8vh auto 20px; }
  body.mode-launch .greet { margin-bottom:28px; }
  body.mode-launch .shortcut-bar { margin:18px 0 0; }
  body.mode-launch .sc-btn { padding:10px 22px; font-size:calc(var(--sc-size,14px) + 2px); border-radius:24px; }
  body.mode-launch main { display:none; }
  body.mode-launch .shortcut-bar { display:none !important; }

  .hero { max-width:var(--sw,720px); margin:3vh auto 14px; padding:0 20px; text-align:center; }
  .clock { font-size:42px; font-weight:700; transition:font-size .3s; }
  .greet { color:var(--muted); margin:2px 0 18px; font-size:14px; }
  .searchbox { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:6px 6px 6px 14px; box-shadow:var(--shadow-hover); }
  .searchbox:focus-within { border-color:var(--accent); }
  #engine { border:none; background:transparent; color:var(--text); font-size:13px; padding:6px 2px; cursor:pointer; outline:none; max-width:90px; }
  .sep { width:1px; height:20px; background:var(--border); }
  #q { flex:1; border:none; background:transparent; color:var(--text); font-size:15px; padding:9px 4px; outline:none; }
  .go { border:none; background:var(--accent); color:#fff; border-radius:10px; padding:9px 16px; font-size:13px; cursor:pointer; font-weight:600; }
  .hint { color:var(--muted); font-size:11px; margin-top:8px; }

  .suggestions { display:none; position:absolute; top:100%; left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:0 0 12px 12px; box-shadow:var(--shadow-hover); z-index:20; max-height:260px; overflow-y:auto; margin:0; padding:0; list-style:none; text-align:left; }
  .suggestions.open { display:block; }
  .suggestions li { padding:8px 14px; cursor:pointer; font-size:13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:6px; }
  .suggestions li:hover, .suggestions li.active { background:var(--accent-soft); }
  .suggestions li:last-child { border-bottom:none; }
  .sug-fav { width:16px; height:16px; border-radius:3px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:var(--accent); flex:none; }
  .sug-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sug-url { font-size:10px; color:var(--muted); }
  .hero { position:relative; }
  .searchbox { position:relative; z-index:21; }

  body.sticky-hero { --hero-h:78px; }
  body.sticky-hero .hero {
    position:fixed; top:0; left:0; right:0; z-index:25;
    background:var(--bg); margin:0 auto; padding:4px 20px;
    box-shadow:0 1px 6px rgba(0,0,0,0.06);
  }
  body.sticky-hero.has-wallpaper .hero { background:var(--bg2); }
  body.sticky-hero .clock { font-size:20px; }
  body.sticky-hero .greet { font-size:11px; margin-bottom:5px; }
  body.sticky-hero .hint { display:none; }
  body.sticky-hero main { padding-top:calc(var(--hero-h) + 10px); }

  body.sticky-hero.freeze-sc .shortcut-bar:not(.left):not(.right) {
    position:fixed; top:var(--hero-h); left:0; right:0;
    z-index:24; background:var(--bg); margin:0; padding:6px 20px 8px;
    box-shadow:0 1px 4px rgba(0,0,0,0.04);
  }
  body.sticky-hero.freeze-sc.has-wallpaper .shortcut-bar:not(.left):not(.right) { background:var(--bg2); }
  body.sticky-hero.freeze-sc main { padding-top:calc(var(--hero-h) + var(--sc-h, 56px)); }

  .shortcut-bar { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:0 20px; margin:12px 0 0; }
  .shortcut-bar.hidden { display:none; }
  .sc-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:4px;
    padding:var(--sc-pady,6px) var(--sc-padx,14px);
    border-radius:var(--sc-radius,20px); border:1px solid var(--border);
    background:var(--card); color:var(--text); font-size:var(--sc-size,14px); cursor:pointer;
    box-shadow:var(--shadow); white-space:nowrap;
    min-width:var(--sc-minw,auto);
  }
  .sc-btn:hover { border-color:var(--accent); background:var(--accent-soft); }
  .sc-btn.dragging { opacity:.4; transform:scale(.95); }
  .shortcut-bar.left, .shortcut-bar.right { flex-direction:column; position:fixed; top:50%; transform:translateY(-50%); width:auto; margin:0; gap:6px; z-index:10; max-height:calc(100vh - 80px); overflow-y:auto; background:var(--bg2); padding:14px 8px; border-radius:14px; box-shadow:var(--shadow-hover); }
  .shortcut-bar.left { left:var(--sidebar-inset,0px); }
  .shortcut-bar.right { right:var(--sidebar-inset,0px); }
  .searchbox { --sh:0px; min-height:var(--sh,0px); }

  main { padding:0 var(--page-margin,16px) 50px; }
  body.folder-horiz main { max-width:none; }
  body.folder-horiz .folder-scroll { display:flex; gap:16px; overflow-x:auto; padding-bottom:8px; scroll-behavior:smooth; scrollbar-width:thin; }
  body.folder-horiz.folder-cols #content { display:contents; }
  body.folder-horiz.folder-cols .folder-scroll { display:grid !important; grid-template-columns:repeat(var(--cols,1), 1fr); gap:16px; overflow-x:visible !important; width:100%; }
  body.folder-horiz.folder-cols .folder-column { min-width:0 !important; max-width:none !important; flex:none !important; }
  body.folder-horiz .folder-column { min-width:var(--folder-w,340px); max-width:var(--folder-w,340px); flex-shrink:0; }
  body.sticky-hero.folder-horiz .folder-scroll { padding-top: 10px; }
  body:not(.folder-horiz) .folder-column { margin-bottom:24px; }

  .folder-head {
    display:flex; align-items:center; gap:8px; margin:0 0 10px; cursor:pointer;
    color:var(--fh-color, var(--muted)); font-size:12px; font-weight:600; user-select:none;
    padding:4px 0; background:var(--bg); z-index:1;
  }
  body.has-wallpaper .folder-head { text-shadow:0 0 4px rgba(0,0,0,0.35); }
  html[data-theme="dark"] body.has-wallpaper .folder-head { text-shadow:0 0 4px rgba(255,255,255,0.25); }
  body.folder-horiz .folder-head { background:transparent; }
  body.folder-horiz .folder-head .line { flex:1; height:1px; background:var(--border); }
  .folder-head .caret { transition:transform .15s; }
  .folder-column.collapsed .caret { transform:rotate(-90deg); }
  .folder-column.collapsed .grid { display:none; }
  .folder-head .count { font-weight:400; opacity:.7; font-size:11px; }

  .grid { display:flex; flex-direction:column; gap:6px; }
  .card {
    display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text);
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    padding:10px 12px; box-shadow:var(--shadow);
    transition:transform .10s, box-shadow .10s, border-color .10s; overflow:hidden;
  }
  .card:hover { transform:translateY(-1px); box-shadow:var(--shadow-hover); border-color:var(--accent); }
  .fav {
    width:var(--icon,28px); height:var(--icon,28px); border-radius:7px; flex:none;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    background:var(--accent-soft); font-weight:700; color:var(--accent); font-size:calc(var(--icon,28px) * .45);
  }
  .fav img { width:100%; height:100%; object-fit:contain; }
  .card .t { display:flex; flex-direction:column; min-width:0; }
  .card .t .name { font-size:var(--fs,13px); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .card .t .host { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .hide-icons .fav { display:none; }
  .hide-host .host { display:none; }

  body:not(.folder-horiz) .grid { display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(var(--tile,150px), 1fr)); }

  .status { color:var(--muted); font-size:12px; text-align:center; padding:16px; }
  .status.err { color:#dc2626; }
  mark { background:#fde68a; color:#1f2937; padding:0 2px; border-radius:2px; }

  .drawer-mask { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40; }
  .drawer-mask.open { opacity:1; pointer-events:auto; }
  .drawer {
    position:fixed; top:0; right:0; height:100%; width:340px; max-width:90vw; z-index:50;
    background:var(--bg2); border-left:1px solid var(--border); box-shadow:-8px 0 30px rgba(0,0,0,.15);
    transform:translateX(100%); transition:transform .22s ease; padding:18px 18px 30px; overflow-y:auto;
    overscroll-behavior:contain;
  }
  .drawer.open { transform:translateX(0); }
  .drawer h3 { margin:0 0 2px; font-size:15px; }
  .drawer-titlebar { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
  .drawer .sub { color:var(--muted); font-size:12px; margin-bottom:14px; }
  .field { margin-bottom:16px; }
  .field > label { display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
  .seg { display:flex; gap:5px; flex-wrap:wrap; }
  .seg button { flex:1; min-width:56px; padding:7px 4px; border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:8px; cursor:pointer; font-size:12px; }
  .seg button.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:600; }
  .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .row input[type=range] { flex:1; }
  .switch { display:flex; align-items:center; gap:8px; }
  .drawer .val { font-size:11px; color:var(--muted); min-width:40px; text-align:right; }
  .drawer .foot { border-top:1px solid var(--border); padding-top:12px; margin-top:6px; }
  .link-btn { background:none; border:none; color:var(--accent); cursor:pointer; font-size:13px; padding:0; }
  .wp-preview { width:100%; height:80px; border-radius:8px; background:var(--bg) center/cover; margin-bottom:8px; border:1px solid var(--border); }
  .chk-list { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; }
  .chk-list label { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; padding:4px 2px; border-radius:4px; }
  .chk-list label:hover { background:var(--accent-soft); }
  .sf-row { display:flex; align-items:center; gap:4px; }
  .sf-row label { flex:1; min-width:0; }
  .sf-ops { display:flex; gap:2px; flex:none; }
  .sf-btn { border:1px solid var(--border); background:var(--card); color:var(--muted); cursor:pointer; font-size:9px; line-height:1; padding:4px 5px; border-radius:5px; }
  .sf-btn:hover { color:var(--accent); border-color:var(--accent); }
  .drawer-close {
    position:absolute; top:6px; right:10px;
    background:none; border:none; color:var(--muted); font-size:28px; cursor:pointer;
    line-height:1; padding:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  }
  .drawer-close:hover { color:var(--text); }

  .drawer-section { border-bottom:1px solid var(--border); margin-bottom:2px; }
  .drawer-section:last-of-type { border-bottom:none; }
  .drawer-section summary {
    font-size:13px; font-weight:600; cursor:pointer; padding:10px 0 6px;
    list-style:none; user-select:none; color:var(--accent);
  }
  .drawer-section summary::-webkit-details-marker { display:none; }
  .drawer-section summary::before { content:'\25b8 '; display:inline-block; transition:transform .18s; margin-right:4px; font-size:10px; }
  .drawer-section[open] summary::before { transform:rotate(90deg); }
  .drawer-section .field { margin-bottom:12px; }
  .drawer-section .switch { margin-top:6px; margin-bottom:12px; }

  .btn-backtop {
    position:fixed; bottom:28px; right:28px; z-index:15;
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--border); background:var(--card); color:var(--muted);
    cursor:pointer; font-size:18px; box-shadow:var(--shadow-hover);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(12px); pointer-events:none;
    transition:opacity .18s, transform .18s;
  }
  .btn-backtop.show { opacity:.85; transform:translateY(0); pointer-events:auto; }
  .btn-backtop:hover { opacity:1; border-color:var(--accent); color:var(--accent); }

  .launch-desktop { max-width:960px; margin:var(--launch-margin-y,32px) auto 60px; padding:0 var(--launch-padx,24px); }
  body:not(.mode-launch) .launch-desktop { display:none; }
  .launch-grid {
    display:grid; grid-template-columns:repeat(var(--launch-cols,5), 1fr);
    column-gap:16px; row-gap:24px; justify-items:center;
  }
  .launch-app {
    display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
    width:100%; max-width:calc(var(--launch-icon,56px) + 36px);
    -webkit-tap-highlight-color:transparent;
  }
  .launch-tile {
    width:var(--launch-icon,56px); height:var(--launch-icon,56px); border-radius:var(--launch-radius,22%);
    display:flex; align-items:center; justify-content:center;
    font-size:calc(var(--launch-icon,56px) * .4); font-weight:700; color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.15);
    transition:transform .12s, box-shadow .12s; user-select:none;
  }
  .launch-app:hover .launch-tile { transform:translateY(-3px) scale(1.05); box-shadow:0 8px 20px rgba(0,0,0,.2); }
  .launch-app:active .launch-tile { transform:scale(.94); }
  .launch-label {
    font-size:var(--launch-label,13px); color:var(--text); max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

  /* ---- 快捷启动：自定义网站按钮 ---- */
  .launch-app.dragging { opacity:.45; }
  .launch-fav { width:58%; height:58%; object-fit:contain; border-radius:8px; background:#fff; }

  .pop-mask {
    position:fixed; inset:0; z-index:45;
    background:rgba(15,23,42,.32); backdrop-filter:blur(3px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity var(--pop-anim,.2s);
  }
  .pop-mask.open { opacity:1; pointer-events:auto; }
  .popup {
    width:var(--pop-w,75vw); max-width:720px; height:var(--pop-h,75vh); max-height:760px;
    background:var(--bg2); border:1px solid var(--border); border-radius:20px;
    box-shadow:0 24px 70px rgba(0,0,0,.3);
    display:flex; flex-direction:column; overflow:hidden;
    transform:scale(.92) translateY(14px); opacity:0;
    transition:transform var(--pop-anim,.2s) cubic-bezier(.2,.8,.3,1), opacity var(--pop-anim,.2s);
  }
  .pop-mask.open .popup { transform:scale(1) translateY(0); opacity:1; }
  .pop-head { display:flex; align-items:center; gap:8px; padding:16px 20px 12px; border-bottom:1px solid var(--border); }
  .pop-head .t { font-size:16px; font-weight:700; flex:1; }
  .pop-close { border:none; background:none; color:var(--muted); font-size:24px; cursor:pointer; line-height:1; padding:2px 8px; border-radius:8px; }
  .pop-close:hover { color:var(--text); background:rgba(0,0,0,.06); }
  .pop-list { flex:1; overflow-y:auto; padding:6px 10px; overscroll-behavior:contain; }
  .pop-bm { display:flex; align-items:center; gap:13px; padding:10px 12px; border-radius:12px; text-decoration:none; color:var(--text); }
  .pop-bm:hover { background:var(--accent-soft); }
  .pop-bm .fav2 { width:32px; height:32px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; overflow:hidden; background:var(--accent); }
  .pop-bm .fav2 img { width:100%; height:100%; object-fit:contain; background:#fff; border-radius:50%; }
  .pop-bm .info { min-width:0; flex:1; }
  .pop-bm .nm { font-size:var(--pop-fs, var(--fs,13px)); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pop-bm .ur { font-size:calc(var(--pop-fs, var(--fs,13px)) * .82); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
  .pop-crumb { padding:11px 20px 14px; border-top:1px solid var(--border); font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
  .pop-crumb b { color:var(--text); font-weight:600; }

  @media (max-width:640px){
    body.sticky-hero { --hero-h:66px; }
    .hero { margin-top:1.5vh; padding:0 12px; }
    body.mode-launch .hero { margin:4vh auto 14px; }
    body.mode-launch .clock { font-size:38px; }
    .clock { font-size:32px; }
    .greet { font-size:12px; margin-bottom:14px; }
    .searchbox { border-radius:12px; padding:4px 4px 4px 8px; }
    #q { font-size:14px; padding:7px 2px; }
    #engine { font-size:12px; max-width:72px; }
    .go { padding:7px 12px; font-size:12px; }
    .hint { font-size:10px; }
    .sc-btn { padding:6px 12px; font-size:12px; }
    body.mode-launch .sc-btn { padding:8px 16px; font-size:14px; }
    .shortcut-bar { gap:6px; padding:0 10px; }
    main { padding:0 var(--page-margin,8px) 40px; }
    .folder-head { font-size:11px; }
    .card { padding:8px 10px; border-radius:10px; gap:8px; }
    .topbar { top:8px; right:8px; }
    .drawer { width:100%; max-width:100%; }
    body.folder-horiz .folder-column { min-width:280px; max-width:280px; }
    body:not(.folder-horiz) .grid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
    .popup { max-width:94vw; }
    .launch-desktop { margin-top:20px; padding:0 14px; }
  }

  /* ---- 书签数据源设置 ---- */
  .ds-row { display:flex; gap:6px; align-items:center; }
  .ds-row input {
    flex:1; min-width:0; padding:8px 10px; font-size:12px;
    border:1px solid var(--border); border-radius:8px;
    background:var(--card); color:var(--text); outline:none;
  }
  .ds-row input:focus { border-color:var(--accent); }
  .ds-btn {
    flex:none; padding:8px 12px; font-size:12px; cursor:pointer;
    border:1px solid var(--border); border-radius:8px;
    background:var(--card); color:var(--text);
  }
  .ds-btn:hover { border-color:var(--accent); color:var(--accent); }
  .ds-btn:disabled { opacity:.55; cursor:default; }
  .ds-hint { margin-top:6px; font-size:11px; line-height:1.55; color:var(--muted); word-break:break-all; }
  .ds-hint code { font-size:10px; background:var(--accent-soft); color:var(--accent); padding:1px 4px; border-radius:3px; }

  /* ---- 安全区（刘海屏 / 手势条） ---- */
  body { padding-bottom:env(safe-area-inset-bottom, 0px); }
  .topbar { top:calc(10px + env(safe-area-inset-top, 0px)); }

  /* ---- 移动端增强（窄屏触控优先） ---- */
  @media (max-width:700px){
    /* iOS 上字号 <16px 的输入框会触发页面自动缩放 */
    #q, .ds-row input { font-size:16px; }
    #q { padding:6px 2px; }
    #engine { font-size:13px; }
    .ds-row input { padding:9px 10px; }
    .icon-btn { width:40px; height:40px; font-size:17px; border-radius:10px; }
    .clock { font-size:34px; }
    .greet { font-size:12.5px; }
    main { padding-bottom:calc(50px + env(safe-area-inset-bottom, 0px)); }
    .folder-head { font-size:12.5px; padding:7px 0; }
    .card { padding:11px 12px; gap:11px; }
    .card .t .name { font-size:14px; }
    .fav { width:32px; height:32px; border-radius:8px; }
    .shortcut-bar {
      overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start;
      padding:2px 4px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .shortcut-bar::-webkit-scrollbar { display:none; }
    .sc-btn { flex:none; }
    .drawer { width:100%; max-width:100%; padding:16px 16px 44px; }
    .seg button { padding:10px 6px; font-size:13px; min-width:64px; }
    .drawer-section summary { padding:13px 0 8px; font-size:14px; }
    .btn-backtop { bottom:calc(20px + env(safe-area-inset-bottom, 0px)); right:20px; }
    body.folder-horiz .folder-scroll { scroll-snap-type:x proximity; }
    .folder-column { scroll-snap-align:start; }
    .launch-grid { row-gap:20px; }
    .popup { border-radius:16px; }
  }

  /* ---- 独立应用模式（添加到主屏幕后启动） ---- */
  @media (display-mode:standalone){
    .topbar { top:calc(12px + env(safe-area-inset-top, 0px)); }
  }