:root {
  --bg: #f9efe7;
  --bg-2: #fff6f0;
  --panel: rgba(255,255,255,0.78);
  --panel-strong: rgba(255,255,255,0.92);
  --text: #35261f;
  --muted: #7a6457;
  --line: rgba(107, 76, 58, 0.14);
  --primary: #d97745;
  --primary-dark: #b95c31;
  --gold: #e0ac4d;
  --rose: #dc6f7e;
  --teal: #4aa7a0;
  --violet: #8f73d9;
  --cream: #fffaf4;
  --shadow: 0 16px 40px rgba(104, 59, 31, 0.14);
  --shadow-soft: 0 10px 24px rgba(104, 59, 31, 0.09);
  --radius: 24px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(217,111,126,0.18), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(74,167,160,0.14), transparent 26%),
    radial-gradient(circle at 100% 100%, rgba(224,172,77,0.15), transparent 28%),
    radial-gradient(circle at 0% 100%, rgba(143,115,217,0.12), transparent 24%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  min-height: 100vh;
}

body.login-body { display: grid; place-items: center; padding: 28px; }

h1,h2,h3,p { margin-top: 0; }
label { display:block; font-weight: 700; margin: 0 0 8px; font-size: 14px; }
input, select, textarea {
  width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,0.94);
  border-radius: 16px; padding: 14px 15px; font: inherit; color: var(--text);
  outline: none; transition: .2s ease;
}
input:focus, select:focus, textarea:focus { border-color: rgba(217,119,69,0.55); box-shadow: 0 0 0 4px rgba(217,119,69,0.12); }
textarea { resize: vertical; min-height: 170px; }
code { background: #fff2df; padding: 2px 7px; border-radius: 8px; }

.glass {
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  box-shadow: var(--shadow);
}

.login-shell {
  width: min(1150px, 100%);
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 24px;
}
.brand-card, .login-card, .panel, .hero {
  border-radius: var(--radius);
  padding: 28px;
}
.brand-card {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(150deg, rgba(255,250,244,0.94), rgba(255,238,229,0.9)),
    linear-gradient(45deg, rgba(217,119,69,0.09), rgba(74,167,160,0.08));
  position: relative;
  overflow: hidden;
}
.brand-card::before,
.brand-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.brand-card::before {
  right: -40px; top: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(217,119,69,0.18), transparent 70%);
}
.brand-card::after {
  left: -50px; bottom: -70px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(74,167,160,0.16), transparent 70%);
}
.paw, .logo-paw {
  width: 76px; height: 76px; border-radius: 22px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary), var(--rose)); color: white; font-size: 34px; box-shadow: var(--shadow);
}
.logo-paw { width: 58px; height: 58px; font-size: 26px; border-radius: 18px; }
.eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
.brand-card h1, .sidebar h1 { margin-bottom: 10px; }
.intro, .muted { color: var(--muted); line-height: 1.6; }
.feature-list, .login-bullets, .quick-list { padding-left: 18px; color: var(--text); }
.feature-list li, .login-bullets li, .quick-list li { margin: 10px 0; }
.login-card { background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,248,241,0.93)); }
.alert.error {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(220,111,126,0.11);
  color: #8d3243;
  margin-bottom: 16px;
  border: 1px solid rgba(220,111,126,0.18);
}
.login-form { display: grid; gap: 14px; }
.login-tip {
  margin-top: 18px; padding: 15px 16px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(224,172,77,0.16), rgba(217,119,69,0.10));
  border: 1px solid rgba(224,172,77,0.20);
}

.btn {
  appearance: none; border: 0; text-decoration: none; cursor: pointer;
  border-radius: 16px; padding: 13px 18px; font: inherit; font-weight: 800;
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  color: white;
  background: linear-gradient(135deg, var(--primary), var(--rose));
  box-shadow: 0 12px 24px rgba(217,119,69,0.24);
}
.btn-secondary {
  color: var(--text); background: rgba(255,255,255,0.92); border: 1px solid var(--line);
}
.btn-ghost {
  color: var(--muted); background: rgba(255,255,255,0.45); border: 1px dashed rgba(107,76,58,0.18);
}
.btn-full { width: 100%; }

