@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root {
  --ui-base:        rgba(15, 15, 15, 0.4);
  --ui-base-rgb:    15, 15, 15;
  --ui-surface:     rgba(255, 255, 255, 0.03);
  --ui-surface-2:   rgba(255, 255, 255, 0.05);
  --ui-surface-3:   rgba(30, 30, 30, 0.4);
  --ui-surface-4:   rgba(25, 25, 25, 0.5);
  --ui-surface-5:   rgba(20, 20, 20, 0.6);
  --ui-overlay:     rgba(0, 0, 0, 0.5);
  --ui-border:      rgba(255, 255, 255, 0.15);
  --ui-border-sub:  rgba(255, 255, 255, 0.08);
  --ui-addr-bg:     rgba(0, 0, 0, 0.3);
  --ui-addr-focus:  rgba(255, 255, 255, 0.1);
  --ui-icon-bg:     rgba(255, 255, 255, 0.08);
  --ui-hover:       rgba(255, 255, 255, 0.12);
  --ui-hover-2:     rgba(255, 255, 255, 0.08);
  --ui-active:      rgba(255, 255, 255, 0.2);
  --ui-pin-remove:  rgba(255, 0, 0, 0.4);
  --ui-toast-bg:    rgba(20, 20, 20, 0.85);
  --ui-search-bg:   rgba(0, 0, 0, 0.2);
  --ui-accent:      #60a5fa;
  --ui-accent-rgb:  96, 165, 250;
  --ui-text:        #ffffff;
  --ui-text-sub:    rgba(255, 255, 255, 0.85);
  --ui-text-muted:  rgba(255, 255, 255, 0.6);
  --ui-text-dim:    rgba(255, 255, 255, 0.4);
  --ui-divider:     rgba(255, 255, 255, 0.12);
  --ui-secure:      #a7f3d0;
  --ui-star:        #fcd34d;
  --glass-blur:     blur(25px) saturate(200%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:transparent;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden;cursor:hidden;}

.browser{display:flex;flex-direction:column;height:100vh;background:transparent}
body {
  user-select: none;
}
.titlebar{
  display:flex;align-items:flex-end;
  background:transparent;height:46px;
  border-bottom:1px solid rgba(255,255,255,0.25);
}

.chrome-tabs{
  box-sizing:border-box;position:relative;
  font-family:inherit;font-size:12px;
  height:46px;padding:8px 3px 4px 3px;
  background:transparent;border-radius:5px 5px 0 0;overflow:hidden;
  flex:1;min-width:0;
}
.chrome-tabs *{box-sizing:inherit;font:inherit}
.chrome-tabs .chrome-tabs-content{position:relative;width:100%;height:100%}
.chrome-tabs .chrome-tab{
  position:absolute;left:0;height:36px;width:240px;
  border:0;margin:0;z-index:1;pointer-events:none;
}
.chrome-tabs .chrome-tab,.chrome-tabs .chrome-tab *{user-select:none;cursor:default}

.chrome-tabs .chrome-tab .chrome-tab-dividers{
  position:absolute;top:7px;bottom:7px;
  left:var(--tab-content-margin);right:var(--tab-content-margin);
}
.chrome-tabs .chrome-tab .chrome-tab-dividers,
.chrome-tabs .chrome-tab .chrome-tab-dividers::before,
.chrome-tabs .chrome-tab .chrome-tab-dividers::after{pointer-events:none}
.chrome-tabs .chrome-tab .chrome-tab-dividers::before,
.chrome-tabs .chrome-tab .chrome-tab-dividers::after{
  content:"";display:block;position:absolute;top:0;bottom:0;
  width:1px;background:var(--ui-divider);opacity:0;transition:opacity .2s ease;
}
.chrome-tabs .chrome-tab .chrome-tab-dividers::before{left:0}
.chrome-tabs .chrome-tab .chrome-tab-dividers::after{right:0}
.chrome-tabs .chrome-tab:first-child .chrome-tab-dividers::before{opacity:0}
.chrome-tabs .chrome-tab[active] .chrome-tab-dividers::before,
.chrome-tabs .chrome-tab[active] .chrome-tab-dividers::after,
.chrome-tabs .chrome-tab[active]+.chrome-tab .chrome-tab-dividers::before{opacity:0}

.chrome-tabs .chrome-tab .chrome-tab-background{
  position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;
}
.chrome-tabs .chrome-tab .chrome-tab-background>svg{width:100%;height:100%}
.chrome-tabs .chrome-tab .chrome-tab-background>svg .chrome-tab-geometry{fill:transparent}
.chrome-tabs .chrome-tab[active]{z-index:5}
.chrome-tabs .chrome-tab[active] .chrome-tab-background>svg .chrome-tab-geometry{fill:transparent}
.chrome-tabs .chrome-tab:not([active]) .chrome-tab-background{transition:opacity .2s ease;opacity:0}
@media(hover:hover){
  .chrome-tabs .chrome-tab:not([active]):hover{z-index:2}
  .chrome-tabs .chrome-tab:not([active]):hover .chrome-tab-content{
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.35);
  }
}
.chrome-tabs .chrome-tab.chrome-tab-was-just-added{top:10px;animation:chrome-tab-was-just-added 120ms forwards ease-in-out}
@keyframes chrome-tab-was-just-added{to{top:0}}

