/* App-native customization selectors.
 * Visual language preserved from the standalone selector mockups; app-owned
 * structure and event wiring live in js/customization/*.
 */
.design-hub{width:100%;min-height:100%;margin:0;padding:22px;background:var(--bg,#f0eee6);color:var(--text,#1f1e1d);font-style:normal;text-align:left;}
.design-hub-header{margin-bottom:16px;}
.design-hub-header h2{margin:0 0 7px;font-size:25px;line-height:1.15;color:var(--text,#1f1e1d);}
.design-hub-header p{margin:0;max-width:760px;font-size:13px;line-height:1.45;color:var(--text-muted,#6e6d69);}
.design-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.design-hub-card{min-width:0;padding:16px;text-align:left;background:#fff;border:1px solid rgba(0,0,0,0.12);border-radius:12px;cursor:pointer;font-family:var(--font);color:var(--text);transition:border-color 0.15s,transform 0.05s;}
.design-hub-card:hover{border-color:rgba(0,0,0,0.22);}
.design-hub-card:active{transform:scale(0.99);}
.design-hub-card span{display:block;margin-bottom:8px;font-size:11px;color:var(--text-faint);letter-spacing:0.02em;}
.design-hub-card strong{display:block;margin-bottom:6px;font-size:15px;font-weight:600;}
.design-hub-card p{margin:0;font-size:13px;line-height:1.45;color:var(--text-muted);}
.design-walkthrough{min-height:100%;padding:22px;background:var(--bg,#f0eee6);font-style:normal;text-align:left;}
.design-tool-header{max-width:720px;margin:0 auto 14px;}
.design-back{display:inline-flex;align-items:center;margin:0 0 14px;padding:7px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.12);background:#fff;color:var(--text-muted);font-family:var(--font);font-size:12px;font-weight:600;cursor:pointer;}
.design-back:hover{border-color:rgba(0,0,0,0.22);color:var(--text);}
.design-output-card,.design-output-preview{max-width:720px;margin:14px auto 0;padding:14px;background:#fff;border:1px solid rgba(0,0,0,0.12);border-radius:12px;color:var(--text);font-style:normal;text-align:left;}
.design-output-card span{display:block;margin-bottom:4px;font-size:11px;color:var(--text-faint);}
.design-output-card strong{display:block;margin-bottom:8px;font-size:14px;}
.design-output-card pre,.design-output-preview{white-space:pre-wrap;font-family:var(--mono,monospace);font-size:11px;line-height:1.45;color:var(--text-muted);}

.os-selector-shell{
  --brand:var(--os-accent,var(--blue,#d97757));
  --brand-hover:color-mix(in srgb,var(--brand) 88%,var(--os-card-text,#1f1e1d));
  --os-selector-page:var(--os-canvas,#f0eee6);
  --os-selector-surface:var(--os-component-content-bg,#faf9f5);
  --os-selector-bg:var(--os-canvas,#f0eee6);
  --os-selector-text:var(--os-card-text,#1f1e1d);
  --os-selector-text-muted:var(--os-card-muted-text,#7a7567);
  --os-selector-text-faint:var(--os-input-placeholder,#a39d8c);
  --os-selector-border:var(--os-component-border,#d9d3c4);
  --os-selector-border-strong:var(--os-input-border,#c1baa7);
  --os-selector-radius-md:8px;
  --os-selector-radius-lg:12px;
  --os-selector-font:var(--font,"Geist",system-ui,sans-serif);
  box-sizing:border-box;
  color:var(--os-selector-text);
  font-family:var(--os-selector-font);
  -webkit-font-smoothing:antialiased;
}
.os-selector-shell *{box-sizing:border-box;}
.os-selector-container{max-width:720px;margin:0 auto;}
.os-selector-wrap{background:var(--os-selector-bg);border-radius:var(--os-selector-radius-lg);padding:2rem 1.5rem;}
.os-selector-header{text-align:center;margin-bottom:1.75rem;}
.os-selector-eyebrow{font-size:13px;color:var(--os-selector-text-faint);margin:0 0 6px;letter-spacing:0.02em;}
.os-selector-title{font-size:18px;font-weight:500;margin:0 0 6px;color:var(--os-selector-text);}
.os-selector-subtitle{font-size:14px;color:var(--os-selector-text-muted);margin:0;}
.os-selector-grid{display:grid;gap:12px;margin-bottom:1rem;}
.os-selector-option-wrap{position:relative;}
.os-selector-radio{position:absolute;opacity:0;pointer-events:none;}
.os-selector-card{background:var(--os-selector-surface);border:0.5px solid var(--os-selector-border);border-radius:var(--os-selector-radius-lg);padding:1.25rem 1rem;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:border-color 0.15s;position:relative;margin:0;min-height:100%;}
.os-selector-card:hover{border-color:var(--os-selector-border-strong);}
.os-selector-card[data-selected="true"]{border:2px solid var(--brand);padding:calc(1.25rem - 1.5px) calc(1rem - 1.5px);}
.os-selector-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;display:none;align-items:center;justify-content:center;font-size:14px;font-weight:500;line-height:1;}
.os-selector-card[data-selected="true"] .os-selector-check{display:flex;}
.os-selector-badge{position:absolute;top:10px;right:10px;background:var(--brand);color:#fff;font-size:11px;font-weight:500;padding:3px 8px;border-radius:var(--os-selector-radius-md);line-height:1.2;}
.os-selector-card[data-selected="true"] .os-selector-badge{display:none;}
.os-selector-thumb{margin-bottom:14px;}
.os-selector-note-icon{margin-bottom:14px;}
.os-selector-label{font-size:15px;font-weight:500;margin:0 0 6px;color:var(--os-selector-text);}
.os-selector-desc{font-size:13px;color:var(--os-selector-text-muted);margin:0;line-height:1.5;}
.os-selector-reassurance{font-size:12px;color:var(--os-selector-text-faint);text-align:center;margin:0 0 1.5rem;font-style:italic;}
.os-selector-footer{display:flex;justify-content:flex-end;}
.os-selector-next{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:var(--os-selector-radius-md);font-size:14px;font-weight:500;font-family:inherit;transition:background 0.15s,color 0.15s,border-color 0.15s,transform 0.05s;}
.os-selector-next[data-active="false"]{
  background:var(--os-component-content-bg,var(--surface,#faf9f5));
  border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));
  color:var(--os-selector-text-faint);
  box-shadow:0 1px 0 rgba(255,255,255,0.55) inset;
  cursor:not-allowed;
}
.os-selector-next[data-active="true"]{
  background:var(--ink,var(--os-card-text,#1f1e1d));
  border:1px solid var(--ink,var(--os-card-text,#1f1e1d));
  color:var(--os-component-content-bg,var(--surface,#faf9f5));
  box-shadow:none;
  cursor:pointer;
}
.os-selector-next[data-active="true"]:hover{
  background:color-mix(in srgb,var(--ink,var(--os-card-text,#1f1e1d)) 86%,var(--os-component-content-bg,#faf9f5));
  border-color:color-mix(in srgb,var(--ink,var(--os-card-text,#1f1e1d)) 86%,var(--os-component-content-bg,#faf9f5));
}
.os-selector-next[data-active="true"]:active{transform:scale(0.98);}
.os-selector-arrow{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.design-walkthrough-simplified{padding:28px 36px 36px;}
.design-walkthrough-simplified .design-tool-header{max-width:1160px;margin:0 auto 20px;}
.design-walkthrough-simplified .design-tool-header h2{
  margin:0;
  font-family:var(--display,var(--serif));
  font-size:28px;
  line-height:1.15;
  font-weight:600;
  color:var(--text,#1f1e1d);
  letter-spacing:0;
}
.design-walkthrough-simplified .os-selector-container{max-width:1160px;}
.design-walkthrough-simplified .os-selector-wrap{
  padding:0;
  background:transparent;
  border-radius:0;
}
.design-walkthrough-simplified .os-selector-header{display:none;}
.design-walkthrough-simplified .os-selector-grid{
  gap:20px;
  margin-bottom:20px;
}
.design-walkthrough-simplified .os-selector-card{
  min-height:clamp(340px,calc(100vh - 290px),460px);
  padding:34px 28px;
  justify-content:center;
  background:var(--os-component-content-bg,var(--surface,#faf9f5));
  border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));
  border-radius:10px;
  box-shadow:var(--shadow-paper,0 1px 0 rgba(0,0,0,0.02),0 10px 22px -16px rgba(0,0,0,0.10));
}
.design-walkthrough-simplified .os-selector-card:hover{
  border-color:var(--os-selector-border-strong);
  box-shadow:var(--shadow-card-hover,var(--shadow-paper,0 12px 26px -16px rgba(0,0,0,0.16)));
}
.design-walkthrough-simplified .os-selector-card[data-selected="true"]{
  padding:33px 27px;
  border:2px solid var(--brand);
}
.design-walkthrough-simplified .os-selector-thumb,
.design-walkthrough-simplified .os-selector-note-icon{
  margin-bottom:26px;
  transform:scale(1.35);
  transform-origin:center;
}
.design-walkthrough-simplified .os-selector-label{
  margin-bottom:10px;
  font-size:19px;
  font-weight:600;
}
.design-walkthrough-simplified .os-selector-desc{
  max-width:260px;
  font-size:15px;
  line-height:1.55;
}
.design-walkthrough-simplified .os-selector-reassurance{display:none;}
.design-walkthrough-simplified .os-selector-footer{
  max-width:1160px;
  margin:0 auto;
}
.design-walkthrough-simplified .os-selector-next{
  min-width:132px;
  justify-content:center;
}
.dashboard-design-walkthrough .design-tool-header p{max-width:780px;}
.dashboard-design-shell{display:grid;grid-template-columns:220px minmax(0,1fr) 360px;gap:20px;align-items:start;}
.dashboard-design-steps{display:flex;flex-direction:column;gap:8px;position:sticky;top:16px;}
.dashboard-design-step{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));border-radius:8px;background:var(--os-component-content-bg,var(--surface,#faf9f5));color:var(--os-card-muted-text,var(--text-muted,#7a7567));font-family:var(--font,"Geist",system-ui,sans-serif);font-size:12px;font-weight:700;text-align:left;cursor:pointer;}
.dashboard-design-step span{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:var(--os-canvas,var(--bg,#f0eee6));color:var(--os-card-text,var(--text,#1f1e1d));font-size:11px;}
.dashboard-design-step.active{border-color:var(--os-accent,var(--blue,#d97757));color:var(--os-card-text,var(--text,#1f1e1d));}
.dashboard-design-step[data-complete="true"] span{background:var(--os-accent-soft,var(--blue-soft,#f4e5dc));color:var(--os-accent,var(--blue,#d97757));}
.dashboard-design-stage{min-width:0;padding:24px;border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));border-radius:10px;background:var(--os-component-content-bg,var(--surface,#faf9f5));box-shadow:var(--shadow-paper,0 10px 22px -16px rgba(0,0,0,0.10));}
.dashboard-design-stage-head{margin-bottom:18px;}
.dashboard-design-stage-head span{display:block;margin-bottom:6px;color:var(--os-card-muted-text,var(--text-muted,#7a7567));font-size:11px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;}
.dashboard-design-stage-head h3{margin:0 0 6px;color:var(--os-card-text,var(--text,#1f1e1d));font-family:var(--display,var(--serif,Georgia,serif));font-size:28px;font-weight:500;line-height:1.05;letter-spacing:0;}
.dashboard-design-stage-head p{margin:0;color:var(--os-card-muted-text,var(--text-muted,#7a7567));font-size:13px;line-height:1.45;}
.dashboard-design-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.dashboard-design-tile{min-width:0;min-height:220px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;padding:16px;border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));border-radius:10px;background:var(--os-canvas,var(--bg,#f0eee6));color:var(--os-card-text,var(--text,#1f1e1d));font-family:var(--font,"Geist",system-ui,sans-serif);text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .05s;}
.dashboard-design-tile:hover{border-color:var(--os-input-border,var(--hairline-mid,#c1baa7));box-shadow:var(--shadow-card-hover,var(--shadow-paper,0 12px 26px -16px rgba(0,0,0,0.16)));}
.dashboard-design-tile:active{transform:scale(0.99);}
.dashboard-design-tile[data-selected="true"]{border:2px solid var(--os-accent,var(--blue,#d97757));padding:15px;}
.dashboard-design-placeholder-thumb{width:100%;height:94px;margin-bottom:auto;border:1px dashed color-mix(in srgb,var(--os-card-muted-text,var(--text-muted,#7a7567)) 46%,transparent);border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--os-accent-soft,var(--blue-soft,#f4e5dc)) 70%,transparent),color-mix(in srgb,var(--os-component-content-bg,var(--surface,#faf9f5)) 90%,transparent));}
.dashboard-design-tile strong{font-size:15px;font-weight:800;line-height:1.2;}
.dashboard-design-tile > span:last-child{color:var(--os-card-muted-text,var(--text-muted,#7a7567));font-size:12.5px;line-height:1.4;}
.dashboard-design-actions{display:flex;justify-content:space-between;gap:12px;margin-top:18px;}
.dashboard-design-back,.dashboard-design-next{min-height:36px;padding:0 16px;border-radius:999px;font-family:var(--font,"Geist",system-ui,sans-serif);font-size:12px;font-weight:800;cursor:pointer;}
.dashboard-design-back{border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));background:var(--os-component-content-bg,var(--surface,#faf9f5));color:var(--os-card-muted-text,var(--text-muted,#7a7567));}
.dashboard-design-back:disabled{opacity:.45;cursor:not-allowed;}
.dashboard-design-next{border:1px solid var(--os-card-text,var(--ink,#1f1e1d));background:var(--os-card-text,var(--ink,#1f1e1d));color:var(--os-component-content-bg,var(--surface,#faf9f5));}
.dashboard-design-preview{min-width:0;position:sticky;top:16px;padding:18px;border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));border-radius:10px;background:var(--os-component-content-bg,var(--surface,#faf9f5));box-shadow:var(--shadow-paper,0 10px 22px -16px rgba(0,0,0,0.10));}
.dashboard-design-preview-head{margin-bottom:14px;}
.dashboard-design-preview-head span{display:block;margin-bottom:4px;color:var(--os-card-muted-text,var(--text-muted,#7a7567));font-size:10px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;}
.dashboard-design-preview-head strong{display:block;color:var(--os-card-text,var(--text,#1f1e1d));font-size:14px;line-height:1.3;}
.dashboard-design-preview-screen{padding:14px;border-radius:10px;background:var(--os-canvas,var(--bg,#f0eee6));border:1px solid color-mix(in srgb,var(--os-component-border,var(--hairline-mid,#d9d3c4)) 70%,transparent);}
.dashboard-preview-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.dashboard-preview-title-row span{font-family:var(--display,var(--serif,Georgia,serif));font-size:28px;font-weight:500;line-height:1;color:var(--os-card-text,var(--text,#1f1e1d));}
.dashboard-preview-title-row button{height:28px;padding:0 10px;border:1px solid var(--os-card-text,var(--ink,#1f1e1d));border-radius:999px;background:var(--os-card-text,var(--ink,#1f1e1d));color:var(--os-component-content-bg,var(--surface,#faf9f5));font:700 10px/1 var(--font,"Geist",system-ui,sans-serif);}
.dashboard-preview-card{overflow:hidden;border:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));border-radius:8px;background:var(--os-component-content-bg,var(--surface,#faf9f5));}
.dashboard-preview-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--os-component-border,var(--hairline-mid,#d9d3c4));}
.dashboard-preview-card-head strong{font-size:12px;color:var(--os-card-text,var(--text,#1f1e1d));}
.dashboard-preview-card-head span{font-size:10px;font-weight:800;color:var(--os-card-muted-text,var(--text-muted,#7a7567));}
.dashboard-preview-table{display:grid;}
.dashboard-preview-row{display:grid;grid-template-columns:1fr .75fr .75fr;gap:8px;padding:8px 10px;border-bottom:1px solid color-mix(in srgb,var(--os-component-border,var(--hairline-mid,#d9d3c4)) 65%,transparent);font-size:10.5px;color:var(--os-card-text,var(--text,#1f1e1d));}
.dashboard-preview-row:last-child{border-bottom:0;}
.dashboard-preview-row-head{background:var(--os-accent-soft,var(--blue-soft,#f4e5dc));font-size:9.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--os-card-muted-text,var(--text-muted,#7a7567));}
.dashboard-design-preview[data-dashboard-widget-style="streamlined"] .dashboard-preview-card{border-color:color-mix(in srgb,var(--os-component-border,var(--hairline-mid,#d9d3c4)) 62%,transparent);box-shadow:none;}
.dashboard-design-preview[data-dashboard-widget-style="executive"] .dashboard-preview-card{border-color:color-mix(in srgb,var(--os-card-text,var(--ink,#1f1e1d)) 22%,var(--os-component-border,var(--hairline-mid,#d9d3c4)));box-shadow:0 10px 28px -20px rgba(0,0,0,.35);}
.dashboard-design-preview[data-dashboard-widget-style="executive"] .dashboard-preview-card-head{background:var(--os-accent-soft,var(--blue-soft,#f4e5dc));}
.dashboard-design-preview[data-dashboard-widget-style="executive"] .dashboard-preview-row span:nth-child(2),
.dashboard-design-preview[data-dashboard-widget-style="executive"] .dashboard-preview-row span:nth-child(3){font-weight:800;color:var(--os-accent,var(--blue,#d97757));}
.dashboard-design-preview[data-dashboard-widget-style="soft-clinic"] .dashboard-preview-screen{background:#eceae6;}
.dashboard-design-preview[data-dashboard-widget-style="soft-clinic"] .dashboard-preview-card{border-radius:18px;border-color:rgba(0,0,0,.08);background:#fff;box-shadow:none;}
.dashboard-design-preview[data-dashboard-widget-style="soft-clinic"] .dashboard-preview-card-head,
.dashboard-design-preview[data-dashboard-widget-style="soft-clinic"] .dashboard-preview-row-head{background:#f8f8f7;}
.dashboard-design-preview[data-dashboard-widget-style="soft-clinic"] .dashboard-preview-row{border-bottom-color:rgba(0,0,0,.08);}
.dashboard-design-preview[data-dashboard-widget-style="soft-clinic"] .dashboard-preview-row span:first-child{font-weight:800;}
.dashboard-design-preview-summary{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0;}
.dashboard-design-preview-summary span{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;background:var(--os-canvas,var(--bg,#f0eee6));color:var(--os-card-muted-text,var(--text-muted,#7a7567));font-size:10px;font-weight:800;}
.dashboard-design-save{width:100%;min-height:38px;border:1px solid var(--os-card-text,var(--ink,#1f1e1d));border-radius:999px;background:var(--os-card-text,var(--ink,#1f1e1d));color:var(--os-component-content-bg,var(--surface,#faf9f5));font-family:var(--font,"Geist",system-ui,sans-serif);font-size:12px;font-weight:800;cursor:pointer;}
.dashboard-design-save-state{min-height:16px;margin:8px 0 0;color:var(--os-success,var(--green,#4b7a5b));font-size:11px;font-weight:800;text-align:center;}
@media (max-width:820px){
  .design-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .os-selector-grid{grid-template-columns:1fr!important;}
  .design-walkthrough-simplified{padding:22px 18px 28px;}
  .design-walkthrough-simplified .os-selector-card{min-height:260px;}
  .dashboard-design-shell{grid-template-columns:1fr;}
  .dashboard-design-steps{position:static;}
  .dashboard-design-preview{position:static;}
  .dashboard-design-tile-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .design-hub-grid{grid-template-columns:1fr;}
  .design-hub,.design-walkthrough{padding:14px 10px;}
  .os-selector-wrap{padding:1.4rem 1rem;}
}