.sample-method-panel { display: grid; gap: 16px; }
.sample-method-migration { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 20px; border: 1px solid #e2c888; border-left: 4px solid #bd8423; border-radius: 12px; background: #fffaf0; }
.sample-method-migration > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; color: #79530f; background: #f4d78f; font-size: 18px; font-weight: 800; }
.sample-method-migration > div { display: grid; gap: 4px; }
.sample-method-migration small { color: #8c651f; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.sample-method-migration h3 { margin: 0; color: #594727; font-size: 18px; }
.sample-method-migration p { max-width: 760px; margin: 0; color: #7c705b; font-size: 12px; line-height: 1.45; }
.sample-method-migration .btn { white-space: nowrap; }
.sample-method-standard { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid #d8d1eb; border-left: 4px solid #705da4; border-radius: 10px; background: #faf9fe; }
.sample-method-standard > span { display: grid; flex: 0 0 31px; place-items: center; width: 31px; height: 31px; border-radius: 8px; color: #fff; background: #705da4; font-weight: 800; }
.sample-method-standard div { display: grid; gap: 3px; }
.sample-method-standard small { color: #695795; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.sample-method-standard strong { color: #47425d; font-size: 13px; }
.sample-method-standard p { margin: 0; color: #72788a; font-size: 12px; line-height: 1.4; }
.sample-simple-intro { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid #cfe3dc; border-radius: 10px; background: #f5fbf9; }
.sample-simple-intro > span { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #28806a; font-weight: 800; }
.sample-simple-intro div { display: grid; gap: 2px; }
.sample-simple-intro strong { color: #315950; font-size: 12px; }
.sample-simple-intro p { margin: 0; color: #718580; font-size: 10px; }

.sample-method-card { padding: 20px; border: 1px solid #d9e5e7; border-radius: 12px; background: #fff; }
.sample-method-card > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 11px; align-items: start; margin-bottom: 18px; }
.sample-method-card > header > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #fff; background: #705da4; font-size: 13px; font-weight: 800; }
.sample-method-card > header > div { display: grid; gap: 3px; }
.sample-method-card > header small { color: #6a5896; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.sample-method-card > header h3 { margin: 0; color: #263f47; font-size: 19px; }
.sample-method-card > header p { margin: 0; color: #6c8288; font-size: 12px; line-height: 1.4; }

.sample-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.sample-method-grid label { display: grid; align-content: start; gap: 6px; color: #516a70; font-size: 11px; font-weight: 800; }
.sample-method-grid label.wide { grid-column: 1 / -1; }
.sample-method-grid label > span { display: flex; align-items: baseline; gap: 5px; }
.sample-method-grid label > span em { color: #9e4d48; font-size: 9px; font-style: normal; text-transform: uppercase; }
.sample-method-grid label > span small { color: #829297; font-size: 9px; font-weight: 600; }
.sample-method-grid select,.sample-method-grid input,.sample-method-grid textarea,.sample-severity-routing select { box-sizing: border-box; width: 100%; border: 1px solid #c8dadd; border-radius: 8px; color: #284148; background: #fff; font: inherit; }
.sample-method-grid select,.sample-method-grid input,.sample-severity-routing select { min-height: 40px; padding: 8px 10px; }
.sample-method-grid textarea { min-height: 80px; padding: 9px 10px; line-height: 1.4; resize: vertical; }
.sample-method-grid label > small { color: #788c91; font-size: 10px; font-weight: 500; line-height: 1.35; }
.sample-method-grid select:focus,.sample-method-grid input:focus,.sample-method-grid textarea:focus,.sample-severity-routing select:focus { outline: 2px solid rgba(112,93,164,.18); border-color: #7967aa; }
.sample-method-grid :disabled,.sample-severity-routing :disabled { color: #6d7e83; background: #f3f6f6; cursor: not-allowed; }
.optional-note input { background: #fcfdfd; }
.exception-note { padding: 12px; border: 1px solid #efd9a8; border-radius: 9px; background: #fffaf0; }
.exception-note textarea { border-color: #dec890; }

.sample-simple-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #e1eaeb; }
.sample-simple-section-heading > div { display: grid; gap: 2px; }
.sample-simple-section-heading strong { color: #345058; font-size: 13px; }
.sample-simple-section-heading p { margin: 0; color: #75898e; font-size: 10px; }
.sample-simple-criteria { display: grid; gap: 8px; margin-top: 10px; }
.sample-simple-criteria article { display: grid; grid-template-columns: auto minmax(0,1.25fr) minmax(180px,.75fr) auto; align-items: end; gap: 10px; padding: 11px; border: 1px solid #dbe6e7; border-radius: 9px; background: #f9fcfc; }
.sample-simple-criteria article > span { display: grid; place-items: center; width: 27px; height: 40px; color: #317767; font-size: 11px; font-weight: 800; }
.sample-simple-criteria label { display: grid; gap: 5px; }
.sample-simple-criteria label small { color: #647b81; font-size: 9px; font-weight: 800; }
.sample-simple-criteria select { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #c8dadd; border-radius: 8px; color: #284148; background: #fff; font: inherit; font-size: 11px; }
.sample-simple-criteria .close { align-self: center; }
.sample-module-heading { align-items: flex-end; }
.sample-module-summary { padding: 5px 8px; border-radius: 999px; color: #286f5f; background: #e5f4ee; font-size: 9px; font-weight: 800; white-space: nowrap; }
.sample-module-list { display: grid; gap: 9px; margin-top: 10px; }
.sample-module-card { overflow: hidden; border: 1px solid #d8e5e5; border-radius: 10px; background: #fff; }
.sample-module-card > header { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; }
.sample-module-card > header > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #2e806b; font-size: 11px; font-weight: 800; }
.sample-module-card > header > div { display: grid; gap: 2px; }
.sample-module-card > header strong { color: #345159; font-size: 12px; }
.sample-module-card > header small { color: #71858a; font-size: 9px; }
.sample-module-card > header b { padding: 5px 7px; border-radius: 999px; color: #286f5f; background: #e2f2eb; font-size: 7px; letter-spacing: .05em; white-space: nowrap; }
.sample-module-card > p { margin: 0; padding: 0 12px 11px 50px; color: #718489; font-size: 10px; line-height: 1.4; }
.sample-module-checks { display: grid; border-top: 1px solid #e2ecea; }
.sample-module-checks > div { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 8px 12px 8px 50px; border-bottom: 1px solid #edf2f1; background: #f8fcfa; }
.sample-module-checks > div:last-child { border-bottom: 0; }
.sample-module-checks span { color: #2e806b; font-size: 10px; font-weight: 800; }
.sample-module-checks strong { color: #476159; font-size: 10px; }
.sample-module-checks small { color: #7a8c88; font-size: 8px; }
.sample-module-card.inactive { border-color: #e3ded3; background: #fbfaf7; }
.sample-module-card.inactive > header > span { color: #8a8273; background: #ece8df; }
.sample-module-card.inactive > header b { color: #7c705d; background: #eeeae1; }
.sample-module-card.inactive > p { color: #8a857d; }
.sample-module-inactive-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 12px 11px 50px; padding: 8px 10px; border-radius: 7px; color: #76633d; background: #fff4d9; }
.sample-module-inactive-note > span { font-weight: 900; }
.sample-module-inactive-note p { margin: 0; font-size: 9px; line-height: 1.4; }
.sample-module-program-warning { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 12px; border: 1px solid #e6cc91; border-radius: 9px; background: #fff9eb; }
.sample-module-program-warning > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #76500e; background: #f0cd7d; font-weight: 900; }
.sample-module-program-warning > div { display: grid; gap: 2px; }
.sample-module-program-warning strong { color: #6d5a32; font-size: 10px; }
.sample-module-program-warning p { margin: 0; color: #847657; font-size: 9px; line-height: 1.4; }
.sample-module-program-warning .btn { white-space: nowrap; }
.sample-simple-summary { display: grid; gap: 3px; margin-top: 15px; padding: 12px 14px; border: 1px solid #d9e5e6; border-radius: 9px; background: #f8fbfb; }
.sample-simple-summary span { color: #6a5896; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.sample-simple-summary strong { color: #3c555c; font-size: 12px; }
.sample-simple-summary small { color: #788b90; font-size: 10px; }
.sample-simple-defaults { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; padding: 13px; border: 1px solid #cfe3dc; border-radius: 9px; background: #f5fbf9; }
.sample-simple-defaults > span { display: grid; flex: 0 0 28px; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #28806a; font-weight: 800; }
.sample-simple-defaults div { display: grid; gap: 3px; }
.sample-simple-defaults strong { color: #315950; font-size: 12px; }
.sample-simple-defaults p { margin: 0; color: #718580; font-size: 10px; line-height: 1.45; }
.sample-executor-picker { display: grid; gap: 7px; }
.sample-executor-picker > span { display: flex; align-items: center; gap: 6px; color: #516a70; font-size: 11px; font-weight: 800; }
.sample-executor-picker > span em { color: #6a5896; font-size: 9px; font-style: normal; text-transform: uppercase; }
.sample-executor-picker > small { color: #788c91; font-size: 10px; }
.sample-executor-add { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.sample-executor-add select { min-height: 40px; padding: 8px 10px; border: 1px solid #c8dadd; border-radius: 8px; color: #284148; background: #fff; font: inherit; }
.sample-executor-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sample-executor-chips > span { display: flex; align-items: center; gap: 7px; padding: 5px 7px 5px 5px; border: 1px solid #cfe0dc; border-radius: 999px; background: #f3faf7; }
.sample-executor-chips b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #31806f; font-size: 8px; }
.sample-executor-chips strong { color: #36564f; font-size: 10px; }
.sample-executor-chips button { border: 0; color: #78918b; background: transparent; font-size: 14px; cursor: pointer; }
.sample-executor-chips button:disabled { opacity: .35; cursor: not-allowed; }

.sample-method-preview,.selection-method-explainer,.sample-validation-warning,.sample-conclusion-example { display: flex; align-items: flex-start; gap: 11px; margin-top: 15px; padding: 13px; border: 1px solid #d6d1e8; border-radius: 9px; background: #faf9fe; }
.sample-method-preview > span,.selection-method-explainer > span,.sample-validation-warning > span,.sample-conclusion-example > span { display: grid; flex: 0 0 29px; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #fff; background: #705da4; font-weight: 800; }
.sample-method-preview div,.selection-method-explainer div,.sample-validation-warning div,.sample-conclusion-example div { display: grid; gap: 3px; }
.sample-method-preview small,.sample-conclusion-example small { color: #6c5898; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.sample-method-preview strong,.selection-method-explainer strong,.sample-validation-warning strong,.sample-conclusion-example strong { color: #47445b; font-size: 12px; }
.sample-method-preview p,.selection-method-explainer p,.sample-validation-warning p,.sample-conclusion-example p { margin: 0; color: #727c88; font-size: 11px; line-height: 1.4; }
.selection-method-explainer.warning,.sample-validation-warning { border-color: #ecd197; background: #fff9eb; }
.selection-method-explainer.warning > span,.sample-validation-warning > span { color: #76500e; background: #f1c66b; }
.selection-method-explainer.complete { border-color: #bfdfd2; background: #f3fbf7; }
.selection-method-explainer.complete > span { background: #27836c; }

.sample-definition-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; margin-top: 15px; border: 1px solid #d9e5e6; border-radius: 9px; }
.sample-definition-summary > div { display: grid; gap: 3px; padding: 11px 13px; border-right: 1px solid #e0e9ea; background: #f9fcfc; }
.sample-definition-summary > div:last-child { border: 0; }
.sample-definition-summary span { color: #71868b; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.sample-definition-summary strong { overflow: hidden; color: #3c545b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sample-input-suffix { display: flex; align-items: stretch; overflow: hidden; border: 1px solid #c8dadd; border-radius: 8px; background: #f7fafa; }
.sample-input-suffix input { min-width: 0; border: 0; border-radius: 0; }
.sample-input-suffix small { display: flex; align-items: center; padding: 0 10px; color: #6f8489; font-size: 10px; font-weight: 700; }

.sample-criteria-list { display: grid; gap: 12px; }
.sample-criterion-card { overflow: hidden; border: 1px solid #d8e4e6; border-radius: 10px; background: #fcfefe; }
.sample-criterion-card > header { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid #e1ebec; background: #f5f9f9; }
.sample-criterion-card > header > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #675594; background: #ebe7f7; font-size: 11px; font-weight: 800; }
.sample-criterion-card > header strong { color: #42575e; font-size: 12px; }
.sample-criterion-card > header b { margin-left: auto; padding: 4px 7px; border-radius: 999px; color: #93651d; background: #fff0cf; font-size: 8px; letter-spacing: .05em; }
.sample-criterion-card > header .close { margin-left: auto; }
.sample-criterion-card > header b + .close { margin-left: 0; }
.criterion-fields { padding: 13px; }
.criterion-check,.sample-wide-check { display: flex !important; align-items: center; gap: 9px !important; padding: 10px 11px; border: 1px solid #dce7e8; border-radius: 8px; background: #fff; }
.criterion-check input,.sample-wide-check input { flex: 0 0 auto; width: 16px; min-height: 16px; height: 16px; padding: 0; accent-color: #705da4; }
.criterion-check > span,.sample-wide-check > span { display: grid !important; gap: 2px !important; }
.criterion-check strong,.sample-wide-check strong { color: #445a60; font-size: 11px; }
.criterion-check small,.sample-wide-check small { color: #788c90; font-size: 9px !important; font-weight: 500 !important; }

.sample-role-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; margin-top: 15px; padding: 13px; border: 1px solid #cfe1dc; border-radius: 9px; background: #f5fbf9; }
.sample-role-flow > div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.sample-role-flow > div > span { display: grid; grid-row: span 2; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; background: #31806f; font-size: 10px; font-weight: 800; }
.sample-role-flow strong { color: #36564f; font-size: 11px; }
.sample-role-flow small { color: #728782; font-size: 9px; }
.sample-role-flow > i { padding: 0 10px; color: #98b8b0; font-style: normal; }
.sample-role-flow.simple { grid-template-columns: 1fr auto 1fr; }

.sample-severity-routing { display: grid; gap: 8px; }
.sample-severity-routing label { display: grid; grid-template-columns: auto minmax(145px,.6fr) minmax(0,1.4fr); align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dce6e7; border-radius: 9px; background: #fcfefe; }
.sample-severity-routing strong { color: #465b61; font-size: 11px; }
.severity-dot { width: 10px; height: 10px; border-radius: 50%; background: #6aa889; }
.severity-dot.medium { background: #d8ae47; }
.severity-dot.high { background: #d37747; }
.severity-dot.critical { background: #b64f4b; }
.follow-up-fields { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2eaeb; }
.sample-wide-check { grid-column: 1 / -1; }

.sample-method-footer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 13px 15px; border: 1px solid #d8e4e6; border-radius: 10px; background: #f8fbfb; }
.sample-method-footer > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.sample-method-footer > span.complete { background: #28806a; }
.sample-method-footer > span.pending { color: #5c4b8c; background: #e8e1f6; }
.sample-method-footer > span.attention { color: #76500e; background: #efc36a; }
.sample-method-footer-copy { display: grid; gap: 2px; }
.sample-method-footer strong { color: #3d545a; font-size: 12px; }
.sample-method-footer p { margin: 0; color: #74878c; font-size: 10px; }
.sample-method-footer-actions { display: flex; align-items: flex-end; gap: 7px; flex-direction: column; }
.sample-method-footer-actions small { color: #6d7e84; font-size: 9px; white-space: nowrap; }
.sample-method-footer-actions .btn { min-height: 32px; padding: 7px 11px; font-size: 10px; }
.sample-method-footer-actions b { padding: 4px 7px; border-radius: 999px; color: #28705f; background: #e0f2eb; font-size: 8px; letter-spacing: .06em; }

@media (max-width: 760px) {
    .sample-method-migration { grid-template-columns: auto 1fr; }
    .sample-method-migration .btn { grid-column: 2; justify-self: start; }
    .sample-method-grid { grid-template-columns: 1fr; }
    .sample-method-grid label.wide,.sample-wide-check { grid-column: auto; }
    .sample-severity-routing label { grid-template-columns: auto 1fr; }
    .sample-severity-routing select { grid-column: 2; }
    .sample-role-flow { grid-template-columns: 1fr; gap: 8px; }
    .sample-role-flow > i { display: none; }
    .sample-simple-criteria article { grid-template-columns: auto 1fr auto; }
    .sample-simple-criteria article label { grid-column: 2; }
    .sample-simple-criteria article > span { grid-row: 1 / span 2; }
    .sample-simple-criteria .close { grid-column: 3; grid-row: 1 / span 2; }
    .sample-module-card > header { grid-template-columns: auto 1fr; }
    .sample-module-card > header b { grid-column: 2; justify-self: start; }
    .sample-module-card > p,.sample-module-checks > div { padding-left: 12px; }
    .sample-module-inactive-note { margin-left: 12px; }
    .sample-module-program-warning { grid-template-columns: auto 1fr; }
    .sample-module-program-warning .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 520px) {
    .sample-method-card { padding: 15px; }
    .sample-method-card > header { grid-template-columns: auto 1fr; }
    .sample-method-card > header > .btn { grid-column: 2; justify-self: start; }
    .sample-definition-summary { grid-template-columns: 1fr; }
    .sample-definition-summary > div { border-right: 0; border-bottom: 1px solid #e0e9ea; }
    .sample-definition-summary > div:last-child { border-bottom: 0; }
    .sample-method-footer { grid-template-columns: auto 1fr; }
    .sample-method-footer-actions { grid-column: 2; align-items: flex-start; }
}