.chrome-tabs .chrome-tab .chrome-tab-content{
  position:absolute;display:flex;top:0;bottom:0;
  left:var(--tab-content-margin);right:var(--tab-content-margin);
  padding:9px 8px;border-top-left-radius:12px;border-top-right-radius:12px;
  overflow:hidden;pointer-events:all;
  background:transparent;
  border:1px solid rgba(255,255,255,0.18);
  border-bottom:none;
  transition:background 0.2s, border-color 0.2s;
}
.chrome-tabs .chrome-tab[active] .chrome-tab-content{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.5);
}
.chrome-tabs .chrome-tab[is-mini] .chrome-tab-content{padding-left:2px;padding-right:2px}

.chrome-tabs .chrome-tab .chrome-tab-favicon{
  position:relative;flex-shrink:0;flex-grow:0;height:16px;width:16px;background-size:16px;margin-left:4px;
}
.chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon{margin-left:0}
.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-favicon{margin-left:auto;margin-right:auto}
.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-favicon{display:none}

.chrome-tabs .chrome-tab .chrome-tab-title{
  flex:1;vertical-align:top;overflow:hidden;white-space:nowrap;
  margin-left:4px;color:var(--ui-text-sub);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(100% - 24px),transparent);
}
.chrome-tabs .chrome-tab[is-small] .chrome-tab-title{margin-left:0}
.chrome-tabs .chrome-tab .chrome-tab-favicon+.chrome-tab-title,
.chrome-tabs .chrome-tab[is-small] .chrome-tab-favicon+.chrome-tab-title{margin-left:8px}
.chrome-tabs .chrome-tab[is-smaller] .chrome-tab-favicon+.chrome-tab-title,
.chrome-tabs .chrome-tab[is-mini] .chrome-tab-title{display:none}
.chrome-tabs .chrome-tab[active] .chrome-tab-title{color:var(--ui-text)}

.chrome-tabs .chrome-tab .chrome-tab-drag-handle{
  position:absolute;top:0;bottom:0;right:0;left:0;
  border-top-left-radius:8px;border-top-right-radius:8px;
}

.chrome-tabs .chrome-tab .chrome-tab-close{
  flex-grow:0;flex-shrink:0;position:relative;width:16px;height:16px;border-radius:50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(255,255,255,.5)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'/></svg>");
  background-position:center;background-repeat:no-repeat;background-size:8px 8px;
}
@media(hover:hover){
  .chrome-tabs .chrome-tab .chrome-tab-close:hover{
    background-color:var(--ui-hover);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(255,255,255,.7)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'/></svg>");
  }
  .chrome-tabs .chrome-tab .chrome-tab-close:hover:active{
    background-color:var(--ui-active);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path stroke='rgba(255,255,255,.9)' stroke-linecap='square' stroke-width='1.5' d='M0 0 L8 8 M8 0 L0 8'/></svg>");
  }
}
@media not all and (hover:hover){
  .chrome-tabs .chrome-tab .chrome-tab-close:active{background-color:var(--ui-hover)}
}
@media(hover:hover){
  .chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active){opacity:.8}
}
.chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close{margin-left:auto}
.chrome-tabs .chrome-tab[is-mini]:not([active]) .chrome-tab-close{display:none}
.chrome-tabs .chrome-tab[is-mini][active] .chrome-tab-close{margin-left:auto;margin-right:auto}

