/* PREEMAX FAMILY — fixed dark SMS settings and pattern UI, Server Patch 024 */
:root{
  --sms-bg:#0d1724;
  --sms-surface:#142235;
  --sms-surface-2:#182a40;
  --sms-surface-3:#0f1c2c;
  --sms-border:#2a3d56;
  --sms-border-soft:#22344b;
  --sms-text:#edf4ff;
  --sms-muted:#9fb0c6;
  --sms-muted-2:#7588a1;
  --sms-primary:#4f8cff;
  --sms-primary-strong:#3679ef;
  --sms-success:#2bd182;
  --sms-warning:#f0b95a;
  --sms-danger:#ff7480;
  --sms-shadow:0 18px 46px rgba(0,0,0,.24);
}

.sms-page-head{align-items:center;margin-bottom:16px}
.sms-page-head h1{color:var(--sms-text)}
.sms-page-head p{color:var(--sms-muted)}
.head-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.head-actions form{margin:0}
.head-actions .button,.sms-pattern-page .button,.sms-two-column .button,.sms-test-box .button{
  min-height:42px;border:1px solid transparent;border-radius:12px;padding:10px 15px;
  background:var(--sms-primary);color:#fff;font-weight:700;box-shadow:none;transition:.18s ease
}
.head-actions .button:hover,.sms-pattern-page .button:hover,.sms-two-column .button:hover,.sms-test-box .button:hover{
  transform:translateY(-1px);background:var(--sms-primary-strong)
}
.head-actions .button.ghost,.sms-pattern-page .button.ghost,.sms-two-column .button.ghost,.sms-test-box .button.ghost{
  background:transparent;color:#c8d8ec;border-color:var(--sms-border)
}
.head-actions .button.ghost:hover,.sms-pattern-page .button.ghost:hover,.sms-two-column .button.ghost:hover,.sms-test-box .button.ghost:hover{
  background:#1b2d43;border-color:#3a5577;color:#fff
}
.sms-inline-notice{margin-bottom:14px;border-radius:13px}

