/* ============================================================
   Web browser shell
   ============================================================ */
.browser-layout{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
}
.browser-tabbar{
  height:34px;display:flex;align-items:center;background:var(--bg-window-alt);
  border-bottom:1px solid var(--border);overflow-x:auto;flex-shrink:0;gap:0;
  padding:0 4px;
}
.browser-tab{
  display:flex;align-items:center;gap:6px;
  padding:0 14px;height:28px;max-width:220px;min-width:120px;
  background:transparent;color:var(--text-secondary);font-size:11.5px;
  border-radius:6px 6px 0 0;
  cursor:pointer;transition:background .12s,color .12s;
  flex-shrink:0;overflow:hidden;white-space:nowrap;
}
.browser-tab:hover{color:var(--text)}
.browser-tab.active{background:var(--bg-window);color:var(--text);font-weight:500}
.browser-tab .tab-title{flex:1;overflow:hidden;text-overflow:ellipsis}
.browser-tab .tab-close{
  background:transparent;border:0;color:inherit;font-size:14px;line-height:1;
  padding:1px 4px;border-radius:4px;
}
.browser-tab .tab-close:hover{background:var(--bg-hover);color:var(--yaru-red)}
.browser-tabbar .tab-new{
  background:transparent;border:0;color:var(--text-secondary);
  padding:0 8px;font-size:16px;border-radius:4px;margin-left:2px;
}
.browser-tabbar .tab-new:hover{background:var(--bg-hover);color:var(--text)}

.browser-toolbar{
  height:38px;display:flex;align-items:center;gap:4px;padding:0 6px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.browser-toolbar button{
  background:transparent;border:0;color:var(--text-secondary);padding:5px 8px;border-radius:6px;
  font-size:12px;
}
.browser-toolbar button:hover{background:var(--bg-hover);color:var(--text)}
.browser-address{
  flex:1;height:26px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:14px;padding:0 12px;
  font-size:12.5px;color:var(--text);
  margin:0 4px;
}

.browser-page{
  flex:1;background:#fff;overflow:hidden;position:relative;
}
.browser-iframe{
  width:100%;height:100%;border:0;display:block;
}
.browser-start{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  background:linear-gradient(180deg,#fff 0%,#f4f2f0 100%);
}
.browser-start .start-logo{font-size:52px;font-weight:700;color:var(--yaru-aubergine);letter-spacing:-1px}
.browser-start .start-logo span{color:var(--yaru-orange)}
.browser-start .start-search{
  width:100%;max-width:520px;
  display:flex;align-items:center;
  background:#fff;border:1px solid var(--border-strong);
  border-radius:24px;padding:8px 16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.browser-start .start-search input{flex:1;border:0;outline:none;font-size:14px;color:#333}
.browser-search-btn{background:var(--accent);border:0;color:#fff;padding:7px 16px;border-radius:14px;margin-left:6px}
.browser-search-btn:hover{background:var(--accent-hover)}
.start-quicklinks{
  display:grid;grid-template-columns:repeat(auto-fill,70px);gap:12px;
  max-width:520px;justify-content:center;
}
.start-quicklink{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  cursor:pointer;padding:6px;border-radius:8px;
  transition:background .15s;color:var(--yaru-dark-grey);font-size:11px;
}
.start-quicklink:hover{background:var(--bg-hover)}
.start-quicklink .ql-icon{
  width:36px;height:36px;border-radius:8px;background:var(--bg-window-alt);
  display:flex;align-items:center;justify-content:center;
}
.start-quicklink .ql-icon svg{width:18px;height:18px;color:var(--accent)}