:root {
  --bg: #080b10;
  --surface: #111720;
  --surface-2: #171f2b;
  --text: #eff6ff;
  --muted: #8d9bad;
  --line: rgba(255,255,255,.09);
  --primary: #28d8ff;
  --primary-ink: #ffffff;
  --accent: #8cf35f;
  --danger: #ff5d7a;
  --radius: 8px;
  --shadow: 0 18px 54px rgba(0, 0, 0, .34);
  --panel: rgba(17, 23, 32, .9);
  --panel-strong: rgba(22, 30, 43, .96);
  --violet: #a78bfa;
  --pink: #ff6bb5;
  --amber: #ffd166;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #080b10; color: var(--text); letter-spacing: 0; }
a { color: var(--primary); text-decoration: none; font-weight: 700; }
button, input, select, textarea { font: inherit; }

.sf-app {
  --bg: #080b10;
  --surface: #111720;
  --surface-2: #171f2b;
  --text: #eff6ff;
  --muted: #8d9bad;
  --line: rgba(255,255,255,.09);
  --primary: #28d8ff;
  --accent: #8cf35f;
  --danger: #ff5d7a;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
  background:
    radial-gradient(circle at 24% 8%, rgba(40,216,255,.18), transparent 26%),
    radial-gradient(circle at 84% 16%, rgba(255,107,181,.14), transparent 24%),
    linear-gradient(135deg, #080b10 0%, #0d1118 48%, #07090d 100%);
}
.sf-sidebar { position: sticky; top: 0; height: 100vh; background: rgba(9, 13, 19, .78); color: #dbe7f5; padding: 18px 14px; border-right: 1px solid var(--line); backdrop-filter: blur(18px); }
.sf-brand { display: flex; align-items: center; gap: 12px; padding: 8px 6px 22px; }
.sf-brand strong { display: block; color: #fff; font-size: 15px; }
.sf-brand span { display: block; color: var(--muted); font-size: 12px; }
.sf-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #28d8ff, #8cf35f 58%, #ffd166); color: #071017; font-weight: 950; box-shadow: 0 12px 26px rgba(40,216,255,.2); }
.sf-nav { display: grid; gap: 7px; }
.sf-nav a { color: #9caabd; padding: 11px 12px; border-radius: 8px; font-size: 14px; border: 1px solid transparent; }
.sf-nav a:hover, .sf-nav a.active { background: linear-gradient(135deg, rgba(40,216,255,.13), rgba(140,243,95,.08)); border-color: rgba(40,216,255,.22); color: #fff; box-shadow: inset 3px 0 0 var(--primary); }

.sf-main { min-width: 0; padding: 22px; }
.sf-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; background: rgba(15, 21, 30, .72); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.sf-topbar h1 { margin: 2px 0 0; font-size: 25px; line-height: 1.12; color: #fff; }
.sf-kicker { display: block; color: var(--accent); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.sf-user { margin-right: 8px; color: var(--muted); font-weight: 700; }

.sf-card { background: linear-gradient(180deg, rgba(23,31,43,.94), rgba(15,21,30,.92)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; }
.sf-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sf-card-head h2 { margin: 0; font-size: 17px; color: #fff; }
.sf-card-head p { margin: 4px 0 0; }
.sf-muted { color: var(--muted); line-height: 1.45; }
.sf-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.sf-dashboard-hero { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; min-height: 176px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(40,216,255,.14), rgba(255,107,181,.1) 42%, rgba(140,243,95,.08)), rgba(15,21,30,.86); box-shadow: var(--shadow); overflow: hidden; position: relative; }
.sf-dashboard-hero::after { content: ""; position: absolute; right: -60px; top: -70px; width: 260px; height: 260px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; background: radial-gradient(circle, rgba(40,216,255,.18), transparent 58%); }
.sf-dashboard-hero h2 { position: relative; margin: 8px 0 8px; max-width: 760px; color: #fff; font-size: 32px; line-height: 1.12; }
.sf-dashboard-hero p { position: relative; max-width: 720px; margin: 0; }
.sf-hero-actions { position: relative; display: flex; gap: 10px; flex-wrap: wrap; justify-content: end; }
.sf-dashboard-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; }
.sf-dashboard-grid.wide-left { grid-template-columns: minmax(0, 1.5fr) minmax(300px, .7fr); }
.sf-stack-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.sf-stack-map span { min-height: 42px; display: flex; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.04); color: #dce7f5; font-weight: 800; }
.sf-status-list { display: grid; gap: 10px; }
.sf-status-list div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.04); }
.sf-status-list span { color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.sf-status-list strong { color: var(--accent); }
.sf-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.sf-metrics article { position: relative; overflow: hidden; min-height: 134px; background: linear-gradient(150deg, rgba(23,31,43,.98), rgba(12,17,24,.96)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); }
.sf-metrics article::after { content: ""; position: absolute; inset: auto 12px 12px auto; width: 94px; height: 52px; border-radius: 50%; background: radial-gradient(circle, rgba(40,216,255,.2), transparent 68%); }
.sf-metrics span { display: block; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; }
.sf-metrics strong { display: block; margin-top: 8px; font-size: 34px; color: #fff; }
.sf-metric-trend { display: inline-flex; margin-top: 10px; min-height: 24px; align-items: center; border-radius: 999px; padding: 4px 8px; background: rgba(140,243,95,.12); color: var(--accent); font-size: 12px; font-weight: 850; }
.sf-mini-chart { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; align-items: end; gap: 6px; height: 34px; opacity: .85; }
.sf-mini-chart i { display: block; flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--primary), rgba(40,216,255,.18)); }
.sf-mini-chart i:nth-child(2n) { background: linear-gradient(180deg, var(--accent), rgba(140,243,95,.14)); }
.sf-mini-chart i:nth-child(3n) { background: linear-gradient(180deg, var(--pink), rgba(255,107,181,.14)); }

.sf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 12px; border: 1px solid rgba(40,216,255,.52); border-radius: var(--radius); background: linear-gradient(135deg, #28d8ff, #22aeea); color: #061018; cursor: pointer; font-weight: 900; box-shadow: 0 12px 24px rgba(40,216,255,.14); }
.sf-btn.ghost { background: rgba(255,255,255,.045); color: var(--primary); border-color: var(--line); box-shadow: none; }
.sf-btn.full { width: 100%; }
.sf-icon-btn { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text); cursor: pointer; }

.sf-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.sf-form-grid label.wide, .sf-form-grid button { grid-column: 1 / -1; }
.sf-form-grid input, .sf-form-grid select, .sf-form-grid textarea, .sf-input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.045); color: var(--text); padding: 9px 10px; min-height: 38px; outline: none; }
.sf-form-grid input:focus, .sf-form-grid select:focus, .sf-form-grid textarea:focus, .sf-input:focus { border-color: rgba(40,216,255,.65); box-shadow: 0 0 0 3px rgba(40,216,255,.11); }
.sf-form-grid textarea { min-height: 110px; resize: vertical; }
.sf-form-grid .has-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(211, 60, 74, .12); }
.sf-code-grid textarea { min-height: 210px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.sf-property-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.035); padding: 10px; }
.sf-prop-row { display: grid!important; gap: 5px; margin: 0; }
.sf-prop-row input, .sf-prop-row textarea, .sf-prop-row select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: rgba(5,9,14,.72); color: var(--text); }
.sf-prop-row textarea { min-height: 82px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.sf-prop-tools { display: flex; gap: 8px; align-items: center; grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--line); }
.sf-prop-tools input { min-width: 180px; flex: 1; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; background: rgba(5,9,14,.72); color: var(--text); }

.sf-table { width: 100%; border-collapse: collapse; }
.sf-table th { text-align: left; font-size: 11px; color: var(--muted); text-transform: uppercase; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.sf-table td { padding: 10px 8px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; color: #dce7f5; }
.sf-table tr:hover td { background: rgba(255,255,255,.025); }
.sf-pill { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: rgba(40,216,255,.11); color: var(--primary); border: 1px solid rgba(40,216,255,.18); font-size: 12px; font-weight: 850; }
.sf-link-btn, .sf-inline-form button { border: 0; background: transparent; color: var(--primary); cursor: pointer; font-weight: 800; padding: 0; }
.sf-inline-form { display: inline; margin-left: 8px; }
.sf-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sf-flow span { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 999px; padding: 6px 10px; font-weight: 800; font-size: 12px; color: #dce7f5; }

.sf-builder { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; }
.sf-inspector { background: linear-gradient(180deg, rgba(17,23,32,.94), rgba(7,10,15,.94)); color: #dbe8f8; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: grid; gap: 7px; align-content: start; }
.sf-inspector strong { color: #fff; margin-bottom: 5px; }
.sf-inspector span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 7px; font-size: 12px; }
.sf-field-form { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }

.sf-runtime-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.sf-control { width: var(--field-width); min-width: 220px; display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 800; }
.sf-textarea { resize: vertical; }
.sf-code-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.sf-switch { width: 42px; height: 24px; }
.sf-lookup { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 6px; }
.sf-grid { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.025); }
.sf-grid-head, .sf-grid-row { display: flex; min-width: max-content; }
.sf-grid-head { position: sticky; top: 0; background: rgba(22,30,43,.98); z-index: 2; }
.sf-grid-head > div { padding: 9px; border-right: 1px solid var(--line); font-size: 11px; color: var(--muted); font-weight: 900; text-transform: uppercase; cursor: pointer; }
.sf-grid-row > div { padding: 9px; border-top: 1px solid rgba(255,255,255,.06); border-right: 1px solid rgba(255,255,255,.06); min-height: 37px; color: #dce7f5; }
.sf-grid-foot, .sf-empty { padding: 10px; color: var(--muted); font-weight: 800; background: rgba(255,255,255,.025); }
.sf-slider-options { display: flex; flex-wrap: wrap; gap: 7px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.035); }
.sf-slider-option { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.05); color: var(--text); padding: 7px 10px; cursor: pointer; font-weight: 800; }
.sf-slider-option.active { background: var(--primary); border-color: var(--primary); color: #061018; }
.sf-bound-details, .sf-signature-pad { border: 1px dashed rgba(40,216,255,.35); background: rgba(40,216,255,.04); border-radius: var(--radius); padding: 12px; color: var(--muted); font-weight: 800; }
.sf-color { padding: 3px; width: 70px; }
.sf-modal[hidden] { display: none; }
.sf-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(0, 0, 0, .68); }
.sf-modal-panel { width: min(720px, 100%); max-height: min(680px, calc(100vh - 30px)); overflow: auto; background: #111720; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,.42); padding: 14px; }
.sf-lookup-results { display: grid; gap: 7px; margin-top: 10px; }
.sf-lookup-row { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.045); color: var(--text); padding: 10px; cursor: pointer; font-weight: 800; }
.sf-lookup-row:hover { border-color: var(--primary); background: rgba(40,216,255,.08); }
.sf-file-current, .sf-image-current { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
.sf-image-current img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.sf-portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sf-portal-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.045); color: var(--text); text-decoration: none; }
.sf-portal-tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.sf-portal-tile span { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0; }

.sf-blank { min-height: 100vh; display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at top left, #dbeafe, transparent 35%), var(--bg); }
.sf-auth-card { width: min(760px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.sf-auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sf-auth-head h1 { margin: 0; font-size: 22px; }
.sf-auth-head p { margin: 4px 0 0; color: var(--muted); }
.sf-alert { border: 1px solid #f2b8bf; background: #fff1f2; color: #9f2430; border-radius: var(--radius); padding: 10px; margin-bottom: 12px; font-weight: 800; }
.sf-token { border-color: #b7e4ca; background: #effaf4; color: #17643b; word-break: break-all; }
.sf-code { margin: 0 0 10px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: #0f172a; color: #dbeafe; overflow: auto; font-size: 12px; }
.sf-swatch { display: inline-block; width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--line); vertical-align: middle; }
.sf-mini-select { max-width: 130px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; font-size: 12px; }
.sf-theme-preview { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.sf-theme-preview-top { background: var(--primary); color: #fff; padding: 10px 12px; font-weight: 900; }
.sf-theme-preview-body { padding: 14px; background: var(--bg); }
.sf-theme-preview-body p { color: var(--muted); }

@media (max-width: 900px) {
  .sf-app { grid-template-columns: 1fr; }
  .sf-sidebar { position: static; height: auto; }
  .sf-grid-2, .sf-metrics, .sf-builder, .sf-dashboard-grid, .sf-dashboard-grid.wide-left { grid-template-columns: 1fr; }
  .sf-dashboard-hero { display: block; min-height: 0; }
  .sf-dashboard-hero h2 { font-size: 25px; }
  .sf-hero-actions { justify-content: start; margin-top: 14px; }
  .sf-topbar { display: block; }
  .sf-topbar form { margin-top: 10px; }
  .sf-form-grid { grid-template-columns: 1fr; }
  .sf-control { width: 100%; }
}