:root{
  --bg: #0f172a;
  --panel: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --accent: #22c55e;
  --accent2: #06b6d4;
  --danger: #ef4444;
  --border: #1f2937;
}

*{box-sizing:border-box}
html, body {height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
  color: var(--text);
  background: linear-gradient(120deg, #0b1220, #0f172a 60%);
}

.app{
  display:grid;
  grid-template-columns: 320px 1fr 360px;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "header header header"
    "left main right";
  height:100vh;
  gap: 10px;
  padding: 10px;
}

  body:not(.is-admin) [data-panel="me-pen"],
  body:not(.is-admin) #me-pen-panel,
  body:not(.is-admin) .meridian-pen-editor {    display: none !important;  }

.header{
  grid-area: header;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: rgba(17,24,39,0.6);
  border:1px solid var(--border);
  backdrop-filter: blur(6px);
  border-radius: 16px;
  padding:10px 14px;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  letter-spacing:.3px;
}
.brand .dot{
  width:12px; height:12px; border-radius:3px; background:var(--accent);
  box-shadow:0 0 0 3px rgba(34,197,94,.2);
}

.btn{
  border:1px solid var(--border);
  background:#0b1323;
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn:hover{ border-color:#334155; background:#0f172a; }

.panel{
  background: rgba(17,24,39,0.7);
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
}

.left{grid-area:left; display:flex; flex-direction:column; gap:12px;}
.right{grid-area:right; display:flex; flex-direction:column; gap:12px; overflow:auto;}
.main{grid-area:main; position:relative; overflow:hidden;}

.search{
  display:flex; gap:8px;
  background: #0b1323;
  border:1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
}
.search input{
  flex:1; background:transparent; border:none; outline:none; color:var(--text);
}
.search .clear{cursor:pointer; opacity:.7}
.search .clear:hover{opacity:1}

.filter-row{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}

.tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--border);
  background:#0b1323; border-radius:12px; color:var(--muted); font-size:12px;
}

.canvas-wrap{
  position:absolute; inset:0; border-radius: 16px; overflow:hidden;
  border:1px solid var(--border);
  background: radial-gradient(80% 60% at 50% 50%, #0a0f1d, #081023);
}

#three-canvas{ width:100%; height:100%; display:block; }

.point-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:5px;
  background:#0b1323;
}
.point-card h4{ margin:6px 0 6px; font-size:15px }
.point-card .meta{ color:var(--muted); font-size:12px }
.point-dot{
  display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; background:var(--accent);
}

.legend{display:flex; flex-wrap:wrap; gap:8px}

.footer-note{ color:#94a3b8; font-size:12px; opacity:.7 }
.small{ font-size:12px; color:var(--muted) }

.badge{ padding:2px 6px; border-radius:6px; border:1px solid var(--border); background:#0b1323; font-size:11px }
.badge.danger{ color:#fecaca; border-color:#7f1d1d; background:#220e0e }

.login-box{display:flex; gap:8px; align-items:center}
.login-box input{ width:130px; padding:8px 10px; border-radius:10px; border:1px solid var(--border); background:#0b1323; color:var(--text); }
.admin-box{display:flex; gap:8px; align-items:center}

.btn-sm{ padding:6px 8px; font-size:12px; border-radius:8px }

/* === FIX: make 3D canvas fill column on first paint === */
:root{ --header-h:56px; }
.canvas-wrap, #three-canvas{ height: calc(100vh - var(--header-h) - 32px) !important; min-height:560px; }
#three-canvas canvas{ width:100% !important; height:100% !important; display:block; }

/* =======================================================
   BỔ SUNG cho label huyệt + admin-only + overlay renderer
   ======================================================= */

/* 1) Để CSS2DRenderer bám đúng vùng 3D */
#three-canvas{ position: relative; }            /* quan trọng */
#three-canvas > div{                            /* phần tử của CSS2DRenderer */
  position: absolute !important;
  inset: 0;
  pointer-events: none !important;
}

/* 2) Label huyệt nổi trên mô hình */
.point-label{
  font-size:12px; line-height:1;
  padding:2px 6px;
  color:#fff;
  border-radius:6px;
  background:rgba(17,24,39,.85);
  border:1px solid #334155;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}

/* 3) Hành động chỉ dành cho admin (nếu muốn dùng CSS kiểm soát) */
.admin-only{ display:none !important; }
.is-admin .admin-only{ display:initial !important; }

/* 4) Nhấn mạnh nút xoá/sửa (tuỳ chọn) */
.btn-danger{ border-color:#7f1d1d; background:#1a0b0b; color:#fecaca; }
.btn-danger:hover{ background:#220e0e; }


.hide{display:none!important}