/* assets/style.css */

* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}

body {
  background: var(--bg) url('/assets/background.jpg') no-repeat center/cover fixed;
}

.ml-auto { margin-left: auto; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-0 { margin-top: 0; }
.mt-auto { margin-top: auto; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.w-100 { width: 100%; }
.w-160 { width: 160px; }
.w-180 { width: 180px; }
.w-360 { width: 360px; }
.minw-220 { min-width: 220px; }
.minw-260 { min-width: 260px; }
.minw-420 { min-width: 420px; }
.maxw-200 { max-width: 200px; }
.text-24 { font-size: 24px; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.inline-form { display: inline; }
.inline-block { display: inline-block; }
.is-hidden { display: none; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-self: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.spacer-10 { height: 10px; }
.brand-logo { max-width: 220px; height: auto; max-height: var(--logo-height); }
.brand-image-sm { height: 32px; }
.heading-tight { margin: 0 0 8px 0; }
.heading-tight-sm { margin: 0 0 6px 0; }
.heading-tight-md { margin: 0 0 10px 0; }
.menu-user { font-size: 12px; color: var(--menu-user-color); }

.login-body {
  background: var(--login-bg) url('/assets/background.jpg') no-repeat center center fixed;
  background-size: cover;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--text);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--login-panel);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-strong);
  overflow: hidden;
}

.login-card .header {
  padding: 24px 24px 12px;
  text-align: center;
}

.login-card .brand {
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--login-brand-color);
  font-size: 22px;
}
.login-card .subtitle {
  color: var(--login-subtitle-color);
  font-size: 13px;
  opacity: 0.85;
}

.login-card .form {
  padding: 24px;
}

label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--form-label-color);
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: 10px;
  outline: none;
  font-size: 16px;
}

input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.button {
  padding: 10px 14px;
  background: var(--brand);
  color: var(--button-text);
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button:hover { filter: brightness(0.95); }
.button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }

.login-card .button {
  width: 100%;
  margin-top: 10px;
}

.footer {
  padding: 12px 24px 24px;
  text-align: center;
  font-size: 12px;
  color: var(--footer-color);
}

.error {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

.app{
  display:grid;
  grid-template-columns:260px 1fr;
  width:100%;
  max-width:1200px;
  min-height:calc(100vh - 48px);
  margin:24px auto;
  background:transparent;
  color: var(--ink);
}

.sidebar{
  background:var(--white);
  border-right:1px solid var(--line);
  padding:18px 16px;
  position: sticky;
  top:0;
  height:100vh;
  overflow:auto;
  align-self:start;
}
.brandRow{ display:flex; align-items:center; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.brandRow img{ height:var(--logo-height); }
.menu{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.menu a{ padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink); }
.menu a.active{ background:var(--brand-12); color:var(--brand); font-weight:600; }
.menu a:hover{ background:var(--menu-hover-bg); }

.main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  position: sticky;
  top:0;
  z-index:100;
  display:flex; align-items:center; gap:12px; padding:12px 18px;
  border-bottom:1px solid var(--line); background:var(--white);
}
.userBadge{ display:flex; align-items:center; gap:10px; color:var(--navy); font-weight:600; }
.avatar{ width:32px; height:32px; border-radius:50%; background:var(--brand); color:var(--button-text); display:grid; place-items:center; font-size:14px; }
.content{ padding:18px; }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 18px var(--shadow-soft); padding:16px; }
.pill{ padding:4px 8px; background:var(--pill-bg); border-radius:999px; font-size:12px; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.input{ padding:10px 12px; border:1px solid var(--input-border); border-radius:10px; min-width:200px; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:10px 8px; border-bottom:1px solid var(--line); text-align:left; }
.muted{ color:var(--muted); font-size:12px; }

.drawer{
  position:fixed; top:0; right:0; width:420px; max-width:100%;
  height:100%; background:var(--white); box-shadow:-20px 0 40px var(--drawer-shadow);
  transform:translateX(100%); transition:transform .25s ease;
  border-left:1px solid var(--line); display:flex; flex-direction:column;
  z-index:30;
}
.drawer.open{ transform:translateX(0); }
.drawerHead{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.drawerBody{ padding:16px; display:flex; flex-direction:column; gap:10px; }
.drawerBody label{ font-size:12px; color:var(--drawer-label-color); }
.drawerBody input{ padding:10px 12px; border:1px solid var(--input-border); border-radius:10px; width:100%; }
.drawerFoot{ margin-top:auto; padding:12px 16px; border-top:1px solid var(--line); display:flex; gap:8px; }

.pagination{ display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.pagination a, .pagination span{
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink);
}
.pagination .current{ background:var(--brand-12); border-color:var(--pagination-border); color:var(--brand); font-weight:700; }

.badge{ background:var(--brand-12); color:var(--brand); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.page-body{ margin:0; background:var(--bg) url('/assets/background.jpg') no-repeat center/cover fixed; color:var(--page-text); }
.page{ max-width:1100px; margin:0 auto; padding:24px; }
.page-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.page-title{ margin:6px 0 4px 0; }

.trim-cheat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
}
.trim-cheat-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 24px var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.trim-cheat-media{
  background:var(--cheat-media-bg);
  border:1px dashed var(--cheat-media-border);
  border-radius:12px;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
}
.trim-cheat-media img{
  max-width:100%;
  height:auto;
  display:block;
}
.trim-cheat-body h3{ margin:0 0 8px 0; }
.trim-cheat-body ol{ margin:0; padding-left:18px; color:var(--cheat-list-color); }

.config-alert{
  margin-bottom:12px;
  border-color:var(--alert-border);
  background:var(--alert-bg);
}
.config-alert strong{ color:var(--alert-text); }
.config-card-span-12{ grid-column: span 12; }
.config-card-span-6{ grid-column: span 6; }
.config-row-space{ justify-content:space-between; }
.config-row-mt-12{ margin-top:12px; }
.config-muted-mt-8{ margin-top:8px; }
.config-warn{ margin-top:8px; display:none; }
.config-field-flex{ flex:1; }

.spec-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.spec-actions .button{ white-space:nowrap; }
.spec-ghost{ background:transparent; color:var(--brand); border:1px solid var(--brand); }
.spec-card-note{ margin-top:6px; }

.drag-public-body{ margin:0; background:var(--bg) url('/assets/background.jpg') no-repeat center/cover fixed; color:var(--page-text); }
.drag-h3-space{ margin-top:16px; }
.drag-step-hidden{ display:none; }
.drag-pack-inputs{ margin-top:10px; }
.drag-row-mt-8{ margin-top:8px; }
.drag-summary-mt-8{ margin-top:8px; }

.login-panel{ max-width:720px; width:100%; padding:24px; background:var(--login-panel-strong);
  border-radius:16px; box-shadow:0 10px 30px var(--shadow-strong); }
.login-panel-row{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; }

.brand-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}
.brand-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--white);
}
.brand-key{
  font-size:12px;
  color:var(--muted);
  min-width:120px;
}
.brand-input{
  flex:1;
  min-width:0;
}
.brand-swatch{
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
}