.chrome-tabs.chrome-tabs-is-sorting .chrome-tab:not(.chrome-tab-is-dragging),
.chrome-tabs:not(.chrome-tabs-is-sorting) .chrome-tab.chrome-tab-was-just-dragged{transition:transform 120ms ease-in-out}

.chrome-tabs .chrome-tabs-bottom-bar{
  position:absolute;bottom:0;height:1px;left:0;width:100%;background:rgba(255,255,255,0.25);z-index:10;
}

.newtab-btn{
  position:absolute;top:50%;left:0;z-index:11;
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;margin:0;padding:0;
  margin-top:-1px;
  border:none;border-radius:50%;background:transparent;
  color:var(--ui-text-sub);cursor:pointer;font-size:14px;
  transition:background .15s,color .15s;
}
.newtab-btn i{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  font-size:18px;line-height:1;
}
.newtab-btn:hover{background:var(--ui-hover);color:var(--ui-text)}
.newtab-btn:active{background:var(--ui-active)}

.titlebar-spacer{flex:0 0 0;width:0;background:transparent}

.toolbar{
  display:flex;align-items:stretch;gap:4px;
  background:transparent;padding:6px 10px;height:48px;
  border-bottom:1px solid rgba(255,255,255,0.25);
  position:relative;z-index:100;
}

.nav-btn{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:none;border-radius:50%;
  background:transparent;color:var(--ui-text-sub);cursor:pointer;
  font-size:14px;transition:background .15s,color .15s;flex-shrink:0;
  align-self:center;
}
.nav-btn:hover:not(:disabled){background:var(--ui-hover);color:var(--ui-text)}
.nav-btn:active:not(:disabled){background:var(--ui-active)}
.nav-btn:disabled{opacity:.35;cursor:default}

.address-bar-wrap{
  flex:1;display:flex;align-items:center;
  align-self:center;
  background:transparent;border-radius:20px;height:34px;
  padding:0 10px 0 12px;gap:6px;
  border:1px solid rgba(255,255,255,0.4);
  transition:border-color .15s,background .15s;cursor:text;
  position:relative;
}
.address-bar-wrap:focus-within{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.7)}
.address-bar-wrap .lock-icon{color:var(--ui-text-sub);font-size:12px;flex-shrink:0}
.address-bar-wrap .lock-icon.secure{color:var(--ui-secure)}
.lock-icon-btn{
  width:18px;height:18px;border:none;background:transparent;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.lock-icon-btn:hover .lock-icon{color:var(--ui-text)}
#url-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--ui-text);font-size:13px;font-family:inherit;min-width:0;
}
#url-input::selection{background:rgba(255,255,255,0.2);color:var(--ui-text)}
#url-input::placeholder{color:var(--ui-text-dim)}
.connection-popup{
  position:absolute;top:40px;left:8px;z-index:200;
  width:min(320px,calc(100vw - 32px));
  background:transparent;border:1.5px solid rgba(255,255,255,0.35);border-radius:10px;
  box-shadow:0 0 0 3px rgba(255,255,255,0.06),0 0 20px rgba(255,255,255,0.12),0 10px 28px rgba(0,0,0,0.3);
  padding:10px 12px;
  backdrop-filter:var(--glass-blur);
}
.connection-popup-title{color:var(--ui-text);font-size:12px;font-weight:600;margin-bottom:4px}
.connection-popup-desc{color:var(--ui-text-sub);font-size:12px;line-height:1.35}

