:root {
  --bg: #f7f4ee;
  --surface: #ffffff;
  --surface-soft: #f3f0ea;
  --ink: #24313a;
  --muted: #6f7a80;
  --line: #e5e0d7;
  --line-strong: #d6cfc3;
  --brand: #168f86;
  --brand-dark: #11756f;
  --brand-soft: #e6f6f1;
  --focus: #5aa9a2;
  --violet: var(--brand);
  --violet-dark: var(--brand-dark);
  --violet-soft: var(--brand-soft);
  --danger: #c94f60;
  --danger-soft: #fcecee;
  --success: #2e936e;
  --warning: #c58a24;
  --shadow-sm: 0 1px 2px rgba(55, 45, 32, .05), 0 6px 20px rgba(71, 56, 35, .05);
  --shadow-lg: 0 24px 70px rgba(54, 43, 28, .15);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; color: var(--ink); background: var(--bg); font-family: var(--font); }
body { margin: 0; min-height: 100vh; font-size: 15px; line-height: 1.5; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
:focus-visible { outline: 3px solid rgba(90, 169, 162, .38); outline-offset: 2px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 760; letter-spacing: -.02em; }
.brand-large { font-size: 21px; }
.brand-mark { position: relative; width: 30px; height: 30px; display: inline-block; }
.brand-mark span { position: absolute; display: block; border-radius: 50%; background: var(--brand); box-shadow: 0 3px 7px rgba(22,143,134,.22); }
.brand-mark span:nth-child(1) { width: 11px; height: 11px; left: 1px; top: 10px; }
.brand-mark span:nth-child(2) { width: 8px; height: 8px; right: 1px; top: 2px; background: #d9af55; }
.brand-mark span:nth-child(3) { width: 8px; height: 8px; right: 1px; bottom: 2px; background: #d98a82; }
.brand-mark span:nth-child(4) { width: 14px; height: 3px; left: 10px; top: 14px; border-radius: 99px; transform: rotate(-28deg); box-shadow: none; }
.brand-mark::after { content: ''; position: absolute; width: 14px; height: 3px; left: 10px; top: 16px; background: var(--violet); border-radius: 99px; transform: rotate(28deg); }
.brand-mark-small { transform: scale(.86); transform-origin: center; }

.guest-body { display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% -20%, #fff 0, #fbfaf7 42%, #f1ede5 100%); }
.guest-shell { position: relative; z-index: 2; width: min(100% - 32px, 480px); padding: 48px 0; }
.ambient { position: fixed; border-radius: 50%; filter: blur(4px); opacity: .6; pointer-events: none; }
.ambient-one { width: 420px; height: 420px; left: -180px; top: -180px; background: radial-gradient(circle, rgba(95,181,163,.18), transparent 65%); }
.ambient-two { width: 520px; height: 520px; right: -230px; bottom: -260px; background: radial-gradient(circle, rgba(217,175,85,.14), transparent 65%); }
.login-card, .error-card { padding: 38px; border: 1px solid rgba(220,220,234,.86); background: rgba(255,255,255,.88); backdrop-filter: blur(18px); border-radius: 28px; box-shadow: var(--shadow-lg); }
.login-heading { margin: 34px 0 26px; }
.login-heading h1, .error-card h1 { margin: 3px 0 10px; font-size: clamp(28px, 7vw, 38px); line-height: 1.12; letter-spacing: -.045em; }
.login-heading p:last-child, .error-card p { margin: 0; color: var(--muted); }
.login-note { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 12px; }
.error-card { text-align: center; }
.error-card .brand { justify-content: center; }
.error-code { margin: 28px 0 0 !important; color: var(--violet) !important; font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.error-card .button { margin-top: 24px; }
.eyebrow { margin: 0; color: var(--violet); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.form-stack { display: grid; gap: 16px; }
.form-stack-tight { gap: 10px; min-width: 220px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span, .color-field legend { color: #4f5a5f; font-size: 12px; font-weight: 720; }
.field input, .field textarea, .field select, .share-result input { width: 100%; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--ink); background: #fff; padding: 12px 13px; transition: border-color .16s, box-shadow .16s; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: #bdb4a7; }
.field input:focus, .field textarea:focus, .field select:focus, .share-result input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(22,143,134,.11); }
.field textarea { resize: vertical; }
.field small { color: var(--muted); font-size: 11px; }
.compact-field { gap: 5px; }
.compact-field input, .compact-field textarea, .compact-field select { padding: 9px 10px; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 12px; background: #fff; cursor: pointer; font-weight: 720; font-size: 13px; transition: transform .14s, box-shadow .14s, background .14s, border-color .14s; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; background: linear-gradient(135deg, #1a9c92, #11756f); box-shadow: 0 8px 18px rgba(17,117,111,.2); }
.button-primary:hover { box-shadow: 0 11px 24px rgba(17,117,111,.28); }
.button-soft { color: var(--brand-dark); background: var(--brand-soft); border-color: #cce9e2; }
.button-ghost { background: transparent; border-color: var(--line); }
.button-ghost:hover { background: var(--surface-soft); }
.button-danger-ghost { color: var(--danger); background: var(--danger-soft); border-color: #ffd4dd; }
.button-small { min-height: 36px; padding: 8px 12px; font-size: 12px; }
.button-block { width: 100%; }
.icon-button { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: 21px; line-height: 1; }
.icon-button:hover { background: var(--surface-soft); }

.alert { padding: 11px 13px; border-radius: 10px; margin: 0 0 18px; font-size: 13px; }
.alert-danger { color: #943148; background: var(--danger-soft); border: 1px solid #ffd4dd; }
.alert-success { color: #216c54; background: #e9f6ef; border: 1px solid #cae8d8; }

.app-body { background: var(--bg); }
.topbar { position: sticky; top: 0; z-index: 30; height: 68px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 24px; padding: 0 max(24px, calc((100vw - 1280px)/2)); border-bottom: 1px solid rgba(229,224,215,.94); background: rgba(255,255,255,.9); backdrop-filter: blur(16px); }
.topnav { display: flex; gap: 6px; }
.mobile-nav-button { display: none; }
.nav-link { padding: 8px 12px; border-radius: 9px; color: #566268; font-size: 13px; font-weight: 650; }
.nav-link:hover { color: var(--ink); background: var(--surface-soft); }
.account-menu { display: flex; align-items: center; gap: 10px; }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #1a9c92, #d9af55); font-size: 12px; font-weight: 800; }
.avatar-small { width: 31px; height: 31px; }
.account-copy { display: grid; min-width: 100px; line-height: 1.2; }
.account-copy strong { font-size: 12px; }
.account-copy span { color: var(--muted); font-size: 10px; margin-top: 3px; }
.page-shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 54px 0 80px; }
.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero-actions { display: flex; align-items: center; gap: 9px; }
.hero-row-compact { align-items: center; }
.hero-row h1 { margin: 5px 0 6px; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -.045em; }
.hero-row-compact h1 { font-size: 38px; }
.page-lead { margin: 0; color: var(--muted); }
.dashboard-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 38px 0 20px; }
.search-field { position: relative; width: min(420px, 100%); }
.search-field svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-field input { width: 100%; height: 44px; padding: 0 14px 0 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.search-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(22,143,134,.09); }
.map-summary { color: var(--muted); font-size: 12px; }
.map-summary strong { color: var(--ink); }

.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.map-card { position: relative; overflow: visible; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .16s, box-shadow .16s, border-color .16s; }
.map-card:hover, .map-card:focus-within { transform: translateY(-2px); border-color: #cfc6b9; box-shadow: 0 16px 38px rgba(62,48,31,.1); }
.map-card-link { display: block; }
.map-preview { position: relative; height: 154px; overflow: hidden; border-radius: 17px 17px 0 0; background: radial-gradient(circle at 1px 1px, #ddd7cd 1px, transparent 1px) 0 0/18px 18px, linear-gradient(145deg,#fffdf9,#f3f0ea); }
.preview-root, .preview-node { position: absolute; display: block; border-radius: 6px; background: #fff; border: 2px solid #5fb5a3; box-shadow: 0 4px 11px rgba(55,45,32,.1); }
.preview-root { left: 52px; top: 62px; width: 72px; height: 28px; background: #197f73; border-color: #14685f; }
.preview-node { width: 52px; height: 20px; right: 42px; }
.pn-1 { top: 26px; border-color: #78a9d7; background: #eaf3fc; }.pn-2 { top: 64px; border-color: #d9af55; background: #fff5d9; }.pn-3 { top: 103px; border-color: #d98a82; background: #fdebe9; }
.branch { position: absolute; left: 121px; width: 72px; height: 1px; background: #cfc8bc; transform-origin: left center; }
.branch-1 { top: 69px; transform: rotate(-27deg); }.branch-2 { top: 76px; }.branch-3 { top: 82px; transform: rotate(28deg); }
.map-card-copy { padding: 18px 19px 20px; }
.map-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.map-card h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.02em; }
.map-card-copy > p { min-height: 36px; margin: 7px 0 14px; display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.map-card-meta { display: flex; color: #9293a2; font-size: 10px; }
.status-pill, .role-pill { flex: 0 0 auto; padding: 3px 7px; border-radius: 99px; color: var(--brand-dark); background: var(--brand-soft); font-size: 9px; font-weight: 750; }
.card-menu { position: absolute; right: 10px; top: 10px; z-index: 4; }
.card-menu summary, .table-menu summary { list-style: none; cursor: pointer; }
.card-menu summary::-webkit-details-marker, .table-menu summary::-webkit-details-marker { display: none; }
.card-menu > summary { display: grid; place-items: center; width: 32px; height: 28px; border: 1px solid rgba(220,220,230,.8); border-radius: 8px; background: rgba(255,255,255,.9); font-weight: 800; letter-spacing: 1px; }
.menu-popover { position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: 0 14px 40px rgba(24,21,60,.14); }
.menu-popover a, .menu-popover button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; cursor: pointer; font-size: 12px; }
.menu-popover a:hover, .menu-popover button:hover { background: var(--surface-soft); }
.danger-text { color: var(--danger) !important; }

.empty-state { min-height: 430px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-state h2 { margin: 22px 0 5px; font-size: 22px; }.empty-state p { margin: 0 0 20px; color: var(--muted); }
.empty-visual { position: relative; width: 190px; height: 110px; }
.empty-root, .empty-node { position: absolute; z-index: 2; border-radius: 7px; }
.empty-root { width: 58px; height: 30px; left: 18px; top: 40px; background: var(--brand); }
.empty-node { width: 44px; height: 20px; right: 12px; background: #eef6dd; border: 2px solid #9ebe67; }
.node-a { top: 8px; }.node-b { top: 45px; }.node-c { top: 82px; }
.empty-line { position: absolute; left: 70px; top: 55px; width: 77px; height: 2px; background: #cfc8bc; transform-origin: left; }.line-a { transform: rotate(-30deg); }.line-c { transform: rotate(30deg); }

.modal { width: min(100% - 32px, 520px); padding: 0; border: 0; border-radius: 20px; background: transparent; box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(36,49,58,.42); backdrop-filter: blur(4px); }
.modal-card { padding: 25px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: #fff; }
.modal-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.modal-heading h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.03em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.modal-description { margin: -10px 0 20px; color: var(--muted); font-size: 13px; }

.table-card { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.settings-card { width: min(100%, 620px); margin-top: 32px; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); }
.settings-actions { display: flex; justify-content: flex-end; margin-top: 5px; }
.trash-list { display: grid; gap: 10px; margin-top: 32px; }.trash-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.trash-row > div { min-width: 0; display: grid; gap: 3px; }.trash-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.trash-row span { color: var(--muted); font-size: 10px; }
.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px 18px; border-bottom: 1px solid #eee9e1; text-align: left; white-space: nowrap; font-size: 12px; }
th { color: var(--muted); background: #fbfaf7; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
tbody tr:last-child td { border-bottom: 0; }
.user-cell { display: flex; align-items: center; gap: 10px; }.user-cell div { display: grid; }.user-cell span { color: var(--muted); font-size: 10px; }
.status-dot { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #b8bac6; }.status-dot.is-active::before { background: #2caa83; }
.table-menu { position: relative; }.menu-popover-right { top: calc(100% + 4px); right: 0; z-index: 10; }

@media (max-width: 960px) {
  .topbar { grid-template-columns: auto auto 1fr; padding: 0 20px; }.mobile-nav-button { display: inline-grid; }.topnav { position: fixed; z-index: 35; left: 16px; right: 16px; top: 74px; display: none; padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-lg); }.topnav.is-open { display: grid; }.nav-link { min-height: 44px; display: flex; align-items: center; }.account-menu { justify-self: end; }.account-copy { display: none; }
  .page-shell { width: min(100% - 32px, 760px); padding-top: 36px; }.map-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .guest-shell { width: min(100% - 24px, 460px); }.login-card, .error-card { padding: 28px 22px; border-radius: 22px; }
  .topbar { height: 60px; padding-inline: 12px; gap: 8px; }.topnav { top: 66px; left: 12px; right: 12px; }.account-menu .button { font-size: 0; width: 40px; min-height: 40px; padding: 0; }.account-menu .button::after { content: '↪'; font-size: 16px; }
  .page-shell { width: min(100% - 24px, 520px); padding-top: 28px; }.hero-row { align-items: flex-start; flex-direction: column; }.hero-actions { width: 100%; }.hero-actions .button { flex: 1; }.hero-row h1 { font-size: 34px; }
  .dashboard-toolbar { align-items: stretch; flex-direction: column; margin-top: 28px; }.map-summary { align-self: flex-end; }.map-grid { grid-template-columns: 1fr; }.map-preview { height: 130px; }
  .form-grid { grid-template-columns: 1fr; }.modal-card { padding: 21px; }.modal-actions { flex-wrap: wrap; }.modal-actions .button { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}