/* Match the flat Aadhaar-PAN Studio workspace. */
#idCanvas { pointer-events: auto; touch-action: none; }
.floating-tools-sidebar > .sidebar-card-box.id-drop-active { background: #fff7ed !important; outline: 2px dashed #ea580c; outline-offset: -4px; }
.floating-tools-sidebar > [hidden] { display: none !important; }
.id-panel-nav {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  padding: 12px; flex: 0 0 auto; background: #f8fafc; border-bottom: 1px solid #d9dde2;
}
.id-panel-nav button {
  padding: 9px 5px; min-height: 38px; border: 1px solid #d1d5db;
  border-radius: 6px; background: #fff; color: #475569; cursor: pointer;
  font: 600 11px/1.4 Inter, sans-serif;
}
.id-panel-nav button[aria-expanded="true"] { background: #fff7ed; color: #c2410c; border-color: #fdba74; }
.id-panel-nav button:focus-visible { outline: 2px solid #ea580c; outline-offset: 2px; }
.id-inspector-heading { padding: 12px 16px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #fed7aa; }
.floating-tools-sidebar input[type="file"] { height: auto; padding: 8px; font-size: 11px; }
.floating-tools-sidebar input[type="file"]::file-selector-button {
  border: 0; border-radius: 4px; padding: 6px 8px; margin-right: 6px; background: #fff7ed; color: #c2410c;
}
.floating-tools-sidebar .form-label { justify-content: flex-start; gap: 8px; line-height: 1.5; }
.floating-tools-sidebar .form-control, .floating-tools-sidebar .form-select { min-height: 36px; }
.sidebar-card-title .card-badge { font-size: 10px; }
[data-theme="dark"] .id-panel-nav { background: #0f172a; border-color: #334155; }
[data-theme="dark"] .id-panel-nav button { background: #1e293b; color: #cbd5e1; border-color: #334155; }
[data-theme="dark"] .id-panel-nav button[aria-expanded="true"] { background: #243b55; color: #fdba74; }
[data-theme="dark"] .id-inspector-heading { color: #fed7aa; border-color: #334155; }
body { background: #f3f4f5; background-image: none; }
.studio-workspace-grid {
  width: 100%; max-width: none; box-sizing: border-box;
  grid-template-columns: 375px minmax(0, 1fr);
  gap: 12px; padding: 12px 16px 20px;
}
.floating-tools-sidebar {
  background: #fff; border: 1px solid #d9dde2; border-radius: 4px;
  gap: 0; padding: 0; min-width: 0; scrollbar-color: #b7bdc5 #f5f5f5;
}
.floating-tools-sidebar > .sidebar-card-box {
  flex: 0 0 auto; min-width: 0; padding: 16px;
  border: 0 !important; border-bottom: 1px solid #e2e5e9 !important;
  border-radius: 0; box-shadow: none; background: #fff !important;
}
.sidebar-card-title {
  gap: 8px; flex-wrap: wrap; line-height: 1.5; font-weight: 600;
  font-size: 13px; color: #292f38; border-color: #e7e9ed; padding-bottom: 10px;
}
.stage-main-wrapper {
  padding: 0; gap: 0; border: 1px solid #d9dde2;
  border-radius: 4px; box-shadow: none; overflow: hidden;
}
.stage-top-bar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: #fafafa; border: 0; border-bottom: 1px solid #d9dde2;
  border-radius: 0; padding: 10px 12px; flex: 0 0 auto;
}
.id-add-media-actions { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 8px; }
.id-add-media-actions .id-preset-btn { padding: 8px 12px; color: #c2410c; border-color: #fdba74; }
.stage-step-pills {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; min-width: 0;
  background: transparent; border: 0; border-radius: 0; padding: 0; gap: 0;
}
.id-mode-pill {
  white-space: normal; min-width: 0; line-height: 1.4;
  justify-content: center; border-radius: 0; border-bottom: 2px solid transparent;
  color: #626973; font-weight: 500; font-size: 12px; padding: 10px 6px;
}
.id-mode-pill.active {
  background: #edf2f8; color: #234e7b; border-bottom-color: #376da4; box-shadow: none;
}
.stage-viewport-surface {
  background: #e2e5e9; border-radius: 0; box-shadow: none; padding: 16px;
}
.id-stage-container { flex-shrink: 0; box-shadow: 0 2px 10px #00000018; }
.stage-main-wrapper > div:last-child:not(.stage-viewport-surface) {
  flex: 0 0 auto; margin: 0; padding: 12px !important;
}
.studio-workspace-grid .btn, .id-preset-btn, .id-layer-pill {
  border-radius: 6px !important; box-shadow: none !important;
  transform: none !important; font-weight: 600 !important; line-height: 1.45;
}
.studio-workspace-grid .btn-secondary, .id-preset-btn {
  background: #fff; border: 1px solid #d1d5db; color: #374151;
}
.studio-workspace-grid .btn-secondary:hover, .id-preset-btn:hover {
  background: #f3f4f6; border-color: #9ca3af; color: #111827;
}
.studio-workspace-grid .btn-primary { background: #ea580c; border-color: #ea580c; color: #fff; }
.id-preset-btn.active { background: #fff7ed; border-color: #f97316; color: #c2410c; }
.studio-workspace-grid .form-control, .studio-workspace-grid .form-select {
  min-width: 0; max-width: 100%; border-radius: 6px; border: 1px solid #cbd5e1;
  box-shadow: none; font-weight: 500; font-size: .76rem;
}
.studio-workspace-grid .form-control:focus, .studio-workspace-grid .form-select:focus {
  border-color: #f97316; box-shadow: 0 0 0 2px #3b82f633;
}
.card-mini-slider { border-radius: 6px; background: #f7f8f9; }
.stage-zoom-dock { grid-column: 1 / -1; grid-row: 3; justify-self: end; border-radius: 4px; max-width: 100%; flex-wrap: wrap; }
.stage-top-bar > .id-res-badge { grid-column: 1 / -1; grid-row: 2; }
.id-res-badge { background: transparent; border: 0; color: #59636f; font-weight: 500; }
.id-active-layer-badge {
  background: #fff; color: #234e7b; border: 1px solid #cbd5e1;
  border-radius: 4px; box-shadow: 0 1px 5px #00000018;
}
.id-quick-tools .id-quick-bar {
  position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%; max-width: none; box-sizing: border-box; border: 0;
  padding: 0; background: transparent; box-shadow: none; backdrop-filter: none;
  overflow: visible; gap: 6px;
}
.id-quick-tools .id-quick-bar button {
  padding: 7px 8px; border-radius: 6px; border: 1px solid #d1d5db;
  background: #fff; color: #374151 !important; font-weight: 600;
}
.id-quick-tools .id-quick-bar button:hover { background: #fff7ed; border-color: #f97316; }
.floating-tools-sidebar .btn { white-space: normal; }
.floating-tools-sidebar { scrollbar-width: thin; }
@media (max-width: 1250px) {
  .studio-workspace-grid { grid-template-columns: 350px minmax(0, 1fr); }
}
@media (min-width: 761px) {
  .studio-workspace-grid {
    height: calc(100dvh - 82px); min-height: 0; overflow: hidden;
    align-items: stretch; padding-bottom: 12px;
  }
  .floating-tools-sidebar { position: static; height: 100%; max-height: 100%; min-height: 0; overflow-y: auto; }
  .stage-main-wrapper { position: static; height: 100%; min-height: 0; }
  .stage-viewport-surface { height: auto; min-height: 0; flex: 1 1 0; }
}
@media (max-width: 760px) {
  .studio-workspace-grid { grid-template-columns: minmax(0, 1fr); padding: 8px; gap: 10px; }
  .stage-main-wrapper { grid-row: 1; position: static; }
  .floating-tools-sidebar { position: static; max-height: none; }
  .floating-tools-sidebar > .sidebar-card-box { padding: 14px; }
  .stage-viewport-surface { height: 60vh; min-height: 360px; padding: 14px; }
  .stage-top-bar { gap: 8px; }
  .id-quick-bar { overflow-x: auto; justify-content: flex-start; }
}
[data-theme="dark"] body { background: #0b1120; }
[data-theme="dark"] .floating-tools-sidebar,
[data-theme="dark"] .floating-tools-sidebar > .sidebar-card-box { background: #111827 !important; border-color: #334155 !important; }
[data-theme="dark"] .stage-viewport-surface { background: #1e293b; }
[data-theme="dark"] .id-mode-pill.active { background: #243b55; color: #fdba74; }
[data-theme="dark"] .id-active-layer-badge { background: #111827; color: #fdba74; border-color: #334155; }
[data-theme="dark"] .id-res-badge { color: #cbd5e1; }
[data-theme="dark"] .id-quick-tools .id-quick-bar button { background: #1e293b; border-color: #334155; color: #cbd5e1 !important; }