.wisp-switcher-btn{
  display:flex;align-items:center;justify-content:center;
  gap:6px;min-width:0;height:24px;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,0.3);border-radius:999px;
  background:transparent;
  color:var(--ui-text-sub);
  padding:0 8px 0 7px;cursor:pointer;
  transition:border-color .2s,box-shadow .2s,color .15s,transform .15s;
}
.wisp-switcher-btn:hover{border-color:rgba(255,255,255,0.6);color:var(--ui-text);box-shadow:0 0 0 3px rgba(255,255,255,0.07),0 0 12px rgba(255,255,255,0.12)}
.wisp-switcher-btn[aria-expanded="true"]{border-color:rgba(255,255,255,0.8);color:var(--ui-text);box-shadow:0 0 0 3px rgba(255,255,255,0.1),0 0 16px rgba(255,255,255,0.18)}
.wisp-switcher-btn:active{transform:scale(0.98)}
.wisp-switcher-icon{font-size:12px}
.wisp-flag{
  position:relative;display:inline-block;
  width:16px;height:12px;border-radius:3px;overflow:hidden;
  background-position:center;background-repeat:no-repeat;background-size:cover;
  box-shadow:0 0 0 1px rgba(255,255,255,0.18) inset,0 1px 2px rgba(0,0,0,0.25);
  flex-shrink:0;
}
.wisp-switcher-current{
  max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:11px;font-weight:600;letter-spacing:.15px;
}
.wisp-switcher-caret{font-size:10px;opacity:.7;transition:transform .18s ease,opacity .15s ease}
.wisp-switcher-btn[aria-expanded="true"] .wisp-switcher-caret{transform:rotate(180deg)}
.wisp-switcher-menu{
  position:absolute;top:40px;right:8px;z-index:210;
  width:min(280px,calc(100vw - 32px));
  display:flex;flex-direction:column;gap:4px;
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.35);
  border-radius:12px;
  box-shadow:0 0 0 3px rgba(255,255,255,0.06),0 0 24px rgba(255,255,255,0.12),0 16px 34px rgba(0,0,0,0.3);
  padding:8px;
  backdrop-filter:var(--glass-blur);
}
.wisp-switcher-menu[hidden]{display:none !important}
.wisp-switcher-menu-head{
  display:flex;align-items:center;padding:2px 4px 6px;
  border-bottom:1px solid var(--ui-border-sub);margin-bottom:2px;
}
.wisp-switcher-menu-title{color:var(--ui-text);font-size:12px;font-weight:600}
.wisp-switcher-item{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;border:none;border-radius:10px;
  background:transparent;color:var(--ui-text-sub);
  padding:10px 11px;cursor:pointer;text-align:left;
  transition:background .14s,color .14s,transform .14s;
}
.wisp-switcher-item:hover{background:var(--ui-hover-2);color:var(--ui-text)}
.wisp-switcher-item:active{transform:scale(0.99)}
.wisp-switcher-item.is-active{background:var(--ui-hover);color:var(--ui-text)}
.wisp-switcher-item-main,.wisp-switcher-item-meta{display:flex;align-items:center;gap:8px;min-width:0}
.wisp-switcher-item-main{flex:1}
.wisp-switcher-item-copy{display:flex;flex-direction:column;min-width:0}
.wisp-switcher-item-icon{width:18px;text-align:center;font-size:14px;line-height:1;flex-shrink:0}
.wisp-switcher-item-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.wisp-switcher-item-location{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text-muted);font-size:10px;line-height:1.2;margin-top:1px}
.wisp-switcher-item-meta{justify-content:flex-end;color:var(--ui-text-muted);font-size:11px}
.wisp-switcher-item.is-active .wisp-switcher-item-meta{color:var(--ui-text-sub)}
.wisp-switcher-item.is-active .wisp-switcher-item-location{color:var(--ui-text-sub)}
.wisp-switcher-ping{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.wisp-switcher-badge{border:1px solid var(--ui-border);border-radius:999px;padding:2px 7px;font-size:10px;letter-spacing:.2px}

.toolbar-right{display:flex;align-items:center;gap:2px;align-self:center}
.url-shortcuts{display:flex;align-items:center;gap:2px;margin-left:6px;align-self:center}
.url-shortcut-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:none;border-radius:50%;
  background:transparent;color:var(--ui-text-sub);cursor:pointer;
  font-size:13px;transition:background .15s,color .15s;
}
.url-shortcut-btn:hover{background:var(--ui-hover);color:var(--ui-text)}
.url-shortcut-btn:active{background:var(--ui-active)}

.content-area{flex:1;position:relative;overflow:hidden}
#page-frame{width:100%;height:100%;border:none;display:block;background:transparent}

