*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#FAFAFA;--bg2:#F5F5F5;--card:#FFF;
  --t1:#1A1A1A;--t2:#6B6B6B;--t3:#9A9A9A;--t4:#C7C7CC;
  --bdr:#E8E8E8;--bdr2:#F0F0F0;
  --acc:#48484A;
  --shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.04);
  --shadow2:0 2px 6px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.06);
  --r:14px;--rr:50px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --overlay-bg:rgba(0,0,0,.25);--overlay-bg-blur:rgba(0,0,0,.18);
  --modal-shadow:0 8px 40px rgba(0,0,0,.16),0 2px 12px rgba(0,0,0,.08);
  --tab-bg:rgba(255,255,255,.55);--tab-blur:rgba(255,255,255,.04);--tab-border:rgba(255,255,255,.42);--tab-shadow:0 2px 6px rgba(0,0,0,.04),0 8px 20px rgba(0,0,0,.06);--tab-active:rgba(50,50,52,.72);--tab-active-c:#fff
}
html[data-theme="dark"]{
  --bg:#1C1C1E;--bg2:#2C2C2E;--card:#2C2C2E;
  --t1:#F5F5F7;--t2:#A1A1A6;--t3:#6E6E73;--t4:#48484A;
  --bdr:#3A3A3C;--bdr2:#3A3A3C;
  --acc:#5EC4B6;
  --shadow:0 1px 3px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.15);
  --shadow2:0 2px 6px rgba(0,0,0,.2),0 8px 20px rgba(0,0,0,.3);
  --overlay-bg:rgba(0,0,0,.4);--overlay-bg-blur:rgba(0,0,0,.3);
  --modal-shadow:0 8px 40px rgba(0,0,0,.4),0 2px 12px rgba(0,0,0,.2);
  --tab-bg:rgba(255,255,255,.1);--tab-blur:rgba(255,255,255,.06);--tab-border:rgba(255,255,255,.12);--tab-shadow:0 2px 6px rgba(0,0,0,.12),0 8px 20px rgba(0,0,0,.18);--tab-active:rgba(245,245,247,.12);--tab-active-c:#fff
}
html[data-theme="sepia"]{
  --bg:#F5EDDA;--bg2:#EDE5D0;--card:#FAF4E6;
  --t1:#5B4636;--t2:#8B7355;--t3:#AB9B85;--t4:#C8B99E;
  --bdr:#DDD4C0;--bdr2:#E8E0CE;
  --acc:#A67B5B;
  --shadow:0 1px 3px rgba(91,70,54,.06),0 4px 12px rgba(91,70,54,.06);
  --shadow2:0 2px 6px rgba(91,70,54,.06),0 8px 20px rgba(91,70,54,.08);
  --overlay-bg:rgba(91,70,54,.25);--overlay-bg-blur:rgba(91,70,54,.18);
  --modal-shadow:0 8px 40px rgba(91,70,54,.15),0 2px 12px rgba(91,70,54,.1);
  --tab-bg:rgba(245,237,218,.55);--tab-blur:rgba(255,248,240,.08);--tab-border:rgba(255,250,242,.42);--tab-shadow:0 2px 6px rgba(91,70,54,.06),0 8px 20px rgba(91,70,54,.08);--tab-active:rgba(91,70,54,.8);--tab-active-c:#F5EDDA
}
html{background:var(--bg)}
body{
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:var(--bg);color:var(--t1);transition:background .3s,color .3s;
  min-height:100vh;min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  z-index:10;
  padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;gap:8px;align-items:center
}
.tabs{
  display:flex;
  background:var(--tab-bg);
  border-radius:var(--rr);padding:5px;
  box-shadow:var(--tab-shadow);
  border:1px solid var(--tab-border);
  max-width:calc(100vw - 40px)
}
@supports(backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .tabs{background:var(--tab-blur);backdrop-filter:blur(6px) saturate(180%);-webkit-backdrop-filter:blur(6px) saturate(180%)}
}
.tabs a,.tabs button:not(.theme-toggle){
  background:none;border:none;
  padding:12px clamp(12px,3.5vw,22px);border-radius:var(--rr);
  font:500 clamp(.8125rem,2.8vw,.875rem)/1 var(--font);
  color:var(--t3);cursor:pointer;
  transition:color .15s,background .15s,box-shadow .15s;
  white-space:nowrap;text-decoration:none
}
.tabs a.active,.tabs button.active{
  background:var(--tab-active);
  color:var(--tab-active-c);
  box-shadow:0 2px 8px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.12)
}
.tabs a:active,.tabs button:active{opacity:.7}
.theme-toggle{display:flex;align-items:center;justify-content:center;padding:12px;border:none;border-radius:50%;cursor:pointer;color:var(--t3);background:none;transition:color .15s}
.theme-toggle:active{opacity:.7}
@media(hover:hover){
  .tabs a:hover:not(.active),.tabs button:hover:not(.active):not(.theme-toggle){color:var(--t2)}
  .theme-toggle:hover{color:var(--t1)}
  .links>button:hover:not([disabled]){background:var(--bg2);color:var(--t1)}
  .inp button:hover:not(:disabled){color:var(--t1)}
  .step-btn:hover:not(:disabled){border-color:var(--t4);color:var(--t2)}
  .srow:has(.stepper) .step-btn:hover:not(:disabled){filter:brightness(.95)}
  .srow:has(.stepper):hover{background:none}
  .notif-pill:hover{opacity:.9}
  .seg:hover:not(.active):not(:disabled){color:var(--t2);background:var(--bg2)}
}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.links>button{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;font:500 .9375rem/1 var(--font);color:var(--t2);background:none;border:none;border-bottom:1px solid var(--bdr2);cursor:pointer;text-align:left;transition:background .25s,color .15s}
.links>button:last-child{border-bottom:none}
.links>button[disabled]{opacity:.35;cursor:not-allowed}
.links>button svg{width:18px;height:18px;flex-shrink:0;color:var(--t4)}
.srow{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;min-height:46px;border-bottom:1px solid var(--bdr2);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s}
.srow:last-child{border-bottom:none}
.srow:active{opacity:.7}
.srow.disabled{opacity:.35;pointer-events:none}
@media(hover:hover){.srow:hover{background:var(--bg2)}}
.slbl{display:flex;align-items:center;gap:12px;font:500 .9375rem/1 var(--font);color:var(--t2)}
.slbl svg{width:18px;height:18px;flex-shrink:0;color:var(--t4)}
.bg-chk{padding:5px 12px;border:1.5px solid var(--bdr);border-radius:var(--rr);background:none;flex-shrink:0;min-width:52px;text-align:center;transition:.2s ease}
.bg-chk svg{width:14px;height:14px;display:block;margin:0 auto;color:var(--t4);opacity:.2}
.srow.sel .bg-chk{background:#DCFCE7;color:#34D399;border-color:#A7F3D0;animation:pop .35s ease}
.srow.sel .bg-chk svg{color:#34D399;opacity:1}
.srow.sel .bg-chk polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .35s ease .08s forwards}
html[data-theme="dark"] .srow.sel .bg-chk{background:#1A3A2A;border-color:#2D5A3E}
html[data-theme="dark"] .srow.sel .bg-chk svg{color:#34D399}
html[data-theme="sepia"] .srow.sel .bg-chk{background:#E8E0CE;border-color:#DDD4C0}
html[data-theme="sepia"] .srow.sel .bg-chk svg{color:#2D7D46}
.drop-overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(250,250,250,.95);font:600 1.25rem/1 var(--font);color:var(--t3);opacity:0;pointer-events:none;transition:opacity .2s}
.drop-overlay.active{opacity:1;pointer-events:auto}
html[data-theme="dark"] .drop-overlay{background:rgba(28,28,30,.95)}
html[data-theme="sepia"] .drop-overlay{background:rgba(245,237,218,.95)}
.inp{display:flex;gap:8px;margin-bottom:14px}
.inp input{flex:1;padding:12px 20px;border:1px solid var(--bdr2);border-radius:50px;font:400 .9375rem/1 var(--font);color:var(--t1);background:var(--card);box-shadow:var(--shadow);outline:none;transition:border-color .15s}
.inp input:focus{border-color:var(--t4)}
.inp button{width:44px;height:44px;border-radius:50%;border:none;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--t3);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s}
.chip{padding:5px 10px;border-radius:var(--rr);border:1.5px solid var(--bdr);background:none;font:500 .8125rem/1 var(--font);color:var(--t3);cursor:pointer;transition:background .15s,color .15s,border-color .15s;white-space:nowrap}
.chip:active{transform:scale(.95)}
.chip.active{background:var(--acc);color:#fff;border-color:var(--acc)}
html[data-theme="dark"] .chip.active{color:#0D1B2A}
html[data-theme="sepia"] .chip.active{color:#1A0E05}
.seg-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--bdr2)}
.seg-row.c2{grid-template-columns:1fr 1fr}
.seg-row.c4{grid-template-columns:repeat(4,1fr)}
.seg-row:last-child{border-bottom:none}
.seg{padding:12px;min-height:46px;display:flex;align-items:center;justify-content:center;font:500 .875rem/1 var(--font);color:var(--t3);background:none;border:none;cursor:pointer;text-align:center;transition:background .2s,color .2s}
.seg.active{background:var(--tab-active);color:var(--tab-active-c)}
.seg:active{opacity:.7}
.seg:disabled{opacity:.35;cursor:default}
.stepper{display:flex;align-items:center;gap:6px}
.step-btn{width:28px;height:28px;border-radius:var(--rr);border:1.5px solid var(--bdr);background:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .15s,color .15s,opacity .15s;padding:0}
.step-btn svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;width:14px;height:14px}
.step-btn:active:not(:disabled){transform:scale(.9)}
.step-btn:disabled{opacity:.3;cursor:default}
.srow:has(.stepper){display:grid;grid-template-columns:2fr 1fr 1fr;padding:0;gap:0}
.srow:has(.stepper):active{opacity:1}
.srow:has(.stepper) .slbl{padding:8px 16px;min-height:46px}
.srow:has(.stepper) .stepper{display:contents}
.srow:has(.stepper) .step-btn{width:100%;height:100%;min-height:46px;border:none;border-radius:0;transition:opacity .15s,filter .15s}
.srow:has(.stepper) .step-btn svg{width:18px;height:18px}
.srow:has(.stepper) .step-btn:active:not(:disabled){transform:none;filter:brightness(.92)}
.srow:has(.stepper) .step-btn:first-child{background:#FEF2F2;color:#B91C1C;border-left:1px solid var(--bdr2)}
.srow:has(.stepper) .step-btn:last-child{background:#F0FDF4;color:#15803D}
.srow:has(.stepper) .step-btn:disabled{opacity:.35;filter:saturate(0)}
.step-btn.step-press svg{animation:pop .25s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.fi{animation:fi .25s ease}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes notifIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes notifOut{to{opacity:0;transform:translateX(-50%) translateY(10px)}}
.id,.ic{width:18px;height:18px;flex-shrink:0;color:var(--t4)}
.ic{stroke-width:2.5;display:none}
.ok{background:#DCFCE7!important}
.ok svg,.ok span{color:#34D399!important}
.ok .id{display:none!important}.ok .ic{display:inline!important}
.ok polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .35s ease .08s forwards}
.rs-fb{background:#FEF9C3!important;color:#CA8A04!important}
.rs-fb svg{color:#CA8A04!important;animation:spin .4s ease}
.rs-fb span{color:#CA8A04!important}
.regen{background:#FEF9C3!important}
.regen svg{color:#CA8A04!important;animation:spin .4s ease}
.regen span{color:#CA8A04!important}
.srow.rs-fb .slbl svg{animation:spin .4s ease;color:#CA8A04}
.srow.rs-fb .slbl span{color:#CA8A04}
.srow.rs-fb .step-btn,.srow.rs-fb .step-btn svg{animation:none!important;color:inherit!important}
.srow.rs-fb .step-btn:first-child{background:#FEF2F2!important;color:#B91C1C!important}
.srow.rs-fb .step-btn:last-child{background:#F0FDF4!important;color:#15803D!important}
.rs-warn{background:#FEE2E2!important;color:#C41E3A!important}
.rs-warn svg{color:#C41E3A!important}
.rs-warn .id{color:#C41E3A!important;animation:spin .4s ease}
.rs-warn span{color:#C41E3A!important}
.ps-fb{background:#DBEAFE!important}
.ps-fb svg{color:#60A5FA!important}
.ps-fb .ic,.ps-fb span{color:#60A5FA!important}
.ps-fb .id{display:none!important}.ps-fb .ic{display:inline!important}
.ps-fb polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .35s ease .08s forwards}
.dl-fb{background:#EDE9FE!important}
.dl-fb .ic,.dl-fb span{color:#A78BFA!important}
.dl-fb .id{display:none!important}.dl-fb .ic{display:inline!important}
.dl-fb polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .35s ease .08s forwards}
.err-fb{background:#FEE2E2!important}
.err-fb svg,.err-fb span{color:#C41E3A!important}
.ld{background:#DBEAFE!important}
.ld svg{animation:pulse 1s ease-in-out infinite;color:#60A5FA!important}
.ld span{color:#60A5FA!important}
html[data-theme="dark"] .ok{background:#1A3A2A!important;color:#34D399!important;border-color:#2D5A3E!important}
html[data-theme="dark"] .ok svg,html[data-theme="dark"] .ok .ic,html[data-theme="dark"] .ok span{color:#34D399!important}
html[data-theme="dark"] .rs-fb{background:#3A3524!important;color:#FACC15!important}
html[data-theme="dark"] .rs-fb svg,html[data-theme="dark"] .rs-fb .id,html[data-theme="dark"] .rs-fb span{color:#FACC15!important}
html[data-theme="dark"] .regen{background:#3A3524!important;color:#FACC15!important}
html[data-theme="dark"] .regen svg,html[data-theme="dark"] .regen span{color:#FACC15!important}
html[data-theme="dark"] .srow.rs-fb{background:#3A3524!important}
html[data-theme="dark"] .srow.rs-fb .slbl svg,html[data-theme="dark"] .srow.rs-fb .slbl span{color:#FACC15}
html[data-theme="dark"] .srow:has(.stepper) .step-btn:first-child{background:#3B1C1C;color:#FCA5A5;border-left-color:var(--bdr2)}
html[data-theme="dark"] .srow:has(.stepper) .step-btn:last-child{background:#1A3A2A;color:#86EFAC}
html[data-theme="dark"] .srow.rs-fb .step-btn:first-child{background:#3B1C1C!important;color:#FCA5A5!important}
html[data-theme="dark"] .srow.rs-fb .step-btn:last-child{background:#1A3A2A!important;color:#86EFAC!important}
html[data-theme="dark"] .rs-warn{background:#3A2020!important;color:#F87171!important}
html[data-theme="dark"] .rs-warn svg,html[data-theme="dark"] .rs-warn .id,html[data-theme="dark"] .rs-warn span{color:#F87171!important}
html[data-theme="dark"] .ps-fb{background:#1E3A5F!important;color:#93C5FD!important}
html[data-theme="dark"] .ps-fb svg,html[data-theme="dark"] .ps-fb .ic,html[data-theme="dark"] .ps-fb span{color:#93C5FD!important}
html[data-theme="dark"] .dl-fb{background:#2D2040!important;color:#C4B5FD!important}
html[data-theme="dark"] .dl-fb svg,html[data-theme="dark"] .dl-fb .ic,html[data-theme="dark"] .dl-fb span{color:#C4B5FD!important}
html[data-theme="dark"] .err-fb{background:#3A2020!important}
html[data-theme="dark"] .err-fb svg,html[data-theme="dark"] .err-fb span{color:#F87171!important}
html[data-theme="dark"] .ld{background:#1E3A5F!important}
html[data-theme="dark"] .ld svg,html[data-theme="dark"] .ld .id{color:#93C5FD!important}
html[data-theme="sepia"] .ok{background:#E8E0CE!important;color:#2D7D46!important;border-color:#DDD4C0!important}
html[data-theme="sepia"] .ok svg,html[data-theme="sepia"] .ok .ic,html[data-theme="sepia"] .ok span{color:#2D7D46!important}
html[data-theme="sepia"] .rs-fb{background:#EDE5C0!important;color:#A67B5B!important}
html[data-theme="sepia"] .rs-fb svg,html[data-theme="sepia"] .rs-fb .id,html[data-theme="sepia"] .rs-fb span{color:#A67B5B!important}
html[data-theme="sepia"] .regen{background:#EDE5C0!important;color:#A67B5B!important}
html[data-theme="sepia"] .regen svg,html[data-theme="sepia"] .regen span{color:#A67B5B!important}
html[data-theme="sepia"] .srow.rs-fb{background:#EDE5C0!important}
html[data-theme="sepia"] .srow.rs-fb .slbl svg,html[data-theme="sepia"] .srow.rs-fb .slbl span{color:#A67B5B}
html[data-theme="sepia"] .srow:has(.stepper) .step-btn:first-child{background:#E8D5C8;color:#9A3412;border-left-color:var(--bdr2)}
html[data-theme="sepia"] .srow:has(.stepper) .step-btn:last-child{background:#D5E0C8;color:#3F6212}
html[data-theme="sepia"] .srow.rs-fb .step-btn:first-child{background:#E8D5C8!important;color:#9A3412!important}
html[data-theme="sepia"] .srow.rs-fb .step-btn:last-child{background:#D5E0C8!important;color:#3F6212!important}
html[data-theme="sepia"] .rs-warn{background:#F0DDD0!important;color:#C41E3A!important}
html[data-theme="sepia"] .rs-warn svg,html[data-theme="sepia"] .rs-warn .id,html[data-theme="sepia"] .rs-warn span{color:#C41E3A!important}
html[data-theme="sepia"] .ps-fb{background:#D6D0C0!important;color:#4A7AA5!important}
html[data-theme="sepia"] .ps-fb svg,html[data-theme="sepia"] .ps-fb .ic,html[data-theme="sepia"] .ps-fb span{color:#4A7AA5!important}
html[data-theme="sepia"] .dl-fb{background:#DED5E0!important;color:#7C5BAD!important}
html[data-theme="sepia"] .dl-fb svg,html[data-theme="sepia"] .dl-fb .ic,html[data-theme="sepia"] .dl-fb span{color:#7C5BAD!important}
html[data-theme="sepia"] .err-fb{background:#F0DDD0!important}
html[data-theme="sepia"] .err-fb svg,html[data-theme="sepia"] .err-fb span{color:#C41E3A!important}
html[data-theme="sepia"] .ld{background:#D6D0C0!important}
html[data-theme="sepia"] .ld svg,html[data-theme="sepia"] .ld .id{color:#4A7AA5!important}
:focus-visible{outline:2px solid #3B82F6;outline-offset:3px}
::selection{background:rgba(72,72,74,.15)}
button:focus:not(:focus-visible){outline:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(prefers-reduced-transparency:reduce){
  .tabs{background:rgba(255,255,255,.82)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html[data-theme="sepia"] .tabs{background:rgba(245,237,218,.82)!important}
  html[data-theme="dark"] .tabs{background:rgba(44,44,46,.88)!important}
}
@media(max-width:390px){.tabs{max-width:calc(100vw - 20px)}}
.fx-bottom{bottom:0;left:50%;transform:translateX(-50%);position:fixed;z-index:10;padding:0 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:center}
.notif{z-index:9;padding:0 20px calc(86px + env(safe-area-inset-bottom,0px));animation:notifIn .25s ease;cursor:pointer}
.notif-pill{display:flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:var(--rr);font:500 .875rem/1 var(--font);white-space:nowrap;box-shadow:var(--shadow2);border:1px solid rgba(255,255,255,.45)}
.notif-pill.nf-ok{background:#DCFCE7;color:#16A34A}
.notif-pill.nf-err{background:#FEE2E2;color:#C41E3A}
.notif-pill.nf-warn{background:#FEF9C3;color:#A16207}
html[data-theme="dark"] .notif-pill{border-color:rgba(255,255,255,.12)}
html[data-theme="dark"] .notif-pill.nf-ok{background:#1A3A2A;color:#34D399}
html[data-theme="dark"] .notif-pill.nf-err{background:#3A2020;color:#F87171}
html[data-theme="dark"] .notif-pill.nf-warn{background:#3A3520;color:#FBBF24}
html[data-theme="sepia"] .notif-pill{border-color:rgba(255,250,242,.42)}
html[data-theme="sepia"] .notif-pill.nf-ok{background:#E8E0CE;color:#2D7D46}
html[data-theme="sepia"] .notif-pill.nf-err{background:#F0DDD0;color:#C41E3A}
html[data-theme="sepia"] .notif-pill.nf-warn{background:#EDE5C8;color:#92400E}
.notif-pill:active{transform:scale(.95);opacity:.8}
.search-wrap{position:relative;margin-bottom:14px;--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")}
html[data-theme="sepia"] .search-wrap{--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AB9B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")}
html[data-theme="dark"] .search-wrap{--si:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E")}
.search-wrap input{width:100%;padding:12px 36px 12px 42px;border:1px solid var(--bdr2);border-radius:50px;font:400 .9375rem/1 var(--font);color:var(--t1);background:var(--card) var(--si) 14px center/18px no-repeat;box-shadow:var(--shadow);outline:none;transition:border-color .15s;box-sizing:border-box}
.search-wrap input:focus-visible{border-color:var(--t4)}
.search-x{display:none;position:absolute;right:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:none;background:var(--bdr);color:var(--t3);cursor:pointer;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s}
.search-x::before,.search-x::after{content:'';position:absolute;width:10px;height:1.5px;background:currentColor;border-radius:1px}
.search-x::before{transform:rotate(45deg)}
.search-x::after{transform:rotate(-45deg)}