.app-shell {
  display: grid;
  grid-template-columns: 310px 1fr;
  min-height: 100vh;
}
.sidebar {
  padding: 24px;
  border-right: 1px solid rgba(255,255,255,0.45);
  background: linear-gradient(180deg, rgba(255,246,240,0.72), rgba(255,255,255,0.40));
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}
.logo-block { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; }
.nav-list { display: grid; gap: 10px; }
.nav-item {
  text-align: left; border: 0; padding: 14px 16px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,0.76); color: var(--text); font: inherit; font-weight: 700;
  border: 1px solid rgba(255,255,255,0.5);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(217,119,69,0.92), rgba(220,111,126,0.9));
  color: white;
  box-shadow: 0 10px 24px rgba(217,119,69,0.20);
}
.sidebar-footer { display: grid; gap: 12px; }
.user-card {
  background: rgba(255,255,255,0.82); border-radius: 18px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid rgba(255,255,255,0.55);
}
.user-card span { color: var(--muted); font-size: 13px; }

.main-content { padding: 24px; }
.hero {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,245,239,0.88)),
    linear-gradient(135deg, rgba(74,167,160,0.09), rgba(224,172,77,0.10));
}
.hero h2 { margin-bottom: 10px; }
.hero-badge {
  white-space: nowrap; padding: 12px 16px; border-radius: 999px; font-weight: 800; color: white;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  box-shadow: 0 10px 20px rgba(74,167,160,0.18);
}

.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px;
}
.stat-card {
  border-radius: 20px; padding: 16px 18px; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,250,247,0.78));
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow-soft);
}
.stat-card strong { display:block; font-size: 24px; margin-top: 8px; }
.stat-card small { color: var(--muted); }
.stat-card.orange { border-bottom: 4px solid var(--primary); }
.stat-card.rose { border-bottom: 4px solid var(--rose); }
.stat-card.teal { border-bottom: 4px solid var(--teal); }
.stat-card.gold { border-bottom: 4px solid var(--gold); }

.helpers-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px;
}
.helper-card {
  border-radius: 22px; overflow: hidden; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,249,243,0.76));
  border: 1px solid rgba(255,255,255,0.55); box-shadow: var(--shadow-soft);
  display: grid; gap: 14px;
}
.helper-card.active { outline: 3px solid rgba(217,119,69,0.20); transform: translateY(-1px); }
.helper-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px;
  background: linear-gradient(135deg, rgba(224,172,77,0.20), rgba(220,111,126,0.15));
  border: 1px solid rgba(107,76,58,0.08);
}
.helper-name {
  display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: rgba(74,167,160,0.10); color: #246a65; margin-bottom: 8px;
}
.helper-copy h3 { margin-bottom: 8px; }
.helper-copy p:last-child { color: var(--muted); margin-bottom: 0; }
.helper-btn { width: 100%; }

.workspace-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px;
}
.panel { background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,250,245,0.72)); }
.section-head, .output-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 18px;
}
.mini-chip, .status-pill {
  padding: 9px 13px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap;
}
.mini-chip { background: rgba(224,172,77,0.16); color: #996100; }
.status-pill { background: rgba(74,167,160,0.13); color: #246a65; }
.generator-form { display: grid; gap: 16px; }
.field-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.field-grid.two { grid-template-columns: repeat(2, 1fr); }
.checks {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,0.55);
}
.checks label { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.checks input { width: auto; }
.button-row {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.output-panel { display: flex; flex-direction: column; }
.output-box {
  min-height: 420px; white-space: pre-wrap; line-height: 1.75;
  padding: 22px; border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,249,242,0.98));
  border: 1px solid rgba(107,76,58,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.sticky-row {
  position: sticky; bottom: 0; background: linear-gradient(180deg, rgba(249,239,231,0), rgba(249,239,231,0.88) 30%, rgba(249,239,231,1));
  padding-top: 14px; margin-top: auto;
}
.helper-note, .quick-box {
  margin-top: 16px; padding: 16px 18px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(143,115,217,0.10), rgba(74,167,160,0.10));
  border: 1px solid rgba(143,115,217,0.14);
}
.quick-box h4 { margin-bottom: 10px; }
.toast {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  background: linear-gradient(135deg, var(--teal), var(--violet));
  color: white; padding: 14px 16px; border-radius: 16px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: .22s ease;
  font-weight: 700;
}
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1250px) {
  .helpers-strip { grid-template-columns: repeat(3, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .app-shell, .login-shell, .workspace-grid { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.45); }
  .helpers-strip { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  body.login-body, .main-content, .sidebar { padding: 16px; }
  .brand-card, .login-card, .panel, .hero { padding: 20px; }
  .helpers-strip, .stats-row, .field-grid, .field-grid.two { grid-template-columns: 1fr; }
  .hero, .section-head, .output-head { flex-direction: column; align-items: flex-start; }
  .button-row { flex-direction: column; }
}