.new-tab-page{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:32px;
}
.new-tab-page .logo{overflow:visible;position:relative;z-index:2;pointer-events:none}
.new-tab-page .search-box{position:relative;z-index:1;margin-top:0}
.new-tab-page .search-box{
  display:flex;align-items:center;
  background:transparent;border:1.5px solid rgba(255, 255, 255, 0.35);border-radius:24px;
  padding:10px 18px;gap:12px;width:min(560px,90vw);
  transition:border-color .2s,box-shadow .2s;
}
.new-tab-page .search-box:focus-within{
  border-color:rgba(255,255,255,0.85);
  box-shadow:0 0 0 3px rgba(255,255,255,0.12),0 0 18px rgba(255,255,255,0.18),0 0 36px rgba(255,255,255,0.08);
}
.new-tab-page .search-box i{color:var(--ui-text-sub);font-size:16px}
.new-tab-page .search-box input{flex:1;background:transparent;border:none;outline:none;color:var(--ui-text);font-size:16px;font-family:inherit}
.new-tab-page .search-box input::placeholder{color:var(--ui-text-muted)}
.shortcuts{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:680px}
.quick-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;max-width:680px;margin-top:40px}
.quick-link{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:90px;cursor:pointer;padding:10px 6px;border-radius:12px;
  border:none;background:transparent;font-family:inherit;
  transition:background .15s;position:relative;flex-shrink:0;
}
.quick-link:hover{background:transparent}
.quick-link:active{background:transparent}
.quick-link .quick-link-icon{
  width:72px;height:68px;border-radius:16px;background:transparent;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  backdrop-filter:blur(10px);
  border:1.5px solid rgba(255,255,255,0.3);
  color:var(--ui-text-sub);
  transition:border-color .2s,box-shadow .2s,background .2s,color .2s,transform .2s;
  flex-shrink:0;
}
.quick-link:hover .quick-link-icon{
  border-color:rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.07);
  color:var(--ui-text);
  box-shadow:0 0 0 3px rgba(255,255,255,0.08),0 0 18px rgba(255,255,255,0.18);
  transform:scale(1.06);
}
.quick-link:active .quick-link-icon{
  transform:scale(0.97);
  background:rgba(255,255,255,0.12);
  box-shadow:none;
}
.quick-link span{color:var(--ui-text-sub);font-size:13px;text-align:center;white-space:nowrap;overflow:visible;text-overflow:ellipsis;width:100%;display:block}
.shortcut{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:80px;cursor:pointer;padding:10px 6px;border-radius:8px;transition:background .15s;
  position:relative;
}
.shortcut:hover{background:var(--ui-hover)}
.shortcut .icon{
  width:48px;height:48px;border-radius:12px;background:var(--ui-icon-bg);
  display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;
  backdrop-filter:blur(10px);
  border:1px solid var(--ui-border);
}
.shortcut span{color:var(--ui-text-sub);font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}

.pin-favicon-img{width:28px;height:28px;object-fit:contain;display:block}
.pin-letter{color:var(--ui-text-sub);font-size:20px;font-weight:600;line-height:1}

.pin-remove-btn{
  position:absolute;top:-6px;right:-6px;
  width:18px;height:18px;border-radius:50%;
  border:none;background:var(--ui-pin-remove);
  color:var(--ui-text-sub);font-size:9px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transform:scale(0.7);
  transition:opacity .15s,transform .15s,background .12s;
  box-shadow:0 1px 4px rgba(0,0,0,0.5);z-index:2;
}
.shortcut:hover .pin-remove-btn{opacity:1;transform:scale(1)}
.pin-remove-btn:hover{background:rgba(220,60,60,0.9);color:#fff}
.pin-remove-btn:active{background:rgba(180,30,30,0.95)}

.pin-add-btn{opacity:0.6;transition:opacity .2s}
.pin-add-btn:hover{opacity:1}
.pin-add-btn .icon{background:transparent;border:1.5px solid rgba(255,255,255,0.3);transition:border-color .2s,box-shadow .2s}
.pin-add-btn:hover .icon{border-color:rgba(255,255,255,0.75);box-shadow:0 0 0 3px rgba(255,255,255,0.08),0 0 16px rgba(255,255,255,0.16)}

#pin-add-dialog{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
}
.pin-dialog-box{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.35);border-radius:14px;
  box-shadow:0 0 0 3px rgba(255,255,255,0.06),0 0 24px rgba(255,255,255,0.12),0 16px 48px rgba(0,0,0,0.4);
  padding:22px 24px;width:min(360px,90vw);
  display:flex;flex-direction:column;gap:12px;
  backdrop-filter:var(--glass-blur);
}
.pin-dialog-title{color:var(--ui-text);font-size:15px;font-weight:600;margin-bottom:2px}
.pin-dialog-input{
  width:100%;background:transparent;
  border:1.5px solid rgba(255,255,255,0.3);border-radius:8px;
  color:var(--ui-text);font-size:13px;font-family:inherit;
  padding:9px 12px;outline:none;
  transition:border-color .2s,box-shadow .2s;box-sizing:border-box;
}
.pin-dialog-input:focus{
  border-color:rgba(255,255,255,0.8);
  box-shadow:0 0 0 3px rgba(255,255,255,0.1),0 0 14px rgba(255,255,255,0.15);
}








