/* Duomi Matrix · warm light-neumorphic theme */
:root {
  --nm-bg: #ece9e3;
  --nm-surface: #f4f1eb;
  --nm-surface-hi: #faf8f4;
  --nm-ink: #34312d;
  --nm-muted: #817b72;
  --nm-accent: #d48643;
  --nm-accent-dark: #a95e26;
  --nm-danger: #b9655d;
  --nm-shadow-dark: rgba(153, 143, 130, .32);
  --nm-shadow-light: rgba(255, 255, 255, .9);
  --nm-raised: 8px 8px 18px var(--nm-shadow-dark), -8px -8px 18px var(--nm-shadow-light);
  --nm-soft: 4px 4px 10px rgba(153, 143, 130, .25), -4px -4px 10px rgba(255, 255, 255, .82);
  --nm-inset: inset 3px 3px 7px rgba(153, 143, 130, .25), inset -3px -3px 7px rgba(255, 255, 255, .82);
}

html { background: var(--nm-bg); }

body {
  color: var(--nm-ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.9), transparent 27%),
    linear-gradient(145deg, #f2efe9, #e5e1d9);
  padding: 18px;
}

body, button, input, select, textarea { font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; }

.matrix_container {
  height: calc(100vh - 36px);
  background: var(--nm-bg);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  box-shadow: 18px 18px 42px rgba(137,128,116,.28), -14px -14px 34px rgba(255,255,255,.82);
}

.matrix_header,
.matrix_header.engine_gpt,
.matrix_header.engine_nano {
  min-height: 78px;
  padding: 14px 22px;
  color: var(--nm-ink);
  background: rgba(244,241,235,.92);
  border-bottom: 1px solid rgba(169,158,143,.16);
  box-shadow: 0 8px 22px rgba(143,133,120,.14);
  backdrop-filter: blur(14px);
}

.matrix_header .logo { min-width: max-content; }
.matrix_header img {
  width: 40px; height: 40px; flex-basis: 40px;
  padding: 5px; margin-right: 11px; border-radius: 13px;
  background: var(--nm-surface); box-shadow: var(--nm-soft);
}
.matrix_header h1 { font-size: 19px; letter-spacing: -.2px; }
.matrix_header h1 sup, .matrix_header.engine_nano h1 sup { color: var(--nm-accent); }
.page_switch {
  color: var(--nm-accent-dark); background: var(--nm-surface); border: 0;
  box-shadow: var(--nm-soft); font-size: 12px;
}
.page_switch:hover { color: var(--nm-accent-dark); background: var(--nm-surface-hi); border: 0; }

