:root {
  --dop-bg:#fff;
  --dop-text:#111;
  --dop-surface:#f7f7f7;
  --dop-border:#dedede;
  --dop-muted:#666;
}
html[data-theme="dark"] {
  --dop-bg:#101010;
  --dop-text:#fff;
  --dop-surface:#1c1c1c;
  --dop-border:#383838;
  --dop-muted:#aaa;
}
.dop-page {
  min-height:100vh;
  background:var(--dop-bg);
  color:var(--dop-text);
  font-family:Montserrat,sans-serif;
  padding:45px 0 80px;
}
.dop-page * {box-sizing:border-box}
.dop-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
}
.dop-eyebrow {
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
}
.dop-heading h1 {
  font-size:clamp(28px,4vw,46px);
  letter-spacing:-.045em;
  margin:12px 0;
}
.dop-heading p,.dop-panel>p {
  font-size:12px;
  line-height:1.8;
  color:var(--dop-muted);
}
.dop-demo {
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  color:var(--dop-muted);
}
.dop-stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px;
  margin-bottom:25px;
}
.dop-stats>div {
  padding:22px;
  border:1px solid var(--dop-border);
  border-radius:10px;
}
.dop-stats small {
  display:block;
  font-size:10px;
  color:var(--dop-muted);
  margin-bottom:12px;
}
.dop-stats strong {font-size:28px}
.dop-layout {
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.dop-sidebar {
  border:1px solid var(--dop-border);
  border-radius:10px;
  overflow:hidden;
}
.dop-sidebar nav {
  display:flex;
  flex-direction:column;
  padding:10px;
}
.dop-sidebar button {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:15px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--dop-text);
  text-align:left;
  font:700 12px Montserrat,sans-serif;
  cursor:pointer;
}
.dop-sidebar button.active {
  background:var(--dop-text);
  color:var(--dop-bg);
}
.dop-main {min-width:0}
.dop-panel {
  display:none;
  padding:30px;
  border:1px solid var(--dop-border);
  border-radius:10px;
}
.dop-panel.active {display:block}
.dop-panel h2 {
  font-size:24px;
  margin:0 0 10px;
}
.dop-form {margin-top:25px}
.dop-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:20px;
}
.dop-fields label {
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
  font-size:10px;
  font-weight:800;
}
.dop-fields input,.dop-fields select {
  width:100%;
  height:45px;
  padding:0 12px;
  border:1px solid var(--dop-border);
  border-radius:6px;
  background:var(--dop-bg);
  color:var(--dop-text);
  font:500 12px Montserrat,sans-serif;
}
.dop-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:12px 18px;
  border:1px solid var(--dop-text);
  border-radius:6px;
  background:var(--dop-text);
  color:var(--dop-bg);
  font:800 11px Montserrat,sans-serif;
  cursor:pointer;
}
.dop-list {margin-top:25px}
.dop-item {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:17px;
  border:1px solid var(--dop-border);
  border-radius:8px;
  margin-bottom:10px;
}
.dop-item strong {font-size:12px}
.dop-item p {
  font-size:11px;
  color:var(--dop-muted);
  margin:7px 0 0;
}
.dop-item button {
  padding:8px;
  border:1px solid var(--dop-border);
  border-radius:5px;
  background:transparent;
  color:var(--dop-text);
  cursor:pointer;
}
.dop-empty {
  text-align:center;
  padding:60px 15px;
  border:1px dashed var(--dop-border);
  border-radius:10px;
  margin-top:25px;
}
.dop-empty i {font-size:35px}
.dop-empty h3 {font-size:16px}
.dop-empty p {font-size:12px;color:var(--dop-muted)}
.dop-notice {
  margin-top:18px;
  padding:15px;
  border:1px solid var(--dop-border);
  border-radius:8px;
  font-size:12px;
}
.dop-notice[hidden] {display:none}
@media(max-width:900px) {
  .dop-layout {grid-template-columns:1fr}
  .dop-sidebar nav {
    flex-direction:row;
    overflow-x:auto;
  }
  .dop-sidebar button {
    flex:0 0 auto;
    width:auto;
    white-space:nowrap;
  }
}
@media(max-width:600px) {
  .dop-page {padding:30px 0 55px}
  .dop-heading {align-items:start;flex-direction:column}
  .dop-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .dop-stats>div {padding:16px}
  .dop-panel {padding:18px}
  .dop-fields {grid-template-columns:1fr}
  .dop-item {align-items:start}
}