.pin-dialog-input::placeholder{color:var(--ui-text-dim)}
.pin-dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.pin-dialog-btn{border:none;border-radius:8px;font-size:13px;font-family:inherit;padding:8px 18px;cursor:pointer;transition:background .12s,color .12s}
.pin-dialog-cancel{background:rgba(255,255,255,0.08);color:var(--ui-text-sub)}
.pin-dialog-cancel:hover{background:rgba(255,255,255,0.15);color:var(--ui-text)}
.pin-dialog-save{background:rgba(255,255,255,0.15);color:var(--ui-text);font-weight:500}
.pin-dialog-save:hover{background:rgba(255,255,255,0.25)}

.status-bar{display:none}

.bookmark-star-btn{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex-shrink:0;
  border:none;background:transparent;padding:0;cursor:pointer;
  color:var(--ui-text-muted);font-size:13px;
  transition:color .15s,transform .15s;border-radius:50%;
}
.bookmark-star-btn:hover{color:var(--ui-text)}
.bookmark-star-btn:active{transform:scale(0.88)}
.bookmark-star-btn.starred{color:var(--ui-star)}
.bookmark-star-btn.starred:hover{color:#ffd966}
.bookmark-star-btn.starred i{animation:star-pop 220ms cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes star-pop{0%{transform:scale(1)}50%{transform:scale(1.45)}100%{transform:scale(1)}}

.bookmarks-bar{
  display:flex;align-items:center;
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,0.25);
  padding:0 8px;height:32px;gap:1px;overflow:hidden;flex-shrink:0;
}

.bm-item{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;
  height:24px;padding:0 8px;
  border:none;border-radius:6px;background:transparent;
  color:var(--ui-text-sub);font-size:12px;font-family:inherit;
  cursor:pointer;white-space:nowrap;max-width:160px;
  transition:background .12s,color .12s;flex-shrink:0;
}
.bm-item:hover{background:var(--ui-hover);color:var(--ui-text)}
.bm-item:active{background:rgba(255,255,255,0.17)}
.bm-item-favicon{width:16px;height:16px;flex-shrink:0;background-size:16px 16px;background-repeat:no-repeat;background-position:center;display:flex;align-items:center;justify-content:center}
.bm-item-favicon i{font-size:14px;color:var(--ui-text-muted)}
.bm-item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;line-height:1}

#bm-toast{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(8px);
  background:transparent;color:var(--ui-text);
  font-size:13px;font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:8px 18px;border-radius:20px;
  border:1.5px solid rgba(255,255,255,0.35);
  box-shadow:0 0 0 3px rgba(255,255,255,0.06),0 0 18px rgba(255,255,255,0.14),0 4px 16px rgba(0,0,0,0.3);
  pointer-events:none;z-index:9999;
  opacity:0;transition:opacity .18s ease,transform .18s ease;
  backdrop-filter:var(--glass-blur);
}
#bm-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

#bm-ctx-menu{
  position:fixed;z-index:9998;
  background:var(--ui-surface-4);
  border:1px solid rgba(255,255,255,0.1);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  padding:6px;min-width:180px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  backdrop-filter:var(--glass-blur);
}
.bm-ctx-title{
  color:var(--ui-text-muted);font-size:11px;padding:4px 10px 6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
  border-bottom:1px solid var(--ui-border-sub);margin-bottom:4px;
}
.bm-ctx-btn{
  display:block;width:100%;text-align:left;border:none;background:transparent;
  color:var(--ui-text-sub);font-size:13px;font-family:inherit;
  padding:7px 10px;border-radius:5px;cursor:pointer;transition:background .1s,color .1s;
}
.bm-ctx-btn:hover{background:var(--ui-hover);color:var(--ui-text)}
.bm-ctx-btn:active{background:rgba(255,255,255,0.17)}
.bm-ctx-remove{color:rgba(255,100,100,0.85)}
.bm-ctx-remove:hover{background:rgba(255,80,80,0.12);color:#ff7070}
.bm-ctx-rename-row{display:flex;align-items:center;gap:6px;padding:6px 10px 4px}
.bm-ctx-rename-input{
  flex:1;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);
  border-radius:5px;color:var(--ui-text);font-size:13px;font-family:inherit;
  padding:5px 8px;outline:none;min-width:0;transition:border-color .12s;
}
.bm-ctx-rename-input:focus{border-color:rgba(255,255,255,0.45)}
.bm-ctx-rename-ok{
  flex-shrink:0;border:none;border-radius:5px;
  background:rgba(255,255,255,0.12);color:var(--ui-text);
  font-size:12px;font-family:inherit;padding:5px 10px;cursor:pointer;transition:background .12s;
}
.bm-ctx-rename-ok:hover{background:rgba(255,255,255,0.22)}

