/* @primitive · ownership marker (AegisSurface) */
/* base.css — reset, app shell, top bar, tabs, responsive frame. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 50% -8%,rgba(37,99,255,.13),transparent 34%),linear-gradient(180deg,#fff 0%,#f6f8ff 52%,var(--bg) 100%)}
a{color:inherit;text-decoration:none}
button,input{font:inherit}button{cursor:pointer;border:0;background:none}
img{max-width:100%;display:block}
.app{max-width:760px;margin:0 auto;min-height:100dvh;padding-bottom:34px}

/* top bar */
.top{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 6px 20px -16px rgba(10,30,70,.5)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px 9px}
.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:900;letter-spacing:-.04em}
.brand svg{width:30px;height:34px}
.planpick{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--muted)}
.planpick select{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:7px 11px;font-weight:850;color:var(--ink)}

/* mode segmented control (Protect the site / Protect the project) */
.modes{display:flex;gap:6px;margin:0 18px 10px;background:#eef2f9;border-radius:var(--r-pill);padding:5px}
.mode{flex:1;border:0;background:transparent;border-radius:var(--r-pill);padding:11px 10px;font-weight:850;font-size:13.5px;color:var(--muted);white-space:nowrap;transition:.14s}
.mode[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 10px 24px -16px rgba(20,40,80,.5)}
.mode[data-mode="project"][aria-selected="true"]{color:var(--violet)}
.mode[data-mode="site"][aria-selected="true"]{color:var(--blue)}

/* tabs */
.tabs{display:flex;gap:8px;overflow:auto;padding:0 18px 13px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:9px 14px;font-weight:850;font-size:13px;white-space:nowrap;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 14px 28px -16px rgba(37,99,255,.7)}

/* page host */
.page{padding:18px}
.page[hidden]{display:none}
.foot{text-align:center;color:var(--muted2);font-size:12px;font-weight:700;padding:22px 18px}

/* utility */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.muted{color:var(--muted)}
.src{display:flex;gap:9px;align-items:flex-start;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.18);
  border-radius:var(--r-md);padding:11px 13px;color:#5b3aa6;font-size:12px;font-weight:650;line-height:1.4;margin-bottom:14px}
.src b{color:#3f2580}
.skeleton{color:var(--muted2);font-size:13px;font-weight:700;padding:18px;text-align:center}

@media(min-width:780px){body{background:#eef3fb}.app{margin:20px auto;border-radius:30px;overflow:hidden;background:linear-gradient(180deg,#fff,#f6f8ff);box-shadow:0 30px 80px -45px rgba(10,30,70,.45)}}
@media(max-width:400px){.page,.bar,.tabs{padding-left:14px;padding-right:14px}}