/* SiteForge v8 — colorful UI refresh
   Safe override layer loaded after styles.css and v8-enhancements.css. */

:root {
  --bg: #11162c;
  --bg-soft: #18203d;
  --panel: rgba(24, 31, 58, 0.94);
  --panel-2: #202b50;
  --panel-3: #2b3969;
  --line: #3b4b7b;
  --line-strong: #5e73ad;
  --text: #f8fbff;
  --muted: #c7d2ea;
  --muted-2: #9baacf;
  --accent: #8b6cff;
  --accent-2: #26c9ff;
  --accent-soft: rgba(139, 108, 255, .18);
  --success: #35d7a1;
  --warning: #ffc75b;
  --danger: #ff7698;
  --info: #69bfff;
  --radius: 18px;
  --radius-sm: 12px;
  --topbar: 76px;
  --left: 350px;
  --right: 400px;
  --shadow: 0 22px 60px rgba(5, 10, 30, .32);
  --v8-glow: rgba(97, 134, 255, .26);
  --v8-glass: rgba(23, 31, 57, .92);
  --v8-panel: #1b2444;
  --v8-line: #42547f;
}

html { font-size: 18px; }

body {
  color: var(--text);
  background:
    radial-gradient(circle at 8% -4%, rgba(38, 201, 255, .22), transparent 28%),
    radial-gradient(circle at 94% 6%, rgba(139, 108, 255, .24), transparent 26%),
    radial-gradient(circle at 48% 105%, rgba(53, 215, 161, .10), transparent 32%),
    linear-gradient(155deg, #0f1730 0%, #172244 48%, #111a35 100%);
}

.app-shell {
  background:
    radial-gradient(circle at 10% -10%, rgba(38, 201, 255, .13), transparent 29%),
    radial-gradient(circle at 88% 0%, rgba(139, 108, 255, .18), transparent 27%),
    radial-gradient(circle at 50% 100%, rgba(53, 215, 161, .07), transparent 32%),
    linear-gradient(165deg, #10172e 0%, #16203e 52%, #0e1730 100%);
}

.topbar {
  height: var(--topbar);
  background: rgba(14, 20, 40, .86);
  border-bottom: 1px solid rgba(111, 137, 201, .28);
  box-shadow: 0 16px 42px rgba(4, 8, 24, .26);
}

.brand {
  gap: 14px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
}

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  font-size: 21px;
  background: linear-gradient(145deg, #9b7cff, #5b8dff 48%, #2ed0ff 100%);
  box-shadow: 0 12px 28px rgba(65, 105, 255, .30), inset 0 1px 0 rgba(255,255,255,.28);
}

.brand-copy strong { font-size: 17px; }
.brand-copy span { font-size: 11px; color: #aebcdf; letter-spacing: .8px; }
.brand-copy .v8-badge {
  padding: 4px 8px;
  font-size: 10px;
  color: #e2dcff;
  background: linear-gradient(135deg, rgba(139,108,255,.2), rgba(38,201,255,.12));
  border: 1px solid rgba(139,108,255,.22);
}

.project-title-wrap { gap: 12px; }
.project-title {
  width: min(440px, 72%);
  height: 46px;
  padding: 0 15px;
  border-radius: 13px;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.project-title:hover { background: rgba(255,255,255,.05); border-color: rgba(121,145,205,.2); }
.project-title:focus {
  background: rgba(31, 41, 76, .96);
  border-color: #8b6cff;
  box-shadow: 0 0 0 4px rgba(139,108,255,.12);
}
.save-state { font-size: 13px; font-weight: 750; color: #afbedc; }

.topbar-actions { gap: 9px; padding-right: 16px; }
.btn {
  min-height: 46px;
  padding: 0 17px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
}
.btn.compact { min-height: 42px; padding-inline: 15px; }
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #896bff 0%, #657fff 47%, #26c9ff 100%);
  box-shadow: 0 11px 27px rgba(70, 104, 255, .26);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 32px rgba(70,104,255,.32); }
.btn-ghost {
  color: #eef3ff;
  background: linear-gradient(180deg, rgba(37,48,88,.96), rgba(29,39,72,.98));
  border-color: rgba(119, 144, 207, .28);
}
.btn-ghost:hover {
  background: linear-gradient(180deg, rgba(49,63,112,.98), rgba(36,48,89,1));
  border-color: rgba(149,169,226,.42);
}
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 19px;
  color: #b8c6e3;
}
.icon-btn:hover { color: #fff; background: rgba(47,61,108,.92); }
.icon-btn.small { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }

.sidebar {
  background:
    linear-gradient(180deg, rgba(24,31,58,.96), rgba(16,23,45,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.sidebar-left { border-right-color: rgba(101,124,187,.25); }
.sidebar-right { border-left-color: rgba(101,124,187,.25); }
.sidebar-tabs, .inspector-tabs { gap: 8px; padding: 14px; }
.sidebar-tab, .inspector-tab {
  padding: 11px 8px;
  border-radius: 11px;
  color: #a9b8da;
  font-size: 14px;
  font-weight: 850;
}
.sidebar-tab:hover, .inspector-tab:hover { color: #fff; background: rgba(255,255,255,.035); }
.sidebar-tab.active, .inspector-tab.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(63,80,140,.98), rgba(43,57,106,.98));
  box-shadow: inset 0 0 0 1px rgba(147,169,231,.21), 0 8px 18px rgba(6,10,24,.16);
}
.sidebar-content { padding: 18px; }

.search-box {
  height: 50px;
  padding: 0 15px;
  margin-bottom: 20px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(31,41,75,.98), rgba(24,33,62,1));
  border-color: rgba(115,137,198,.29);
  color: #a7b6d7;
}
.search-box:focus-within { border-color: #7e7cff; box-shadow: 0 0 0 4px rgba(126,124,255,.10); }
.search-box input { font-size: 15px; }
.search-box input::placeholder { color: #8495ba; }

.block-category { margin-bottom: 23px; }
.block-category-title { margin-bottom: 10px; font-size: 12px; color: #9fb0d0; }
.block-grid { gap: 11px; }
.block-tile {
  min-height: 104px;
  padding: 14px;
  border-radius: 16px;
  border-color: rgba(105,126,186,.25);
  background:
    radial-gradient(circle at 100% 100%, rgba(139,108,255,.11), transparent 42%),
    linear-gradient(180deg, rgba(36,46,84,.98), rgba(25,34,64,1));
}
.block-tile:nth-child(3n+2) {
  background:
    radial-gradient(circle at 100% 100%, rgba(38,201,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(34,47,85,.98), rgba(24,35,66,1));
}
.block-tile:hover {
  border-color: rgba(145,165,225,.50);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(5,9,24,.22);
}
.block-tile-icon { font-size: 25px; }
.block-tile strong { font-size: 14px; }
.block-tile small { margin-top: 5px; color: #a2b1cf; font-size: 11px; line-height: 1.35; }

.panel-heading h2 { margin-bottom: 7px; font-size: 18px; }
.panel-heading p { font-size: 13px; line-height: 1.5; color: #a4b2d0; }
.structure-list { gap: 10px; }
.structure-item {
  min-height: 66px;
  padding: 8px 9px 8px 6px;
  border-radius: 14px;
  border-color: rgba(104,126,186,.25);
  background: linear-gradient(180deg, rgba(31,40,75,.98), rgba(23,31,59,1));
}
.structure-item:hover { border-color: rgba(144,165,224,.42); }
.structure-item.active {
  border-color: rgba(139,108,255,.65);
  background: linear-gradient(90deg, rgba(139,108,255,.19), rgba(31,40,75,.98) 45%);
}
.structure-handle { font-size: 19px; }
.structure-copy strong { font-size: 14px; }
.structure-copy small { margin-top: 4px; color: #9fadd0; font-size: 11px; }
.structure-action {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 13px;
}

.template-grid { gap: 13px; }
.template-card {
  border-radius: 16px;
  border-color: rgba(105,127,188,.26);
  background: linear-gradient(180deg, rgba(31,40,74,.97), rgba(21,29,55,1));
}
.template-cover { height: 118px; padding: 14px; }
.template-cover span { padding: 6px 10px; font-size: 11px; }
.template-info { padding: 15px; }
.template-info h3 { margin-bottom: 6px; font-size: 15px; }
.template-info p { margin-bottom: 12px; font-size: 12px; line-height: 1.5; color: #a3b2d0; }
.template-info .btn { min-height: 38px; font-size: 12px; }

.sidebar-footer-actions {
  padding: 14px;
  background: linear-gradient(180deg, rgba(14,20,40,.48), rgba(14,20,40,.8));
}

.workspace-toolbar {
  min-height: 66px;
  padding: 14px 19px;
  border-bottom-color: rgba(102,126,189,.22);
  background: rgba(15,21,42,.54);
  backdrop-filter: blur(12px);
}
.device-btn {
  min-height: 43px;
  padding: 0 15px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  color: #9faed0;
}
.device-btn:hover { color: #fff; background: rgba(45,59,105,.7); }
.device-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #896bff, #5f86ff 46%, #26c9ff);
  box-shadow: 0 10px 24px rgba(69,105,255,.24);
}
.workspace-status,
.workspace-status span,
.workspace-status button,
.link-btn { font-size: 14px; font-weight: 750; }
.link-btn { color: #d1e0ff; }
.zoom-value {
  min-width: 70px;
  min-height: 38px;
  border-radius: 11px;
  color: #eef3ff;
  background: rgba(36,47,87,.94);
  font-size: 14px;
  font-weight: 800;
}

.canvas-area {
  padding: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.007)),
    radial-gradient(circle at 18% 0%, rgba(38,201,255,.07), transparent 25%),
    radial-gradient(circle at 82% 0%, rgba(139,108,255,.09), transparent 28%),
    linear-gradient(180deg, #11182f 0%, #0e162c 100%);
}
.canvas-frame {
  border-radius: 23px;
  border-color: rgba(112,134,197,.28);
  box-shadow: 0 24px 58px rgba(4,8,25,.32);
}

.inspector-header {
  padding: 19px 19px 13px;
  border-bottom: 1px solid rgba(105,127,188,.20);
}
.eyebrow { font-size: 12px; color: #84bdff; letter-spacing: 1px; font-weight: 850; }
.inspector-header h2 { margin-top: 4px; font-size: 21px; }
.inspector-scroll { padding: 18px; }

.inspector-section {
  margin-bottom: 19px;
  padding: 17px;
  border: 1px solid rgba(103,125,187,.22);
  border-radius: 17px;
  background: linear-gradient(180deg, rgba(30,39,73,.97), rgba(21,29,55,1));
  box-shadow: 0 10px 28px rgba(5,9,23,.14);
}
.inspector-section-title h3 { margin-bottom: 13px; font-size: 17px; }
.field label, .field-label { margin-bottom: 8px; color: #f1f5ff; font-size: 14px; font-weight: 800; }
.field-help { margin-top: 7px; color: #a4b3d0; font-size: 12px; line-height: 1.5; }
.text-input,
.number-input,
.select-input,
.color-text,
.text-area {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  border-color: rgba(112,134,198,.25);
  background: linear-gradient(180deg, rgba(37,47,87,.98), rgba(28,37,70,1));
  color: #fff;
  font-size: 15px;
}
.text-area { min-height: 126px; }
.text-input:focus,
.number-input:focus,
.select-input:focus,
.color-text:focus,
.text-area:focus {
  border-color: rgba(143,132,255,.78);
  box-shadow: 0 0 0 4px rgba(139,108,255,.11);
}
.color-input { width: 58px; min-width: 58px; height: 48px; border-radius: 12px; }
.toggle-row {
  padding: 15px 16px;
  border-radius: 14px;
  border: 1px solid rgba(107,129,190,.22);
  background: linear-gradient(180deg, rgba(31,40,75,.96), rgba(22,30,58,1));
}
.toggle-copy strong { font-size: 14px; }
.toggle-copy small { margin-top: 4px; color: #a0afcf; font-size: 12px; }
.toggle input:checked + .toggle-track { background: linear-gradient(135deg, #896bff, #26c9ff); }

.repeat-card {
  border-radius: 14px;
  border-color: rgba(107,129,190,.22);
  background: rgba(20,28,54,.88);
}
.repeat-card-head { padding: 13px 14px; border-bottom-color: rgba(107,129,190,.17); }
.repeat-card-head strong { font-size: 14px; }
.repeat-card-body { padding: 14px; }
.add-item-btn, .mini-action {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(112,134,198,.25);
  background: rgba(39,50,91,.94);
  color: #f0f4ff;
  font-size: 13px;
  font-weight: 800;
}
.add-item-btn:hover, .mini-action:hover { background: rgba(52,67,118,.98); }

.modal {
  border-radius: 21px;
  border-color: rgba(111,133,197,.26);
  background: linear-gradient(180deg, rgba(25,33,62,.99), rgba(17,24,46,1));
  box-shadow: 0 30px 75px rgba(4,8,25,.44);
}
.modal-header { padding-top: 18px; padding-bottom: 18px; }
.modal-header h2 { font-size: 21px; }
.modal-body p, .saved-project p, .confirm-copy { font-size: 14px; line-height: 1.55; }
.saved-project {
  padding: 17px;
  border-radius: 15px;
  border-color: rgba(108,130,192,.23);
  background: rgba(28,37,70,.90);
}
.saved-project h3 { margin-bottom: 6px; font-size: 16px; }

.toast {
  border-radius: 15px;
  border-color: rgba(111,133,196,.24);
  background: linear-gradient(180deg, rgba(32,42,77,.99), rgba(24,32,61,.99));
}
.toast strong { font-size: 15px; }
.toast p { font-size: 13px; }
.inspector-empty { padding: 26px 19px; border-radius: 17px; background: rgba(28,37,70,.34); }
.inspector-empty-icon { font-size: 32px; }
.inspector-empty h3 { font-size: 19px; }
.inspector-empty p { font-size: 14px; line-height: 1.55; color: #b0bfdd; }

/* v8 productivity layer */
.v8-command-backdrop, .v8-sheet-backdrop {
  background: rgba(8, 12, 28, .64);
}
.v8-command {
  width: min(780px, calc(100vw - 28px));
  border-color: rgba(119,143,207,.33);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(28,37,69,.99), rgba(19,27,51,.99));
  box-shadow: 0 34px 90px rgba(3,7,22,.48), 0 0 64px rgba(103,127,255,.16);
}
.v8-command-head { padding: 16px; border-bottom-color: rgba(111,133,195,.23); }
.v8-command-head span { font-size: 21px; color: #b7c8e7; }
.v8-command-search { font-size: 17px; color: #fff; }
.v8-command-search::placeholder { color: #91a2c5; }
.v8-command-key { padding: 5px 8px; border-color: rgba(113,135,198,.28); background: #202a4e; color: #b9c6e0; font-size: 11px; }
.v8-command-list { padding: 10px; }
.v8-command-group { padding: 11px 11px 7px; color: #9fb0d0; font-size: 11px; }
.v8-command-item {
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 13px;
}
.v8-command-item:hover, .v8-command-item.active { background: linear-gradient(90deg, rgba(139,108,255,.15), rgba(46,59,105,.78)); }
.v8-command-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border-color: rgba(111,133,196,.25);
  background: linear-gradient(180deg, #2c3968, #222d55);
  font-size: 17px;
}
.v8-command-copy strong { font-size: 14px; }
.v8-command-copy small { margin-top: 4px; color: #a7b6d5; font-size: 11px; }
.v8-command-shortcut { color: #9fafd0; font-size: 11px; }
.v8-command-empty { font-size: 14px; }

.v8-statusbar {
  height: 40px;
  bottom: 11px;
  padding: 0 12px;
  border-color: rgba(111,133,196,.22);
  border-radius: 12px;
  background: rgba(25,33,62,.90);
}
.v8-status-chip { font-size: 11px; color: #aab8d6; }
.v8-status-chip strong { color: #ecf2ff; }
.v8-statusbar button { font-size: 11px; color: #b3c0dc; }

.v8-fab { bottom: 60px; gap: 8px; }
.v8-fab button {
  height: 42px;
  padding: 0 14px;
  border-color: rgba(111,133,196,.26);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(42,54,98,.96), rgba(30,40,76,.98));
  color: #e9efff;
  font-size: 12px;
  font-weight: 800;
}
.v8-fab button:hover { border-color: rgba(147,166,226,.47); color: #fff; }

.v8-sheet {
  width: min(820px, calc(100vw - 28px));
  border-color: rgba(111,133,196,.28);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(27,36,67,.99), rgba(18,25,48,1));
}
.v8-sheet-head {
  padding: 18px 20px;
  border-bottom-color: rgba(111,133,196,.23);
  background: rgba(27,36,67,.96);
}
.v8-sheet-head h2 { font-size: 19px; }
.v8-sheet-head p { margin-top: 5px; color: #a6b5d4; font-size: 12px; }
.v8-sheet-body { padding: 20px; }
.v8-sheet-close { width: 38px; height: 38px; border-radius: 10px; font-size: 20px; background: #27335f; color: #c1cee5; }
.v8-grid-cards { gap: 12px; }
.v8-card {
  padding: 16px;
  border-color: rgba(111,133,196,.23);
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(37,48,88,.95), rgba(27,36,68,.98));
}
.v8-card h3 { margin-bottom: 6px; font-size: 15px; }
.v8-card p { color: #a9b8d6; font-size: 12px; line-height: 1.55; }
.v8-card-actions { margin-top: 14px; gap: 8px; }
.v8-mini-btn {
  min-height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border-color: rgba(111,133,196,.24);
  background: #2b3866;
  color: #edf2ff;
  font-size: 12px;
}
.v8-mini-btn.primary { background: linear-gradient(135deg, #896bff, #26c9ff); }
.v8-audit-list { gap: 10px; }
.v8-audit-row {
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 12px;
  padding: 13px;
  border-color: rgba(111,133,196,.22);
  border-radius: 13px;
  background: rgba(31,41,77,.92);
}
.v8-audit-icon { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.v8-audit-copy strong { font-size: 13px; }
.v8-audit-copy small { margin-top: 4px; color: #a7b6d4; font-size: 11px; line-height: 1.5; }
.v8-score { font-size: 23px; }
.v8-kbd-grid { gap: 10px; }
.v8-kbd-row {
  padding: 12px;
  border-color: rgba(111,133,196,.22);
  border-radius: 12px;
  background: rgba(31,41,77,.90);
  color: #b4c0da;
  font-size: 12px;
}
.v8-kbd-row kbd { padding: 5px 8px; border-radius: 7px; background: #1a2342; color: #fff; font-size: 11px; }

.v8-onboarding {
  width: min(390px, calc(100vw - 44px));
  padding: 18px;
  border-color: rgba(139,108,255,.38);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(38,201,255,.11), transparent 38%),
    linear-gradient(145deg, #2a285a, #1d294d 62%, #19233f);
  box-shadow: 0 20px 55px rgba(4,8,25,.36), 0 0 38px rgba(139,108,255,.14);
}
.v8-onboarding strong { font-size: 15px; }
.v8-onboarding p { margin: 8px 0 14px; color: #c3cfea; font-size: 12px; line-height: 1.6; }
.v8-onboarding-actions { gap: 8px; }
.v8-quick-btn::after { font-size: 10px; color: #b5c2dc; background: rgba(255,255,255,.04); }

body.v8-presentation .canvas-area { background: #0e1530; }
body.v8-grid .canvas-area {
  background-color: #10172d;
  background-image:
    linear-gradient(rgba(133,157,219,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133,157,219,.055) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, rgba(38,201,255,.07), transparent 24%),
    radial-gradient(circle at 80% 0%, rgba(139,108,255,.09), transparent 27%);
  background-size: 26px 26px, 26px 26px, auto, auto;
}
body.v8-compact { --left: 300px; --right: 350px; }

@media (max-width: 1500px) {
  :root { --left: 320px; --right: 360px; }
  html { font-size: 17px; }
}
@media (max-width: 1180px) {
  html { font-size: 16px; }
}
@media (max-width: 980px) {
  :root { --topbar: 72px; }
  .project-title { font-size: 16px; }
  .canvas-area { padding: 18px; }
  .v8-command-search { font-size: 16px; }
}
@media (max-width: 760px) {
  .v8-command-copy strong { font-size: 13px; }
  .v8-command-copy small { font-size: 10px; }
}
@media (max-width: 640px) {
  html { font-size: 15px; }
  .btn { min-height: 42px; font-size: 14px; }
  .sidebar-content, .inspector-scroll { padding: 14px; }
  .inspector-header h2, .modal-header h2 { font-size: 19px; }
}