.header_center { gap: 10px; flex: 1; justify-content: flex-end; }
.header_actions { gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.engine_selector, .concurrency_wrap, .name_mode_wrap, .save_format_wrap { gap: 5px; }
.engine_selector label, .concurrency_label, .name_mode_label, .save_format_label { color: var(--nm-muted); }

.engine_select, .header_select, .save_path_input, .save_path_toggle, .save_path_pick,
.matrix_box select, .matrix_box input[type="number"], .matrix_box input[type="text"],
.batch_input, .material_form input, .material_form textarea,
.chat_input_area textarea, #chatResult {
  color: var(--nm-ink); background: var(--nm-surface); border: 1px solid rgba(173,163,149,.16);
  border-radius: 10px; box-shadow: var(--nm-inset); outline: none;
}
.matrix_header.engine_gpt .engine_select,
.matrix_header.engine_nano .engine_select { border-color: transparent; box-shadow: var(--nm-inset); }
.save_path_input::placeholder { color: #aaa39a; }
.save_path_toggle { margin-left: 5px; border-left: 1px solid rgba(173,163,149,.16); }
.save_path_pick { margin-left: 5px; border-left: 1px solid rgba(173,163,149,.16); }
.save_path_item.active { background: #ebe5dc; }
.save_path_item.active .save_path_text { font-weight: 600; }
.engine_select:focus, .header_select:focus, .save_path_input:focus,
.matrix_box textarea:focus, .matrix_box select:focus, .matrix_box input:focus,
.chat_input_area textarea:focus, #chatResult:focus {
  border-color: rgba(212,134,67,.55); box-shadow: var(--nm-inset), 0 0 0 3px rgba(212,134,67,.10);
}

.v2_btn, .tab_add_btn, .tab_clear_btn, .clear_all_btn, .ref_tool_btn,
.mode_tab, .batch_close, .modal_close {
  border: 0 !important; border-radius: 11px; color: #625d56; background: var(--nm-surface);
  box-shadow: var(--nm-soft); transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.v2_btn:hover:not(:disabled), .tab_add_btn:hover, .tab_clear_btn:hover,
.clear_all_btn:hover, .ref_tool_btn:hover, .mode_tab:hover {
  color: var(--nm-accent-dark); background: var(--nm-surface-hi); transform: translateY(-1px);
  box-shadow: 6px 6px 13px rgba(153,143,130,.28), -6px -6px 13px rgba(255,255,255,.9);
}
.v2_btn:active:not(:disabled), .tab_add_btn:active, .tab_clear_btn:active,
.clear_all_btn:active, .ref_tool_btn:active, .mode_tab:active {
  transform: translateY(0); box-shadow: var(--nm-inset);
}
.v2_btn.action_btn, .tree_btn, .query_btn, .chat_btn, .log_btn {
  color: #fff !important; background: linear-gradient(145deg, #df995b, #c77334) !important;
  box-shadow: 5px 5px 12px rgba(159,105,58,.28), -4px -4px 10px rgba(255,255,255,.75) !important;
}
.v2_btn.action_danger { color: var(--nm-danger); }

.matrix_left { background: var(--nm-bg); border-right: 1px solid rgba(167,156,142,.18); padding: 20px; gap: 18px; }
.matrix_right { background: #e9e6df; }
.matrix_tabs { border-bottom: 0; padding: 4px; border-radius: 14px; box-shadow: var(--nm-inset); }
.matrix_tabs_ops { padding: 0 2px 0 0; }
.matrix_tab {
  margin: 0; padding: 8px 13px; border: 0; border-radius: 10px; background: transparent; color: var(--nm-muted);
}
.matrix_tab:hover { background: rgba(255,255,255,.38); color: var(--nm-accent-dark); }
.matrix_tab.active { color: var(--nm-accent-dark); background: var(--nm-surface); border: 0; box-shadow: var(--nm-soft); }
.tab_badge { color: #fff; background: var(--nm-accent); }

.panel_head, .matrix_box, .ai_chat_box, .text_item {
  background: var(--nm-surface); border: 1px solid rgba(255,255,255,.68); border-radius: 17px; box-shadow: var(--nm-soft);
}
.panel_head { padding: 11px 14px; }
.panel_title, .box1_sub_label, .text_item_index { color: var(--nm-accent-dark); }
.panel_head_right .size_selector { background: var(--nm-bg); border: 0; border-radius: 12px; box-shadow: var(--nm-inset); }
.panel_head_right .size_child label { color: var(--nm-muted); }

.matrix_box { padding: 15px; gap: 11px; }
.box_tit h2 {
  min-width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px; color: #fff;
  background: linear-gradient(145deg, #e19a5c, #c57435); border-radius: 10px;
  box-shadow: 3px 3px 7px rgba(159,105,58,.22), -3px -3px 7px rgba(255,255,255,.8);
}
.box_tit span { color: #5d5851; font-weight: 650; }
.matrix_box textarea, .text_item_textarea {
  padding: 12px 13px; color: var(--nm-ink); background: var(--nm-bg); border: 1px solid rgba(171,161,147,.14);
  border-radius: 12px; box-shadow: var(--nm-inset); line-height: 1.65;
}

.image_zone, .ref_slot {
  background: var(--nm-bg); border: 1px dashed rgba(177,128,84,.52); border-radius: 14px; box-shadow: var(--nm-inset);
}
.image_zone:hover, .image_zone:focus, .image_zone.dragover, .ref_slot:hover {
  background: #f1ebe2; border-color: var(--nm-accent); box-shadow: var(--nm-inset), 0 0 0 3px rgba(212,134,67,.08);
}
.image_slot { border: 3px solid var(--nm-surface-hi); border-radius: 11px; box-shadow: var(--nm-soft); }
.image_zone_hint { color: #9b948b; }

.right_tit {
  min-height: 61px; padding: 12px 16px; gap: 9px; justify-content: flex-start;
  background: rgba(244,241,235,.78); border-bottom: 1px solid rgba(169,158,143,.16);
  box-shadow: 0 6px 16px rgba(143,133,120,.11); backdrop-filter: blur(10px);
}
.right_tit .matrix_count { margin-right: auto; color: var(--nm-accent-dark); font-weight: 700; }
.matrix_grid, .text_list { background: #e9e6df; padding: 18px; gap: 16px; }
.grid_item { border: 0; border-radius: 16px; background: var(--nm-surface); box-shadow: var(--nm-soft); overflow: hidden; }
.grid_placeholder { color: #999187; }

.toggle_arrow {
  width: 28px; height: 58px; color: var(--nm-accent-dark); background: var(--nm-surface);
  border: 1px solid rgba(255,255,255,.7); border-radius: 12px; box-shadow: var(--nm-soft);
}
.toggle_arrow:hover { width: 31px; color: #fff; background: var(--nm-accent); }

.modal_overlay, .batch_panel { background: rgba(83,76,68,.34); backdrop-filter: blur(7px); }
.modal_content, .batch_dialog {
  background: var(--nm-surface); border: 1px solid rgba(255,255,255,.74); border-radius: 20px;
  box-shadow: 18px 18px 44px rgba(67,60,52,.28), -8px -8px 28px rgba(255,255,255,.38);
}
.save_path_dropdown { color: var(--nm-ink); background: var(--nm-surface); border: 0; border-radius: 12px; box-shadow: var(--nm-raised); }
.save_path_item { color: var(--nm-ink); border-radius: 8px; }
.save_path_item:hover { background: #ebe5dc; }
.batch_head { border-bottom: 1px solid rgba(169,158,143,.18); }
.batch_tip code { color: var(--nm-accent-dark); background: #ece3d8; }
.batch_list li, .log_list_wrap, .log_detail { border: 0; background: var(--nm-bg); box-shadow: var(--nm-inset); }

* { scrollbar-width: thin; scrollbar-color: #c0b6aa transparent; }
::selection { color: #fff; background: var(--nm-accent); }

@media (max-width: 1280px) {
  body { padding: 10px; }
  .matrix_container { height: calc(100vh - 20px); border-radius: 18px; }
  .matrix_header { align-items: flex-start; }
  .header_center { flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .matrix_header { flex-direction: column; gap: 12px; }
  .header_center, .header_actions { width: 100%; justify-content: flex-start; }
  .matrix_main { overflow: auto; }
  .matrix_left { min-width: 50%; padding: 13px; }
  .right_tit { flex-wrap: wrap; }
  .box1_split, .matrix_row { grid-template-columns: 1fr; flex-direction: column; }
}

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

/* Full-viewport workspace: both matrix pages share this foundation. */
body { padding: 0; }
.matrix_container {
  height: 100vh;
  border-radius: 0;
}