*{box-sizing:border-box}
:root{
  --text:#202124;--muted:#7b7f87;--glass:rgba(255,255,255,.72);--icon-bg:#fff;
  --border:rgba(0,0,0,.08);--shadow:0 12px 40px rgba(0,0,0,.08);
  --accent:#111;--bg:#f5f6f8;
}
@media(prefers-color-scheme:dark){
  :root{--text:#f2f3f5;--muted:#9da2ad;--glass:rgba(28,29,33,.72);--icon-bg:#fff;
  --border:rgba(255,255,255,.10);--shadow:0 12px 40px rgba(0,0,0,.25);--accent:#fff;--bg:#17181b}
}
body{
  margin:0;min-height:100vh;color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  background:var(--bg);
  /* background-image:radial-gradient(circle at 50% 15%,rgba(255,255,255,.75),transparent 38%); */
  background:linear-gradient(135deg,#dbe7f3,#eef3f8);
}
.page{min-height:100vh;padding:10vh 28px 70px;display:flex;align-items:center;flex-direction:column}
.hero{width:min(720px,100%);text-align:center}
/*
.clock{font-size:clamp(54px,8vw,88px);font-weight:300;letter-spacing:-3px;line-height:1}
*/
.clock{
  width:5.2em;
  margin:0 auto;
  font-size:clamp(54px,8vw,88px);
  font-weight:300;
  letter-spacing:-3px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  white-space:nowrap;
}

.date{margin-top:12px;color:var(--muted);font-size:15px}
.search{
  height:58px;margin:34px auto 0;width:100%;display:flex;align-items:center;
  background:var(--glass);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--shadow);backdrop-filter:blur(20px);overflow:visible
}
.engine,.search-btn{border:0;background:none;color:var(--muted);cursor:pointer}
.engine{width:54px;font-size:20px;font-weight:600}

#engineButton img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
  margin:auto;
}

.search input{flex:1;height:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:16px}
.search input::placeholder{color:var(--muted)}
.search-btn{width:54px;font-size:27px}
.items{
  width:min(820px,100%);display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px;margin-top:34px;min-height:76px
}
.item{
  width:76px;min-height:76px;border:0;background:transparent;box-shadow:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:7px;color:var(--text);cursor:pointer;border-radius:12px;
  transition:transform .16s,opacity .16s
}
.item:hover{transform:translateY(-2px);opacity:.78}
.item.dragging{opacity:.35}
.icon{
  width:44px;height:44px;border-radius:11px;object-fit:contain;
  padding:7px;background:var(--icon-bg);box-shadow:0 1px 4px rgba(0,0,0,.10);
  display:block
}
.folder-icon{
  width:44px;height:44px;font-size:29px;line-height:44px;text-align:center;
  border-radius:11px;background:var(--icon-bg);box-shadow:0 1px 4px rgba(0,0,0,.10)
}
.item-name{font-size:12px;line-height:18px;max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.add{
  position:fixed;right:28px;bottom:28px;width:50px;height:50px;border-radius:50%;
  border:1px solid var(--border);background:var(--glass);color:var(--text);
  box-shadow:var(--shadow);font-size:28px;cursor:pointer;backdrop-filter:blur(16px)
}
.menu{
  position:fixed;right:28px;bottom:88px;padding:6px;border:1px solid var(--border);
  background:var(--glass);border-radius:14px;box-shadow:var(--shadow);backdrop-filter:blur(20px)
}
.menu button{display:block;width:130px;padding:10px 12px;border:0;background:none;color:var(--text);
text-align:left;border-radius:9px;cursor:pointer}
.menu button:hover{background:rgba(127,127,127,.12)}
.hidden{display:none!important}
dialog{border:0;padding:0;background:transparent;color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.28);backdrop-filter:blur(4px)}
.dialog{width:min(420px,calc(100vw - 32px));padding:24px;border-radius:20px;
background:var(--glass);border:1px solid var(--border);box-shadow:var(--shadow);backdrop-filter:blur(25px)}
.dialog h2{margin:0 0 20px;font-size:20px}
.dialog label{display:block;font-size:13px;color:var(--muted);margin:14px 0}
.dialog input{display:block;width:100%;margin-top:7px;height:42px;padding:0 12px;border-radius:10px;
border:1px solid var(--border);background:rgba(127,127,127,.08);color:var(--text);outline:0}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
.primary,.secondary{border:0;border-radius:10px;padding:10px 16px;cursor:pointer}
.primary{background:var(--accent);color:var(--bg)}
.secondary{background:rgba(127,127,127,.12);color:var(--text)}
.wide{width:100%;margin-top:18px}
.folder-items{display:flex;flex-wrap:wrap;gap:12px;max-height:55vh;overflow:auto}
.folder-items .item{background:transparent}
.empty{color:var(--muted);font-size:13px;padding:24px}
@media(max-width:600px){
  .page{padding:15vh 16px 70px}.search{height:54px;margin-top:28px}
  .items{gap:10px}.item{width:70px;min-height:72px}
  .add{right:18px;bottom:18px}
  .menu{right:18px;bottom:78px}
}

.context-menu{
  position:fixed;z-index:20;min-width:120px;padding:5px;
  background:var(--glass);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);backdrop-filter:blur(20px)
}
.context-menu button{display:block;width:100%;padding:9px 12px;border:0;background:none;
color:var(--text);text-align:left;border-radius:8px;cursor:pointer}
.context-menu button:hover{background:rgba(127,127,127,.12)}
.folder-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.folder-head h2{margin:0}

.engine-wrap{
  position:relative;
  flex:0 0 auto;
}

.engine{
  width:auto;
  min-width:92px;
  height:58px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:14px;
  font-weight:500;
}

.engine img{
  width:20px;
  height:20px;
  object-fit:contain;
}

.engine-chevron{
  font-size:12px;
  opacity:.55;
  margin-left:2px;
}

.engine-menu{
  position:absolute;
  z-index:30;
  top:calc(100% + 8px);
  left:0;
  min-width:175px;
  padding:6px;

  background:var(--glass);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(20px);
}

.engine-menu button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;

  border:0;
  background:none;
  color:var(--text);
  border-radius:9px;
  cursor:pointer;
  text-align:left;
  font-size:14px;
}

.engine-menu button:hover{
  background:rgba(127,127,127,.12);
}

.engine-menu img{
  width:20px;
  height:20px;
  object-fit:contain;
}

.engine-check{
  margin-left:auto;
  color:var(--muted);
  font-size:15px;
}

@media(max-width:600px){
  .engine{
    min-width:82px;
    padding:0 9px;
  }

  .engine-menu{
    min-width:160px;
  }
}