.nav-btn-group{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:2px;
  flex-shrink:0;
}
.nav-btn-row{display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-btn-row .nav-btn{width:26px;height:26px;font-size:12px}
.wisp-bar-label{
  display:flex;align-items:center;gap:4px;
  font-size:8px;letter-spacing:.15px;white-space:nowrap;
  transition:color .4s ease;
  color:var(--ui-text-dim);
  padding-left:4px;line-height:1;
}
.wisp-bar-label.wisp-ok{color:rgba(110,220,140,0.75)}
.wisp-bar-label.wisp-err{color:rgba(255,110,110,0.75)}
.wisp-bar-label.wisp-connecting{color:var(--ui-text-dim)}
.wisp-bar-label.wisp-disconnecting{color:#ff0000}

@font-face{font-family:'Curly';src:url('../fonts/curly.otf') format('opentype')}
.new-tab-page .logo{font-family:'Curly',sans-serif}

.page-loading-screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;
  background:#000;
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.07) 1px,transparent 1px);
  background-size:40px 40px;
  z-index:50;
}
.pls-title{
  color:#fff;
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  font-size:32px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;
  min-height:1.2em;min-width:1px;
}
.pls-cursor{
  display:inline-block;width:2px;height:1em;
  background:#fff;vertical-align:middle;margin-left:3px;
  animation:pls-blink 0.7s step-end infinite;
}
@keyframes pls-blink{0%,100%{opacity:1}50%{opacity:0}}
.pls-track{
  width:300px;height:5px;
  background:rgba(255,255,255,0.12);
  border-radius:3px;position:relative;overflow:hidden;
}
.pls-bar{
  position:absolute;top:0;left:0;
  width:90px;height:100%;
  background:#fff;border-radius:3px;
  will-change:transform;
  animation:pls-bounce 1.8s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes pls-bounce{
  0%  {transform:translateX(0px);   opacity:0.6}
  10% {transform:translateX(0px);   opacity:1}
  50% {transform:translateX(210px); opacity:1}
  90% {transform:translateX(210px); opacity:1}
  100%{transform:translateX(0px);   opacity:0.6}
}
.page-loading-url{
  color:var(--ui-text-muted);font-size:13px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.2px;
}
.page-loading-tip{
  color:var(--ui-text-dim);font-size:11px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  display:flex;align-items:center;gap:6px;
}
.page-loading-tip kbd{
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);
  border-radius:4px;font-family:inherit;font-size:10px;padding:1px 5px;
  color:var(--ui-text-dim);line-height:1.5;
}

.newtab-tip{
  display:flex;align-items:center;gap:10px;
  background:transparent;border:1.5px solid rgba(255,255,255,0.35);
  border-radius:24px;padding:8px 14px 8px 16px;font-size:12px;
  color:var(--ui-text-muted);white-space:nowrap;backdrop-filter:var(--glass-blur);
  box-shadow:0 0 0 3px rgba(255,255,255,0.05),0 0 18px rgba(255,255,255,0.1);
  transition:opacity .3s ease;pointer-events:auto;margin-top:28px;
}
.newtab-tip i{color:rgba(255,220,80,0.65);font-size:12px;flex-shrink:0}
.newtab-tip kbd{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ui-hover);border:1px solid var(--ui-border);
  border-radius:4px;font-family:inherit;font-size:11px;padding:1px 6px;
  color:var(--ui-text-sub);line-height:1.5;
}
.newtab-tip-close{
  flex-shrink:0;border:none;background:transparent;
  color:var(--ui-text-dim);font-size:11px;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;transition:color .12s,background .12s;margin-left:2px;
}
.newtab-tip-close:hover{color:var(--ui-text);background:var(--ui-hover)}