@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #08120d;
  --surface:   #0e1a14;
  --surface2:  #16241d;
  --border:    rgba(61,220,132,.15);
  --accent:    #3ddc84;
  --accent2:   #6ee7a5;
  --accent3:   #2dd4bf;
  --warn:      #ff4d6d;
  --amber:     #ffd60a;
  --text:      #d2e6db;
  --muted:     #6f9384;
  --radius:    10px;
  --shadow:    0 8px 32px rgba(0,0,0,.7);
  --glow:      0 0 20px rgba(61,220,132,.3);
  --glow-s:    0 0 10px rgba(61,220,132,.2);
  --glass:     rgba(14,26,20,.75);
  --glass-border: rgba(61,220,132,.2);
  --ov-bg:     #08120d;
  --ov-surface:#0e1a14;
  --ov-select: #3ddc84;
  --fp-module-w: 0px;
  --sb-w: 220px;

  /* ── Shared page grid ──────────────────────────────────────────
     One definition drives the body background AND every full-area
     panel (see grid.css), so the lattice reads as one continuous
     backdrop whichever module is open. */
  --dt-grid-line: rgba(61,220,132,.07);
  --dt-grid-size: 40px;
}

/* Brand mark. Occupies exactly the 20x20 footprint the cube SVG used, in
   both the sidebar rail and the sign-in screen. The PNG is 128x77, so
   `contain` letterboxes it inside that box instead of distorting it. */
.dt-brand-mark {
  width: 20px; height: 20px;
  object-fit: contain;
  display: block;
}

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 220px;
  padding-top: 56px;
  transition: padding-left .28s cubic-bezier(.4,0,.2,1);
}

/* Body grid: dark rule lines on a 40px lattice, radially faded out so the
   pattern reads near the centre of the viewport and dissolves at the edges. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--dt-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dt-grid-line) 1px, transparent 1px);
  background-size: var(--dt-grid-size) var(--dt-grid-size);
  pointer-events: none;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(44,221,127,.3); border-radius: 2px; }

header {
  width: 100%;
  padding: 2rem 1rem 1.5rem;
  background: linear-gradient(135deg, #0d1713 0%, #1d3028 50%, #0d1713 100%);
  border-bottom: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(111,232,167,.12) 0%, transparent 70%);
  pointer-events: none;
}
.logo-row {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; margin-bottom: .5rem;
}
.logo-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--accent), #7eead8);
  border-radius: 10px; display: grid; place-items: center;
  font-size: 1.3rem; box-shadow: 0 0 20px rgba(111,232,167,.3);
}
h1 {
  font-size: clamp(1.25rem, 3vw, 1.8rem); font-weight: 700; letter-spacing: -.5px;
  background: linear-gradient(90deg, #6fe8a7, #7eead8, #6fe8a7);
  background-size: 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer { to { background-position: 200% center; } }
.subtitle { font-size: .875rem; color: var(--muted); margin-top: .35rem; }

main {
  width: min(640px, 96vw); padding: 2rem 0 4rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

details {
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
summary {
  padding: .75rem 1rem; cursor: pointer; font-size: .85rem; font-weight: 600;
  color: var(--muted); list-style: none; display: flex; align-items: center;
  gap: .5rem; user-select: none;
}
summary::before { content: '\2699'; }
summary::-webkit-details-marker { display: none; }
details[open] summary { border-bottom: 1px solid var(--border); color: var(--text); }
.settings-body { padding: 1rem; display: grid; gap: .85rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
label { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
input[type="number"] {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: .5rem .75rem; font-size: .9rem; width: 100%;
  transition: border-color .15s;
}
input[type="number"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(111,232,167,.15); }
.field-hint { font-size: .74rem; color: var(--muted); }

@keyframes dt-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(44,221,127,.3); }
  50% { box-shadow: 0 0 20px rgba(44,221,127,.6); }
}
@keyframes dt-scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes dt-blink { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes dt-glow-border {
  0%, 100% { border-color: rgba(44,221,127,.2); }
  50% { border-color: rgba(44,221,127,.5); }
}

.layer-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .25rem; }
.legend-item { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted); }
.legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

header {
  background: rgba(7,13,11,.97) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
header h1 {
  font-family: 'Space Grotesk', sans-serif !important;
  background: linear-gradient(90deg, #2cdd7f, #77e9d6, #00ff9d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

#app-wrapper { display: none; }
#app-wrapper.visible { display: contents; }
#app-wrapper.visible { display: flex; flex-direction: column; min-height: calc(100vh - 56px); }

#sb-reopen-tab { display: none !important; }

.view-only-banner {
  display: none; align-items: center; justify-content: center; gap: 0.4rem;
  background: rgba(255,110,0,.08); border: 1px solid rgba(255,110,0,.25);
  color: var(--accent); font-size: 0.8rem; padding: 0.4rem 1rem;
  border-radius: var(--radius); margin: 0.5rem auto; width: fit-content;
}
.dt-view-only .view-only-banner { display: flex !important; }
.dt-view-only #drop-zone,
.dt-view-only #btn-edit,
.dt-view-only #btn-draw,
.dt-view-only #btn-save-edits,
.dt-view-only #btn-edit-close,
.dt-view-only #btn-add-room,
.dt-view-only #btn-save-rooms,
.dt-view-only #btn-annotate,
.dt-view-only #btn-add-room-ok,
.dt-view-only #btn-add-room-cancel,
.dt-view-only #add-room-bar,
.dt-view-only .edit-bar,
.dt-view-only .room-edit-btn,
.dt-view-only .furniture-palette,
.dt-view-only #file-input,
.dt-view-only #photo-file-input,
.dt-view-only #scan-file-input { display: none !important; }