.design-list-workspace { display: grid; gap: 14px; min-width: 0; }
.design-brief { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; border: 1px solid var(--line,#dbe3ed); border-radius: 12px; background: var(--surface,#fff); }
.design-brief label { display:grid; gap:6px; font-size:12px; color:var(--muted,#64748b); }
.design-brief label:last-child { grid-column:1/-1; }
.design-brief input,.design-brief textarea { width:100%; box-sizing:border-box; }
.design-list-tabs,.design-list-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.design-list-toolbar { padding:12px; border:1px solid var(--line,#dbe3ed); border-radius:12px; background:var(--surface,#fff); }
.design-list-toolbar label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.design-list-toolbar input[type=color] { width:28px; height:28px; padding:2px; }
.design-list-toolbar select { max-width:95px; }
.design-list-caption { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.design-list-caption input { font-size:16px; font-weight:600; max-width:420px; }
.design-list-caption small { color:var(--muted,#64748b); }
.design-list-scroll { overflow:auto; max-width:100%; border:1px solid var(--design-border,#ccd7e4); border-radius:8px; }
.design-list-table { table-layout:fixed; width:var(--design-table-width,1164px); min-width:100%; border-collapse:collapse; color:var(--design-color,#243032); font-size:var(--design-font,12px); }
.design-list-table th,.design-list-table td { position:relative; padding:0; border:1px solid var(--design-border,#ccd7e4); min-width:0; }
.design-list-table th { padding:12px 10px; background:#eef3f9; text-align:center; cursor:grab; }
.design-list-table textarea,.design-list-table input:not([type=checkbox]) { display:block; width:100%; min-height:42px; height:100%; resize:none; box-sizing:border-box; border:0; border-radius:0; padding:9px; background:transparent; color:inherit; font-size:inherit; font-family:inherit; line-height:1.5; box-shadow:none; }
.design-list-table textarea:focus,.design-list-table input:not([type=checkbox]):focus { outline:0; box-shadow:none; }
.design-list-table td:focus-within { box-shadow:inset 0 0 0 2px #79aef5; }
.design-list-table .design-row-head { width:44px; text-align:center; background:#f5f7fa; padding:4px; }
.design-row-head input[type=checkbox] { width:14px; height:14px; }
.design-row-drag { display:block; cursor:grab; color:#8a97a8; user-select:none; }
.design-section { background:#e8eff8; font-weight:600; }
.design-cell-selected { background:#e8f2ff; box-shadow:inset 0 0 0 2px #79aef5; }
/* Keep resize hit areas inside cells so they cannot create extra scrollbars. */
.design-col-resize { position:absolute; right:0; top:0; width:7px; height:100%; cursor:col-resize; z-index:2; }
.design-row-resize { position:absolute; left:0; bottom:0; width:100%; height:7px; cursor:row-resize; z-index:2; }
.design-reference-link { display:block; padding:0 9px 5px; font-size:11px; }
.design-list-dialog { width:min(680px,calc(100vw - 32px)); max-height:85vh; overflow:auto; border:1px solid #dbe3ed; border-radius:16px; padding:24px; box-shadow:0 24px 80px #152b4d33; }
.design-list-dialog::backdrop { background:#172b4d66; }
.design-list-dialog p { color:#64748b; line-height:1.6; }
.design-fields-list { display:grid; gap:8px; margin:16px 0; }
.design-fields-list label { display:grid; grid-template-columns:20px 1fr auto; gap:10px; align-items:center; }
.design-dialog-actions,.design-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
.design-list-preview { width:min(1280px,calc(100vw - 32px)); }
.design-list-preview dl:not(.personnel-project-info) { display:grid; grid-template-columns:80px 1fr; gap:8px; white-space:pre-wrap; }
.design-list-preview dt { color:#64748b; }.design-list-preview dd { margin:0; }
@media(max-width:700px) { .design-brief { grid-template-columns:1fr; }.design-list-caption{align-items:stretch;flex-direction:column}.design-list-toolbar{gap:6px}.design-list-toolbar button{font-size:12px;padding:7px 9px}.design-list-dialog{padding:16px}.design-list-table{min-width:900px} }
/* Override quote toolbar ordering and white header text inside this worksheet. */
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-list-toolbar { order:0; position:sticky; top:0; z-index:18; align-self:start; display:flex; visibility:visible; flex-wrap:wrap; overflow:visible; color:#243032; background:#fff; box-shadow:none; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-list-toolbar button { min-height:30px; padding:4px 10px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-list-table thead th,
.design-list-preview .design-list-table thead th { color:#243032; background:#eef3f9; box-shadow:none; font-size:var(--design-font,12px); }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-list-table th .design-col-resize { pointer-events:auto; }
.design-main-visual { min-width:0; }.design-main-visual h3 { margin:0 0 10px;font-size:18px; }
.design-brief-table { width:100%;border-collapse:collapse;table-layout:fixed;background:#fff; }
.design-brief-table th,.design-brief-table td { border:1px solid #b9c7d8;padding:12px;vertical-align:middle; }
.design-brief-table th { width:120px;text-align:center;font-weight:600;color:#243032; }
.design-brief-table .design-brief-band th { text-align:left;background:#eaf0f8;padding:10px 14px; }
.design-brief-table input,.design-brief-table textarea { width:100%;box-sizing:border-box;border:0;box-shadow:none;background:transparent;line-height:1.6;padding:8px; }
.design-brief-table textarea { min-height:76px;resize:vertical; }
.design-reference-caption { display:block;font-size:12px;color:#64748b;margin-top:12px; }
.design-image-slot { width:100%;box-sizing:border-box;min-width:0;padding:6px; }
.design-image-frame { width:100%;height:140px;box-sizing:border-box;border:1px dashed #b4c3d5;border-radius:6px;background:#f5f7fa;display:flex;align-items:center;justify-content:center;overflow:hidden; }
.design-image-slot-main { max-width:720px;margin:0 auto; }.design-image-slot-main .design-image-frame { height:250px; }
.design-image-view { width:100%;height:100%;border:0;padding:0;background:transparent;display:block;cursor:zoom-in; }
.design-image-view img { display:block;width:100%;height:100%;max-width:100%;object-fit:contain; }
.design-image-empty { text-align:center;color:#6e8098;font-size:12px; }.design-image-empty small { display:block;font-size:11px;color:#8c99ac;margin-top:6px; }
.design-image-actions { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding-top:6px;font-size:11px; }
.design-image-pick { display:inline-flex;position:relative;cursor:pointer;padding:4px 9px;border:1px solid #d5deea;border-radius:5px;background:#fff;color:#245b9b; }
.design-image-pick input[type=file] { position:absolute;width:1px!important;height:1px!important;min-height:0!important;opacity:0;overflow:hidden;padding:0!important; }
.design-image-actions button { min-height:24px;padding:3px 7px;font-size:11px; }.design-image-actions small { width:100%;color:#8793a5;font-size:10px; }
.design-image-zoom { width:min(1200px,calc(100vw - 40px));padding:12px; }.design-image-zoom img { width:100%;max-height:78vh;object-fit:contain;display:block; }.design-image-zoom-close { display:block;margin:0 0 8px auto; }
.design-list-preview .design-main-visual { margin-bottom:24px; }
@media(max-width:700px) { .design-brief-table th,.design-brief-table td{padding:8px}.design-image-slot-main .design-image-frame{height:200px}.design-brief-table th{width:80px} }

/* WPS-style grouped ribbon approved in the toolbar layout proposal. */
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { gap:0; padding:12px 8px 8px; border:1px solid #c6ddf7; border-radius:10px; background:linear-gradient(110deg,#fff,#f5faff); align-items:stretch; }
.design-ribbon-group { display:flex; flex-direction:column; justify-content:space-between; gap:8px; padding:0 10px; border-right:1px solid #dae5f2; min-width:0; }
.design-ribbon-controls { display:flex; gap:6px; align-items:center; min-height:74px; }
.design-ribbon-label { text-align:center; color:#7e90ab; font-size:11px; line-height:16px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:5px 7px; min-height:36px; border:1px solid transparent; border-radius:6px; background:transparent; color:#183253; box-shadow:none; white-space:nowrap; font-size:11px; line-height:16px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button .ph { font-size:24px; line-height:26px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button:hover:not(:disabled) { background:#e7f1ff; border-color:#c9dfff; color:#0764ef; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button:disabled { opacity:.35; cursor:default; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon :is(button,select,input):focus-visible { outline:2px solid #1677ff; outline-offset:2px; }
.design-ribbon-edit .design-ribbon-controls { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 6px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-edit button { gap:0; padding:2px 4px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-edit button .ph { font-size:20px; line-height:22px; }
.design-ribbon-font .design-ribbon-controls { display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; }
.design-ribbon-fonts { display:flex; gap:6px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon select { height:34px; padding:4px 8px; border:1px solid #d6e1ef; border-radius:6px; background:#fff; font-size:12px; width:126px; max-width:none; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon select[data-design-format=fontSize] { width:68px; min-width:68px; flex-shrink:0; padding-left:10px; padding-right:24px; }
.design-ribbon-colors { display:flex; gap:12px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-colors label { position:relative; gap:5px; height:32px; font-size:11px; cursor:pointer; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-colors input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.design-ribbon-letter { font:600 24px/24px Arial,sans-serif; border-bottom:3px solid; padding:0 3px; }
.design-ribbon-swatch { width:24px; height:24px; border:3px solid white; border-radius:4px; box-shadow:0 0 0 1px #cddbf0; }
.design-ribbon-cells .design-ribbon-controls { display:grid; grid-template-columns:repeat(2,auto); gap:2px 5px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-cells button { flex-direction:row; gap:5px; padding:3px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-cells [data-design-action=fields] { grid-column:1/-1; justify-content:flex-start; }
.design-ribbon-select { display:flex!important; flex-direction:column; justify-content:center; gap:10px!important; font-size:11px; min-width:35px; cursor:pointer; }
.design-ribbon-select input { width:18px; height:18px; accent-color:#1677ff; }
.design-ribbon-actions { margin-left:auto; border-right:0; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions [data-design-action=save] { background:#0767f9; color:#fff; flex-direction:row; padding:12px 10px; margin-left:4px; box-shadow:0 4px 12px #0867f922; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions [data-design-action=save]:hover { background:#0059dc; color:#fff; }
@media(max-width:1300px) { :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { row-gap:12px; }.design-ribbon-group{padding:0 8px}.design-ribbon-actions{margin-left:0} }
@media(max-width:700px) { :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon{padding:10px 4px;gap:12px 0}.design-ribbon-group{flex:1 1 auto;padding:0 8px}.design-ribbon-actions{flex-basis:100%;border-top:1px solid #dae5f2;padding-top:10px}.design-ribbon-actions .design-ribbon-controls{min-height:44px;justify-content:flex-end}.design-ribbon-actions .design-ribbon-label{display:none}:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button{min-height:40px} }

@media(min-width:701px) {
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { flex-wrap:nowrap; }
 .design-ribbon-group { padding:0 7px; }
 .design-ribbon-controls { gap:3px; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button { padding:5px 4px; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon select { width:105px; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon select[data-design-format=fontSize] { width:68px; }
 .design-ribbon-colors { gap:6px; }
 .design-ribbon-actions { margin-left:auto; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions [data-design-action=save] { padding:10px 8px; }
}
@media(min-width:701px) and (max-width:1100px) {
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { flex-wrap:wrap; }
 .design-ribbon-actions { margin-left:auto; }
}
@media(max-width:700px) {
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
 .design-ribbon-edit { order:0; }.design-ribbon-selection { order:1; border-right:0; }
 .design-ribbon-font { order:2; grid-column:1/-1; border-right:0; border-block:1px solid #dae5f2; padding-block:8px; }
 .design-ribbon-font .design-ribbon-controls { flex-direction:row; flex-wrap:wrap; gap:8px; min-height:0; }
 .design-ribbon-align { order:3; }.design-ribbon-cells { order:4; border-right:0; }
 .design-ribbon-actions { order:5; grid-column:1/-1; }
 .design-ribbon-controls { min-height:64px; justify-content:center; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button { padding-inline:3px; font-size:10px; }
}
.design-rich-editor { min-height:42px;width:100%;box-sizing:border-box;padding:9px;white-space:pre-wrap;overflow-wrap:anywhere;outline:0;line-height:1.5;text-align:left;cursor:text; }
.design-rich-editor:focus { box-shadow:inset 0 0 0 2px #5e9ef2; }
.design-list-table .design-rich-editor:focus { box-shadow:none; }
.design-brief-table .design-rich-editor { min-height:46px; }.design-brief-table [data-design-brief=description],.design-brief-table [data-design-brief=reference] { min-height:76px; }
.design-drag-selecting,.design-drag-selecting .design-rich-editor { user-select:none!important; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { display:flex;flex-wrap:wrap;gap:8px;padding:10px;align-items:center; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-group { display:contents;border:0;padding:0;margin:0; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-controls { display:flex;min-height:0;gap:4px;align-items:center; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-font .design-ribbon-controls { flex-direction:row;flex-wrap:wrap; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button { min-height:32px;flex-direction:row;gap:5px;padding:5px 7px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon .design-ribbon-label { display:none; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-fonts,:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-colors { display:flex;gap:4px;align-items:center; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) [data-design-toggle=bold] { font-weight:700; }:is(#projectDesignListBuilder, #projectPersonnelBuilder) [data-design-toggle=italic] { font-style:italic; }:is(#projectDesignListBuilder, #projectPersonnelBuilder) [data-design-toggle=underline] { text-decoration:underline; }
.design-color-palette { position:fixed;z-index:10000;width:244px;padding:10px;background:white;border:1px solid #cbd5e1;border-radius:9px;box-shadow:0 8px 30px #173b6630;display:grid;gap:8px;color:#25354a;font-size:12px; }
.design-color-palette strong { font-size:11px;font-weight:500;color:#5f6f85; }.design-color-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}.design-color-grid button{width:19px;height:19px;min-height:0;padding:0;border:1px solid #bdc8d8;border-radius:1px}.design-color-grid button:hover{outline:2px solid #4988d6}.design-color-auto{padding:5px;text-align:left;background:transparent;border:0}.design-color-other{display:flex;align-items:center;justify-content:space-between}.design-color-other input{width:36px;height:25px;padding:0;border:0}

:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon [data-design-toggle],
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon [data-design-palette] { font-size:16px;min-width:30px;min-height:34px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon [data-design-toggle][aria-pressed=true] { color:#0868ec;background:#e4efff;border-color:#bdd8ff; }

/* Editing tools and document actions occupy separate sides of the toolbar. */
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { flex-wrap:nowrap;gap:16px;background:linear-gradient(135deg,#317fff,#42baff);color:#fff;border-color:rgba(255,255,255,.3); }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-tools { display:flex;flex:1 1 0;min-width:0;flex-wrap:wrap;align-items:center;gap:8px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon .design-ribbon-actions { display:flex;flex:0 0 auto;margin-left:auto;padding:0;border:0;align-self:center; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions .design-ribbon-controls { justify-content:flex-end;flex-wrap:nowrap; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-select { color:#fff; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button { background:#fff;color:#16355b; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon button:hover { background:#eaf3ff; }
.design-add-rows { max-width:360px; }
.design-add-rows label { display:grid;gap:8px; }
.design-add-rows input { width:100%; }
.design-add-rows-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:20px; }
@media(max-width:700px) {
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon { flex-wrap:wrap; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-tools { flex-basis:100%; }
 :is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon .design-ribbon-actions { flex-basis:auto; }
}

:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions [data-design-action=save] { margin:0;padding:10px 8px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions .design-ribbon-controls { flex:none;grid-auto-rows:48px; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon .design-ribbon-actions { align-self:flex-start; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions .design-ribbon-controls { width:288px; }

/* Preset tables use centered labels and content, matching the source workbook. */
.design-list-table th,.design-list-table .design-section input,.design-brief-table th {text-align:center;}
.design-list-table td {vertical-align:middle;}

/* Sticky toolbar must meet the scrollport edge: top padding otherwise exposes
   scrolling table rows in the strip above the toolbar. */
body.admin-screen #projectDetailPane .project-detail-content:has(> [data-project-panel="design"]:not(.hidden)) {
  padding-top: 0;
}

:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions .design-ribbon-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-sheet-switch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  height: 48px;
}
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-sheet-switch button {
  width: 100%;
  height: 48px;
  margin: 0;
  font-size: 11px;
  border: 1px solid transparent;
}
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-sheet-switch button[aria-pressed="true"] {
  background: #e7f1ff;
  color: #0767f9;
  border-color: #0767f9;
  box-shadow: inset 0 0 0 1px #0767f9;
}

/* Preview and quotation refresh occupy the second action row. */
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-sheet-switch { grid-column: 1 / 3; }
:is(#projectDesignListBuilder, #projectPersonnelBuilder) .design-ribbon-actions [data-design-action=refresh] {
  grid-column: 2; grid-row: 2; width: 100%; height: 48px; margin: 0; padding: 6px;
}

/* Use the available project canvas instead of the form's 1100px limit. */
.project-detail-section[data-project-panel="design"] { width:100%; max-width:none; }
.design-list-table .design-image-slot { padding:2px; }
.design-list-table .design-image-frame { height:240px; }
.design-list-table .design-image-view { padding:0; min-height:0; }
.design-list-table .design-image-view img { width:100%; height:100%; object-fit:contain; }
.design-brief-images { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:12px; }
.design-brief-images .design-image-slot { max-width:none; margin:0; }
.design-brief-images .design-image-frame { height:300px; }
.design-brief-images .design-image-add { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:120px;border:1px dashed #b4c3d5;border-radius:6px;background:#f5f7fa; }
.design-image-add small { font-size:12px;color:#64748b; }
@media(max-width:700px) { .design-brief-images .design-image-frame { height:240px; } }