@import url('./tokens.css');
@import url('./themes.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--cg-font-sans);
  background: var(--cg-bg);
  color: var(--cg-text);
  font-size: var(--cg-fs-md);
  -webkit-font-smoothing: antialiased;
}

.cg-shell { min-height: 100vh; background: var(--cg-bg); color: var(--cg-text); }
.cg-header {
  height: var(--cg-header-height);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 50;
  background: var(--cg-header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cg-border);
}
.cg-brand { display:flex; align-items:center; gap:12px; min-width: 180px; }
.cg-logo { width: 122px; max-height: 44px; object-fit: contain; }
.cg-product-name { font-weight: 700; font-size: var(--cg-fs-lg); white-space: nowrap; }
.cg-header-spacer { flex: 1; }
.cg-shell-body { display:grid; grid-template-columns: var(--cg-sidebar-width) minmax(0,1fr); min-height: calc(100vh - var(--cg-header-height)); }
.cg-sidebar { background: var(--cg-sidebar-bg); border-right: 1px solid var(--cg-border); padding: 16px 12px; }
.cg-nav { display:flex; flex-direction:column; gap:4px; }
.cg-nav-item { display:flex; align-items:center; gap:10px; min-height:42px; padding:0 12px; border-radius:10px; color:var(--cg-text-muted); text-decoration:none; transition:var(--cg-transition); }
.cg-nav-item:hover { color:var(--cg-text); background:var(--cg-hover); }
.cg-nav-item[aria-current="page"], .cg-nav-item.is-active { color:var(--cg-blue); background:var(--cg-active); font-weight:600; }
.cg-main { min-width:0; padding: 24px; }
.cg-card { background:var(--cg-surface); border:1px solid var(--cg-border); border-radius:var(--cg-radius-md); box-shadow:var(--cg-shadow-sm); }
.cg-card-header { padding:16px 18px; border-bottom:1px solid var(--cg-border); font-weight:700; }
.cg-card-body { padding:18px; }
.cg-btn { border:1px solid transparent; border-radius:10px; min-height:38px; padding:0 14px; font:600 var(--cg-fs-md)/1 var(--cg-font-sans); cursor:pointer; transition:var(--cg-transition); display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.cg-btn-primary { background:var(--cg-blue); color:#fff; }
.cg-btn-primary:hover { filter:brightness(.94); }
.cg-btn-accent { background:var(--cg-orange); color:#fff; }
.cg-btn-secondary { background:var(--cg-surface); color:var(--cg-text); border-color:var(--cg-border); }
.cg-input { width:100%; min-height:40px; padding:0 12px; border:1px solid var(--cg-border); border-radius:10px; background:var(--cg-surface); color:var(--cg-text); outline:none; }
.cg-input:focus { border-color:var(--cg-blue); box-shadow:0 0 0 3px rgba(0,133,208,.14); }
.cg-badge { display:inline-flex; align-items:center; border-radius:var(--cg-radius-pill); padding:3px 8px; font-size:var(--cg-fs-xs); font-weight:600; background:var(--cg-active); color:var(--cg-blue); }
.cg-theme-toggle { width:40px; height:40px; border-radius:10px; border:1px solid var(--cg-border); background:var(--cg-surface); color:var(--cg-text); cursor:pointer; }

@media (max-width: 900px) {
  .cg-shell-body { grid-template-columns: 1fr; }
  .cg-sidebar { display:none; }
  .cg-main { padding:16px; }
  .cg-product-name { display:none; }
}