:root { color-scheme: light; }
body { margin: 0; }
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--ms-sp-5); }
.auth-card { width: min(28rem, 100%); }
.ms-stack { display: grid; gap: var(--ms-sp-3); }
.app-grid { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; }
.sidebar { padding: var(--ms-sp-5); background: var(--ms-panel); border-right: 1px solid var(--ms-line); display: flex; flex-direction: column; gap: var(--ms-sp-5); }
.brand { font-size: var(--ms-fs-panel); font-weight: 700; }
.sidebar nav { display: grid; gap: var(--ms-sp-1); }
.sidebar nav a { padding: var(--ms-sp-2); color: inherit; text-decoration: none; border-radius: var(--ms-r); }
.sidebar nav a:hover { background: var(--ms-panel-2); }
.content { padding: var(--ms-sp-5); width: min(76rem, 100%); box-sizing: border-box; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--ms-sp-3); margin-bottom: var(--ms-sp-3); }
.stat-value { font-size: 2rem; font-weight: 700; }
.notice { padding: var(--ms-sp-3); background: var(--ms-panel-2); }
.panel-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--ms-sp-3); }
.table-wrap { overflow-x: auto; }
.ms-table { width: 100%; border-collapse: collapse; }
.ms-table th, .ms-table td { padding: var(--ms-sp-2); border-bottom: 1px solid var(--ms-line); text-align: left; vertical-align: top; }
.job-log { min-height: 3rem; max-height: 16rem; overflow: auto; white-space: pre-wrap; background: var(--ms-panel-2); padding: var(--ms-sp-3); }
.empty-state { padding: var(--ms-sp-5); text-align: center; background: var(--ms-panel-2); border-radius: var(--ms-r); }
.chip { display: inline-block; padding: .1rem .4rem; border: 1px solid var(--ms-line); border-radius: 999px; font-size: .75rem; white-space: nowrap; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--ms-sp-4); }
.template-card { color: inherit; text-decoration: none; overflow: hidden; transition: border-color 120ms ease; }
.template-card:hover { border-color: var(--ms-brand); }
.template-card > img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--ms-panel-2); border-bottom: 1px solid var(--ms-line); }
.template-detail { display: grid; grid-template-columns: minmax(20rem, 1.35fr) minmax(18rem, .65fr); gap: var(--ms-sp-4); margin-top: var(--ms-sp-3); align-items: start; }
.preview-panel img { display: block; width: 100%; height: auto; background: var(--ms-panel-2); }
.product-results { display: grid; gap: var(--ms-sp-1); max-height: 28rem; overflow: auto; }
.product-result { display: flex; align-items: center; gap: var(--ms-sp-2); justify-content: space-between; width: 100%; padding: var(--ms-sp-2); border: 1px solid var(--ms-line); border-radius: var(--ms-r); background: var(--ms-panel); color: var(--ms-ink); text-align: left; cursor: pointer; }
.product-result:hover { border-color: var(--ms-brand); }
@media (max-width: 800px) {
  .app-grid { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--ms-line); }
  .sidebar nav { grid-template-columns: repeat(4, 1fr); }
  .content { padding: var(--ms-sp-3); }
  .template-detail { grid-template-columns: 1fr; }
}