/* Header utility controls, layered after the production portal stylesheet. */
.yio-header__right { display:flex; align-items:center; gap:14px; }
.yio-header-tools,.yio-header-page-links,.yio-install-app { display:flex; align-items:center; }
.yio-install-app[hidden],.yio-recent-panel[hidden],.yio-header-tool__count[hidden] { display:none; }
.yio-header-tools { gap:8px; }
.yio-header-recent { position:relative; }
.yio-header-tool {
  position:relative; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--yio-text-secondary); background:var(--yio-bg-elevated); border:1px solid var(--yio-bg-border);
  border-radius:11px; cursor:pointer; transition:color var(--yio-transition-fast),border-color var(--yio-transition-fast),background var(--yio-transition-fast),transform var(--yio-transition-fast);
}
.yio-header-tool:hover,.yio-header-tool:focus-visible,.yio-header-tool[aria-expanded="true"] {
  color:var(--yio-brand-primary); border-color:var(--yio-brand-primary); background:var(--yio-bg-hover); outline:none; transform:translateY(-1px);
}
.yio-header-tool__count {
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; display:grid; place-items:center;
  color:#fff; background:var(--yio-brand-primary); border:2px solid var(--yio-bg-base); border-radius:9px; font-size:9px; font-weight:800;
}
.yio-header__divider { width:1px; height:28px; background:var(--yio-bg-border); }
.yio-header-page-links { gap:22px; }
.yio-header-page-links a { color:var(--yio-text-secondary); font-size:var(--yio-text-sm); font-weight:600; }
.yio-header-page-links a:hover { color:var(--yio-text-primary); }
.yio-install-app {
  gap:7px; min-height:40px; padding:0 14px; color:var(--yio-text-primary); background:var(--yio-bg-elevated);
  border:1px solid var(--yio-bg-border); border-radius:11px; cursor:pointer; font-size:var(--yio-text-xs); font-weight:700;
}
.yio-install-app:hover { color:var(--yio-brand-primary); border-color:var(--yio-brand-primary); }
.yio-recent-panel {
  position:absolute; top:calc(100% + 12px); right:0; width:min(340px,calc(100vw - 24px)); padding:12px;
  background:var(--yio-bg-surface); border:1px solid var(--yio-bg-border); border-radius:var(--yio-radius-md);
  box-shadow:var(--yio-shadow-modal); z-index:var(--yio-z-modal);
}
.yio-recent-panel__head { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 10px; }
.yio-recent-panel__head strong { font-size:var(--yio-text-sm); }
.yio-recent-panel__head button { color:var(--yio-text-muted); background:none; border:0; cursor:pointer; font-size:11px; }
.yio-recent-panel__head button:hover { color:var(--yio-brand-primary); }
.yio-recent-panel__list { display:grid; gap:6px; max-height:330px; overflow-y:auto; }
.yio-recent-card { display:flex; align-items:center; gap:10px; padding:7px; border-radius:var(--yio-radius-sm); }
.yio-recent-card:hover { background:var(--yio-bg-hover); }
.yio-recent-card img { width:56px; height:40px; flex:0 0 auto; border-radius:7px; object-fit:cover; background:var(--yio-bg-elevated); }
.yio-recent-card span { min-width:0; overflow:hidden; color:var(--yio-text-primary); font-size:13px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.yio-recent-panel__empty { padding:20px 8px; color:var(--yio-text-muted); font-size:var(--yio-text-xs); text-align:center; }
@media (max-width:1200px) { .yio-header-page-links,.yio-header__divider { display:none; } }
@media (max-width:768px) {
  .yio-header__container { gap:8px; } .yio-header__left { gap:8px; } .yio-logo__text { display:none; }
  .yio-header__center { max-width:none; } .yio-header-tools { gap:6px; } .yio-header-tool { width:38px; height:38px; }
  .yio-install-app span { display:none; } .yio-install-app { width:38px; padding:0; justify-content:center; }
}
@media (max-width:480px) {
  .yio-header-tools > :nth-child(2) { display:none; }
  .yio-header__icon-btn { width:38px; height:38px; padding:0; justify-content:center; }
  .yio-search__input { padding-right:12px; } .yio-search__input::placeholder { color:transparent; }
}