/* Shared page container styling used by all three HTML pages. */
:root{
  --wrap-blue:#ffd400;
  --wrap-dark:#111;
  --wrap-line:rgba(17,17,17,.1);
  --wrap-text:#111;
  --wrap-muted:rgba(17,17,17,.62);
}

.sidebar a i,
.nav-toggle i {
  width:18px;
  text-align:center;
  line-height:1;
}

/* Portfolio container refresh only. Framework component classes live in their own files. */
body{background:#fff;color:#111}
.shell{grid-template-columns:290px 1fr;background:#fff}
.sidebar{background:#fff;color:#111;border-right:1px solid var(--wrap-line);padding:20px;height:100vh}
.brand{margin-bottom:24px}
.brand-mark{width:46px;height:46px;border-radius:12px;background:#111;color:#ffd400;font-weight:900;letter-spacing:.02em}
.brand-title{font-weight:800;color:#111}
.brand-title span{color:rgba(17,17,17,.55);font-weight:700}
.nav-title{color:rgba(17,17,17,.45);letter-spacing:.22em;margin:22px 0 8px;font-weight:800}
.sidebar a{border-radius:12px;color:#111;font-weight:700;padding:12px 14px}
.sidebar a:hover{background:rgba(17,17,17,.05)}
.sidebar a.active{background:#111;color:#fff}
.topbar{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--wrap-line);padding:18px 24px}
.breadcrumb{color:rgba(17,17,17,.58);font-weight:800}
.topbar strong{color:#111;font-weight:900}
.content{max-width:none;padding:24px}
.top-actions a,.nav-toggle{border-radius:12px;font-weight:800}
.top-actions .primary{background:#ffd400;color:#111}
.top-actions .secondary,.nav-toggle{background:#fff;color:#111;border:1px solid var(--wrap-line)}
.nav-toggle:hover{background:rgba(17,17,17,.05)}