/* Tool app shell: icon, app bar, switcher dock, launcher grid.
   Selectors are prefixed so each tool page's own styles cannot reach them. */

.app-icon{--s:44px;display:inline-grid;place-items:center;flex:0 0 var(--s);width:var(--s);height:var(--s);
  border-radius:calc(var(--s) * .27);background:linear-gradient(145deg,var(--to),var(--from) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 2px rgba(15,23,42,.18),0 4px 12px -4px var(--from)}
.app-icon svg{width:58%;height:58%;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.appbar{position:relative;z-index:5;background:#fff;border-bottom:1px solid rgba(15,23,42,.1);
  font-family:'Inter','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;color:#0f172a}
.appbar-inner{display:flex;align-items:center;gap:.85rem;width:min(1180px,calc(100% - 2rem));margin:auto;padding:.7rem 0}
.appbar .appbar-back{display:inline-flex;align-items:center;gap:.15rem;padding:.4rem .6rem .4rem .35rem;border-radius:10px;
  color:#4b5a6e;text-decoration:none;font-size:.78rem;font-weight:700}
.appbar .appbar-back:hover{background:#f1f3f6;color:#0f172a}
.appbar .appbar-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.appbar .appbar-title{min-width:0;flex:1}
.appbar .appbar-title h1{margin:0;padding:0;font:700 1.08rem/1.2 'Inter','Inter',system-ui,sans-serif;letter-spacing:-.01em;color:#0f172a;text-shadow:none}
.appbar .appbar-title p{margin:.1rem 0 0;font:500 .78rem/1.35 'Inter',system-ui,sans-serif;color:#667181;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:none;text-shadow:none}
.appbar .appbar-extra{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.appbar .appbar-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border:1px solid rgba(15,23,42,.14);border-radius:10px;
  background:#fff;color:#0f172a;font:700 .74rem 'Inter','Inter',sans-serif;text-decoration:none;cursor:pointer}
.appbar .appbar-btn:hover{background:#f1f3f6}
.appbar .appbar-btn.primary{background:#0f172a;border-color:#0f172a;color:#fff}
.appbar .appbar-badge{padding:.25rem .5rem;border-radius:100px;background:#eef1f6;color:#3c5170;font:700 .6rem 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.appbar .appbar-dock{display:flex;gap:.3rem;flex:0 0 auto;padding:.3rem;border-radius:14px;background:#f4f5f8}
.appbar .appbar-dock a{display:block;border-radius:9px;opacity:.55;transition:opacity .15s,transform .15s}
.appbar .appbar-dock a:hover{opacity:1;transform:translateY(-1px)}
.appbar .appbar-dock a[aria-current]{opacity:1;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #0f172a}
.appbar .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.appbar-tabs{border-top:1px solid rgba(15,23,42,.07)}
.appbar-tabs-inner{display:flex;gap:.2rem;width:min(1180px,calc(100% - 2rem));margin:auto;overflow-x:auto;scrollbar-width:none}
.appbar-tabs-inner::-webkit-scrollbar{display:none}
.appbar-tabs a{flex:0 0 auto;padding:.6rem .75rem;border-bottom:2px solid transparent;color:#4b5a6e;text-decoration:none;
  font:600 .76rem 'Inter',system-ui,sans-serif;white-space:nowrap}
.appbar-tabs a:hover{color:#0f172a;border-bottom-color:#3b82f6}
.appbar a:focus-visible,.appbar button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
@media(max-width:900px){.appbar .appbar-dock{display:none}}
@media(max-width:560px){
  .appbar-inner{gap:.6rem;width:calc(100% - 1.2rem)}
  .appbar .appbar-back span{display:none}
  .appbar .app-icon{--s:34px!important}
  .appbar .appbar-title p{display:none}
  .appbar .appbar-badge{display:none}
}

/* Launcher grid on /tools/ */
.launcher{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.launch{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;border:1px solid rgba(15,23,42,.1);border-radius:16px;background:#fff;
  color:#0f172a;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.launch:hover{transform:translateY(-2px);border-color:rgba(15,23,42,.2);box-shadow:0 12px 28px -12px rgba(15,23,42,.25)}
.launch:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.launch-text{min-width:0}
.launch-name{display:flex;align-items:center;gap:.45rem;font:700 .95rem/1.25 'Inter','Inter',sans-serif}
.launch-kind{padding:.12rem .4rem;border-radius:100px;background:#f1f3f6;color:#5b6778;font:700 .55rem 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase}
.launch-desc{margin-top:.15rem;color:#667181;font-size:.8rem;line-height:1.4}

/* Icon grid: home-screen style tiles, icon over name. */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:1.2rem .4rem}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.7rem .3rem;border-radius:18px;
  color:inherit;text-decoration:none;text-align:center;transition:background .15s}
.app-tile .app-icon{transition:transform .18s}
.app-tile:hover{background:rgba(15,23,42,.05)}
.app-tile:hover .app-icon{transform:translateY(-3px) scale(1.04)}
.app-tile:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.app-name{font:700 .8rem/1.25 'Inter','Inter',system-ui,sans-serif}
.app-grid.on-dark .app-tile:hover{background:rgba(255,255,255,.07)}