/* Settings home */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}
.settings-card{
  display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;
  background:linear-gradient(145deg,var(--sms-surface),#112033);border:1px solid var(--sms-border-soft);
  text-decoration:none;color:inherit;box-shadow:0 12px 32px rgba(0,0,0,.16);transition:.18s ease
}
.settings-card:hover{transform:translateY(-2px);border-color:#3e5d83;background:linear-gradient(145deg,#17283d,#13243a)}
.settings-card h2{margin:0 0 6px;font-size:17px;color:var(--sms-text)}
.settings-card p{margin:0 0 8px;line-height:1.75;color:var(--sms-muted)}
.settings-card small{color:#7f94ae}
.settings-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:#1e3552;border:1px solid #2f4e74;font-size:21px;color:#80adff}

/* Provider settings */
.sms-status-strip{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:11px;margin:15px 0}
.sms-status-strip article{
  display:flex;flex-direction:column;gap:5px;padding:15px 16px;border-radius:15px;
  background:linear-gradient(145deg,var(--sms-surface),#122034);border:1px solid var(--sms-border-soft)
}
.sms-status-strip span,.sms-status-strip small{color:var(--sms-muted);font-size:12px}
.sms-status-strip strong{font-size:17px;color:var(--sms-text)}
.sms-two-column{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:16px;align-items:start}
.sms-two-column>.card,.sms-pattern-page>.card{
  background:var(--sms-surface);border:1px solid var(--sms-border-soft);border-radius:18px;box-shadow:var(--sms-shadow);color:var(--sms-text)
}
.sms-two-column>.card h2,.sms-pattern-page>.card h2{color:var(--sms-text)}
.sms-two-column>.card p,.sms-pattern-page>.card p{color:var(--sms-muted)}
.sms-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.sms-form>label{display:flex;flex-direction:column;gap:7px;color:#c5d4e7}
.sms-form input,.sms-form select,.sms-form textarea,.inline-test input,.inline-test select,.compact-form input,.compact-form textarea{
  width:100%;box-sizing:border-box;background:var(--sms-surface-3)!important;border:1px solid var(--sms-border)!important;
  color:var(--sms-text)!important;border-radius:11px!important;min-height:43px;padding:10px 12px!important;outline:none
}
.sms-form textarea,.compact-form textarea{min-height:100px;resize:vertical}
.sms-form input:focus,.sms-form select:focus,.sms-form textarea:focus,.inline-test input:focus,.inline-test select:focus,.compact-form input:focus,.compact-form textarea:focus{
  border-color:var(--sms-primary)!important;box-shadow:0 0 0 3px rgba(79,140,255,.15)!important
}
.sms-form input::placeholder,.compact-form input::placeholder{color:#60758f}
.sms-form small{color:var(--sms-muted-2)}
.switch-line{
  grid-column:1/-1;display:flex!important;flex-direction:row!important;align-items:center;justify-content:space-between;
  gap:16px;padding:13px 15px;border-radius:14px;background:#101e2e;border:1px solid var(--sms-border-soft)
}
.switch-line span{display:flex;flex-direction:column;gap:3px}
.switch-line strong{color:var(--sms-text)}
.switch-line small{color:var(--sms-muted);line-height:1.6}
.switch-line input[type=checkbox]{appearance:none;width:48px!important;height:26px;min-width:48px;border:0!important;padding:0!important;border-radius:99px!important;background:#40536a!important;position:relative;cursor:pointer;transition:.18s}
.switch-line input[type=checkbox]:after{content:"";position:absolute;width:20px;height:20px;top:3px;right:3px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:.18s}
.switch-line input[type=checkbox]:checked{background:var(--sms-primary)!important}
.switch-line input[type=checkbox]:checked:after{transform:translateX(-22px)}
.switch-line.compact{padding:11px 13px}
.danger-check{grid-column:1/-1!important;display:flex!important;flex-direction:row!important;align-items:center;gap:9px;color:#ff9aa3}
.danger-check input{width:auto!important}
.sms-test-box{display:flex;flex-direction:column;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--sms-border-soft)}
.inline-test{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) auto;gap:8px}

/* Pattern page */
.sms-pattern-page{width:100%}
.pattern-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin:0 0 14px}
.pattern-overview article{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:13px 15px;
  border-radius:15px;background:#111f31;border:1px solid var(--sms-border-soft)
}
.pattern-overview span{color:var(--sms-muted);font-size:12px}
.pattern-overview strong{grid-row:1/3;grid-column:2;font-size:25px;line-height:1;color:var(--sms-text)}
.pattern-overview small{color:var(--sms-muted-2);font-size:11px}
.pattern-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 16px;align-items:start}
.pattern-card{
  --scenario-accent:#4f8cff;display:flex;flex-direction:column;gap:13px;min-width:0;margin:0;padding:17px;
  border-radius:18px;background:linear-gradient(160deg,var(--sms-surface),#101d2d);border:1px solid var(--sms-border-soft);
  box-shadow:0 16px 38px rgba(0,0,0,.2);color:var(--sms-text)
}
.pattern-card.scenario-password_recovery{--scenario-accent:#8c7cff}
.pattern-card.scenario-login_notice{--scenario-accent:#31c5b4}
.pattern-card-top{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:start}
.pattern-number{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:color-mix(in srgb,var(--scenario-accent) 15%,#102034);
  border:1px solid color-mix(in srgb,var(--scenario-accent) 45%,#20344d);color:var(--scenario-accent);font-weight:900;font-size:14px;direction:ltr
}
.pattern-heading{min-width:0}
.pattern-heading h2{margin:6px 0 3px;color:var(--sms-text);font-size:18px;line-height:1.45}
.pattern-heading p{margin:0;color:var(--sms-muted);line-height:1.65;font-size:12px}
.scenario-badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--scenario-accent) 12%,#13243a);color:var(--scenario-accent);font-size:10px;font-weight:800;border:1px solid color-mix(in srgb,var(--scenario-accent) 28%,transparent)}
.pattern-state{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap;background:#253348;color:#aab8ca}
.pattern-state i{width:7px;height:7px;border-radius:50%;background:#718198}
.pattern-state.is-active{background:rgba(43,209,130,.12);color:#79e9b2;border:1px solid rgba(43,209,130,.22)}
.pattern-state.is-active i{background:var(--sms-success);box-shadow:0 0 0 4px rgba(43,209,130,.1)}
.pattern-preview{padding:13px;border-radius:14px;background:#0f1c2b;border:1px solid #263a53}
.pattern-preview-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.pattern-preview-head span{color:#b6c7da;font-size:11px;font-weight:800}
.pattern-preview-head small{color:#6f839d;font-size:10px}
.pattern-preview p{margin:10px 0 11px;color:#f1f6fd!important;font-size:13px;line-height:1.9;min-height:50px;overflow-wrap:anywhere}
.variable-row{display:flex;flex-wrap:wrap;gap:6px}
.variable-row span{direction:ltr;padding:4px 8px;border-radius:8px;background:color-mix(in srgb,var(--scenario-accent) 12%,#17263a);color:var(--scenario-accent);font-size:10px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;border:1px solid color-mix(in srgb,var(--scenario-accent) 22%,transparent)}
.pattern-connection-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pattern-connection-summary>span{display:flex;flex-direction:column;gap:4px;padding:10px 11px;border-radius:12px;background:#132338;border:1px solid #263a53;min-width:0}
.pattern-connection-summary small{color:var(--sms-muted-2);font-size:10px}
.pattern-connection-summary strong{color:#dce8f6;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pattern-toggle-row{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:11px 12px;border-radius:13px;background:#101e2e;border:1px solid var(--sms-border-soft);cursor:pointer}
.pattern-toggle-row input{position:absolute;opacity:0;pointer-events:none}
.pattern-toggle-ui{grid-row:1/3;position:relative;width:44px;height:24px;border-radius:999px;background:#40536a;transition:.18s}
.pattern-toggle-ui:after{content:"";position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.28);transition:.18s}
.pattern-toggle-row input:checked+.pattern-toggle-ui{background:var(--sms-primary)}
.pattern-toggle-row input:checked+.pattern-toggle-ui:after{transform:translateX(-20px)}
.pattern-toggle-row>span:last-child{display:flex;flex-direction:column;gap:2px}
.pattern-toggle-row strong{font-size:12px;color:var(--sms-text)}
.pattern-toggle-row small{font-size:10px;line-height:1.55;color:var(--sms-muted)}
.pattern-editor{border:1px solid var(--sms-border-soft);border-radius:13px;background:#101e2e;overflow:hidden}
.pattern-editor summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;list-style:none;color:var(--sms-text)}
.pattern-editor summary::-webkit-details-marker{display:none}
.pattern-editor summary>span{display:flex;flex-direction:column;gap:2px}
.pattern-editor summary strong{font-size:12px}
.pattern-editor summary small{font-size:10px;color:var(--sms-muted)}
.pattern-editor summary>i{position:relative;width:20px;height:20px;border-radius:7px;background:#1d3048}
.pattern-editor summary>i:before,.pattern-editor summary>i:after{content:"";position:absolute;top:9px;left:5px;width:10px;height:2px;border-radius:2px;background:#91a9c5;transition:.18s}
.pattern-editor summary>i:after{transform:rotate(90deg)}
.pattern-editor[open] summary>i:after{transform:rotate(0)}
.pattern-editor-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:0 12px 12px;border-top:1px solid var(--sms-border-soft)}
.pattern-field{display:flex;flex-direction:column;gap:6px;padding-top:11px;min-width:0}
.pattern-field-full{grid-column:1/-1}
.pattern-field>span{color:#b8c8db;font-size:11px;font-weight:700}
.pattern-field>small{color:var(--sms-muted-2);font-size:10px;line-height:1.55}
.pattern-field input,.pattern-field textarea{
  width:100%;box-sizing:border-box;background:#0c1928!important;border:1px solid var(--sms-border)!important;
  color:var(--sms-text)!important;border-radius:10px!important;padding:10px 11px!important;outline:none;min-height:41px;font:inherit
}
.pattern-field textarea{resize:vertical;min-height:102px;line-height:1.8}
.pattern-field input:focus,.pattern-field textarea:focus{border-color:var(--scenario-accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--scenario-accent) 16%,transparent)!important}
.pattern-field input::placeholder{color:#5d718b}
.pattern-actions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;margin-top:auto}
.pattern-actions .button{width:100%;min-height:42px;font-size:11px;padding-inline:9px}
.pattern-save{background:var(--scenario-accent)!important}
.pattern-save:hover{filter:brightness(1.08)}
.pattern-remote{background:#172a40!important;border-color:#304866!important;color:#c8d8ec!important}
.button.full{width:100%}

/* Remote table */
.remote-patterns-card{overflow:hidden}
.remote-patterns-card .card-head{padding-bottom:13px;border-bottom:1px solid var(--sms-border-soft)}
.remote-patterns-card table{background:transparent;color:var(--sms-text)}
.remote-patterns-card th{background:#101e2e;color:#aebed1;border-color:var(--sms-border-soft)}
.remote-patterns-card td{color:#d8e4f3;border-color:var(--sms-border-soft)}
.remote-patterns-card tr:hover td{background:#17283d}
.remote-patterns-card .empty{color:var(--sms-muted)}

@media(max-width:1380px){
  .pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1080px){
  .sms-two-column{grid-template-columns:1fr}
  .sms-status-strip{grid-template-columns:repeat(2,minmax(140px,1fr))}
}
@media(max-width:820px){
  .pattern-grid,.pattern-overview{grid-template-columns:1fr}
  .pattern-overview article{grid-template-columns:1fr auto}
}
@media(max-width:640px){
  .settings-grid,.sms-status-strip,.sms-form{grid-template-columns:1fr}
  .inline-test{grid-template-columns:1fr}
  .head-actions{width:100%}
  .head-actions>*{flex:1}
  .head-actions .button{width:100%}
  .settings-card{padding:16px}
  .pattern-card{padding:14px}
  .pattern-card-top{grid-template-columns:42px minmax(0,1fr)}
  .pattern-number{width:42px;height:42px}
  .pattern-state{grid-column:2;justify-self:start}
  .pattern-editor-body,.pattern-connection-summary,.pattern-actions{grid-template-columns:1fr}
  .pattern-field-full{grid-column:auto}
}

/* Server Patch 024 — provider status header, safe credentials, dynamic lines and test center */
.provider-header-bar{
  position:sticky;top:0;z-index:30;display:grid;grid-template-columns:minmax(190px,1fr) auto auto auto 38px;
  align-items:center;gap:10px;margin:-4px 0 18px;padding:10px 12px;border-radius:15px;
  background:rgba(15,28,44,.96);border:1px solid var(--sms-border-soft);box-shadow:0 12px 34px rgba(0,0,0,.18);
  backdrop-filter:blur(12px)
}
.provider-header-bar a{text-decoration:none;color:inherit}
.provider-header-main{display:flex;align-items:center;gap:10px;min-width:0}
.provider-header-main>span:last-child,.provider-header-metric{display:flex;flex-direction:column;gap:2px}
.provider-header-main small,.provider-header-metric small,.provider-header-time{font-size:10px;color:var(--sms-muted-2)}
.provider-header-main strong,.provider-header-metric strong{font-size:12px;color:var(--sms-text);white-space:nowrap}
.provider-pulse{width:10px;height:10px;border-radius:50%;background:#718198;box-shadow:0 0 0 5px rgba(113,129,152,.12)}
.provider-header-bar.is-ok .provider-pulse{background:var(--sms-success);box-shadow:0 0 0 5px rgba(43,209,130,.13)}
.provider-header-bar.is-error .provider-pulse{background:var(--sms-danger);box-shadow:0 0 0 5px rgba(255,116,128,.13)}
.provider-header-metric{padding:4px 12px;border-right:1px solid var(--sms-border-soft)}
.provider-header-time{white-space:nowrap}
.provider-header-bar form{margin:0}
.provider-header-bar button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--sms-border);border-radius:10px;background:#17283d;color:#cfe0f5;font-size:18px;cursor:pointer}
.provider-header-bar button:hover{background:#203650;border-color:#45648a}

.api-key-state{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);gap:14px;padding:15px;border-radius:15px;background:#101e2e;border:1px solid var(--sms-border-soft)}
.api-key-state>div{display:flex;flex-direction:column;gap:4px}
.api-key-state>div>span{font-size:11px;color:var(--sms-muted)}
.api-key-state>div>strong{font-size:14px;color:var(--sms-text)}
.api-key-state>div>small{color:var(--sms-muted-2);line-height:1.6}
.api-key-state.has-key{border-color:rgba(43,209,130,.25);background:linear-gradient(145deg,rgba(43,209,130,.06),#101e2e)}
.api-key-state.no-key{border-color:rgba(240,185,90,.25)}
.api-key-replace-box,.api-key-danger-zone{border:1px solid var(--sms-border);border-radius:12px;background:#0d1a29;overflow:hidden}
.api-key-replace-box summary,.api-key-danger-zone summary{padding:11px 12px;cursor:pointer;color:#cbd9e9;font-weight:700;list-style:none}
.api-key-replace-box summary::-webkit-details-marker,.api-key-danger-zone summary::-webkit-details-marker{display:none}
.api-key-replace-box[open],.api-key-danger-zone[open]{padding-bottom:12px}
.api-key-replace-box[open] summary,.api-key-danger-zone[open] summary{border-bottom:1px solid var(--sms-border-soft);margin-bottom:11px}
.api-key-replace-box>label,.api-key-danger-zone>label{margin:0 12px 10px}
.api-key-confirm{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:8px;color:#b9c9db!important;line-height:1.7}
.api-key-confirm input,.api-key-danger-zone input[type=checkbox]{width:auto!important;min-height:auto!important;margin-top:4px}
.api-key-danger-zone{grid-column:1/-1;border-color:rgba(255,116,128,.28)}
.api-key-danger-zone summary{color:#ff9ba4}

.provider-connection-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px;padding-top:16px;border-top:1px solid var(--sms-border-soft)}
.provider-connection-actions form{margin:0}
.provider-connection-actions .button{width:100%}
.provider-guidance{margin-top:18px;padding:14px;border-radius:14px;background:#101e2e;border:1px solid var(--sms-border-soft)}
.provider-guidance strong{color:var(--sms-text);font-size:12px}
.provider-guidance p{margin:7px 0 0!important;font-size:11px;line-height:1.8!important}

.sms-test-center{margin-top:16px;background:var(--sms-surface)!important;border:1px solid var(--sms-border-soft)!important;color:var(--sms-text)}
.sms-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sms-test-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:15px;border-radius:16px;background:#101e2e;border:1px solid var(--sms-border-soft)}
.sms-test-title{grid-column:1/-1;display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid var(--sms-border-soft)}
.sms-test-title>span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#1b3352;border:1px solid #31547d;color:#81adff;font-weight:900;direction:ltr}
.sms-test-title h3{margin:0 0 3px;color:var(--sms-text);font-size:15px}
.sms-test-title p{margin:0!important;color:var(--sms-muted)!important;font-size:11px}
.sms-test-card label{display:flex;flex-direction:column;gap:7px;color:#c5d4e7;font-size:12px}
.sms-test-card input,.sms-test-card select,.sms-test-card textarea{width:100%;box-sizing:border-box;background:var(--sms-surface-3)!important;border:1px solid var(--sms-border)!important;color:var(--sms-text)!important;border-radius:11px!important;min-height:43px;padding:10px 12px!important;outline:none;font:inherit}
.sms-test-card textarea{resize:vertical;min-height:108px;line-height:1.8}
.sms-test-card input:focus,.sms-test-card select:focus,.sms-test-card textarea:focus{border-color:var(--sms-primary)!important;box-shadow:0 0 0 3px rgba(79,140,255,.15)!important}
.sms-test-card small{color:var(--sms-muted-2);line-height:1.6}
.sms-test-card .full-field{grid-column:1/-1}
.sms-test-card .button{grid-column:1/-1;min-height:44px;border:0;border-radius:12px;background:var(--sms-primary);color:#fff;font-weight:800;cursor:pointer}
.sms-test-card .button:hover{background:var(--sms-primary-strong)}
.sms-form input[readonly]{opacity:.82;cursor:not-allowed;background:#132033!important}
.sms-form select option,.sms-test-card select option{background:#101e2e;color:var(--sms-text)}

@media(max-width:1100px){
  .provider-header-bar{grid-template-columns:minmax(160px,1fr) auto auto 38px}
  .provider-header-time{display:none}
  .sms-test-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .provider-header-bar{position:relative;grid-template-columns:1fr auto;margin-top:0}
  .provider-header-metric{border-right:0;border-top:1px solid var(--sms-border-soft);padding:8px 0}
  .provider-header-time{display:block;grid-column:1/-1}
  .api-key-state{grid-template-columns:1fr}
  .provider-connection-actions,.sms-test-card{grid-template-columns:1fr}
  .sms-test-title,.sms-test-card .full-field,.sms-test-card .button{grid-column:auto}
}