:root{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#30273b;background:#fff7fa;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at top left,#ffe4ed,transparent 35%),linear-gradient(135deg,#fff8fa,#faf7ff);min-height:100vh}
a{color:#a52761;text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit}
button,.btn{background:#b52e70;color:#fff;border:0;padding:11px 17px;border-radius:12px;cursor:pointer;font-weight:650}
button:hover,.btn:hover{background:#8e2057;text-decoration:none}
button:disabled{opacity:.6;cursor:not-allowed}
input:not([type=checkbox]),select,textarea{width:100%;padding:11px 12px;border-radius:12px;border:1px solid #dcd1dd;background:white;color:#31283c;font-size:16px}
input[type=file]{padding:9px}
textarea{min-height:95px;resize:vertical}
label{display:block;font-size:.85rem;font-weight:650;margin:10px 0 5px}
.shell{max-width:1190px;margin:0 auto;padding:22px 18px 48px}
.header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
.brand{display:flex;gap:11px;align-items:center;font-weight:850;letter-spacing:.3px;font-size:1.14rem}
.brand-icon{width:43px;height:43px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(140deg,#e94287,#792c91);color:white;font-size:24px;box-shadow:0 7px 18px #e9428730}
.muted{color:#756b7d}
.sm{font-size:.83rem}
.layout{display:grid;grid-template-columns:225px minmax(0,1fr);gap:19px}
.panel,.sidebar{background:#fff;border:1px solid #eee5ef;border-radius:22px;box-shadow:0 10px 32px #5b2e4d0d}
.sidebar{padding:16px;height:max-content;position:sticky;top:15px}
.nav a{display:flex;gap:9px;padding:12px;border-radius:13px;color:#4e4254;margin-bottom:4px;font-weight:650}
.nav a.active,.nav a:hover{background:#fde4ef;color:#9a1958;text-decoration:none}
.content{min-width:0}
.panel{padding:22px;margin-bottom:17px}
.hero{background:linear-gradient(120deg,#972f6f,#613a91);color:#fff;position:relative;overflow:hidden}
.hero p{color:#ffe7f2;max-width:530px}
.hero h1{margin:0;font-size:clamp(1.4rem,3vw,2rem)}
h1,h2,h3{letter-spacing:-.03em}
h2{font-size:1.3rem;margin:0 0 10px}
h3{font-size:1.04rem;margin:0 0 9px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.triple{grid-template-columns:repeat(3,minmax(0,1fr))}
.tiny{font-size:.8rem}
.tag{display:inline-block;background:#fde9f2;color:#98235b;border-radius:40px;padding:5px 10px;font-size:.76rem;font-weight:750}
.tag.gray{background:#eeecf3;color:#62566b}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{border:1px solid #eee5f0;border-radius:16px;padding:16px;background:#fff}
.card p{margin:6px 0 0}
.btn-light{background:#f9eaf1;color:#8e2359}
.btn-light:hover{background:#f5d7e5}
.btn-sm{padding:8px 12px;font-size:.83rem}
.inline{display:inline}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.flash{border-radius:13px;padding:12px 15px;margin-bottom:15px;font-weight:600;background:#e6f8ee;color:#175f38}
.flash.error{background:#fff0ed;color:#973c35}
.auth{max-width:470px;margin:7vh auto;padding:31px}
.auth h1{text-align:center;margin:8px 0 9px}
.auth .brand{justify-content:center}
.auth-tabs{display:flex;background:#f8e8f0;border-radius:13px;padding:5px;margin:20px 0}
.auth-tabs a{flex:1;text-align:center;padding:8px;border-radius:9px}
.auth-tabs a.active{background:white;font-weight:750;box-shadow:0 2px 8px #00000012}
.subtext{color:#756b7d;font-size:.82rem;line-height:1.55}
.preview{background:#211b32;aspect-ratio:3/4;border-radius:20px;max-width:248px;margin:auto;display:grid;place-items:center;position:relative;overflow:hidden;color:white}
.preview img,.preview video{position:absolute;width:100%;height:100%;object-fit:cover}
.preview .overlay{position:absolute;z-index:2;text-align:center;bottom:0;left:0;right:0;padding:20px 12px;background:linear-gradient(transparent,#271123b5);color:white}
.petal{position:absolute;top:-35px;font-size:22px;z-index:3;animation:fall linear infinite;pointer-events:none;text-shadow:0 2px 5px #fff8}
@keyframes fall{0%{transform:translateY(-50px) rotate(0);opacity:0}
7%{opacity:.97}
90%{opacity:.95}
100%{transform:translateY(440px) rotate(330deg);opacity:0}
}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
.media{overflow:hidden;border-radius:16px;border:1px solid #ebdfed;background:#fff}
.media .media-visual{position:relative;overflow:hidden;background:#22172a}
.media img,.media video{width:100%;aspect-ratio:4/3;object-fit:cover;background:#22172a;display:block}
.media .media-info{padding:11px}
.media .media-info strong{font-size:.85rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.media .media-info small{font-size:.73rem;color:#766d7b}
.mood-pick{display:flex;flex-wrap:wrap;gap:9px}
.mood-pick button{background:#fff1f7;color:#8f2859;border:1px solid #f6d1e1}
.listrow{border-bottom:1px solid #f0eaf1;padding:12px 0}
.listrow:last-child{border:0}
.skin{position:relative;overflow:hidden;min-height:180px}
.skin .icon{font-size:2.5rem}
.badgeprice{position:absolute;right:13px;top:13px}
.skin.active{outline:2px solid #d13e82}
.help{border-left:3px solid #cc629b;background:#fff6fa;padding:11px 13px;border-radius:4px 11px 11px 4px;margin-top:13px;color:#695769;font-size:.83rem}
.footer{font-size:.75rem;color:#857b89;text-align:center;margin-top:20px}
.nowrap{white-space:nowrap}
.copycode{font-family:ui-monospace,Consolas,monospace;background:#f8f0f7;border-radius:7px;padding:5px 8px;word-break:break-all}
.radio{display:flex;align-items:center;gap:9px;margin:9px 0}
.radio input{width:auto}
.right{margin-left:auto}
 @media(max-width:800px){.layout{grid-template-columns:1fr}
.sidebar{position:static}
.nav{display:flex;overflow-x:auto;gap:3px}
.nav a{white-space:nowrap}
.shell{padding:13px}
.panel{padding:17px}
.triple{grid-template-columns:1fr 1fr}
.cards{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.grid,.triple,.cards{grid-template-columns:1fr}
.header{align-items:flex-start}
.brand{font-size:.98rem}
.auth{margin:2vh 10px;padding:20px}
.preview{max-width:245px}
}

/* ===== KREALY LOVE CONNECT | UI PRO ETAPA 1 ===== */
:root{--pink:#dd4c86;--ink:#2b2434;--muted:#756b82;--panel:#fff;--radius:20px;color-scheme:light}
body{background:radial-gradient(circle at 8% 8%,#ffdfec 0,transparent 27%),radial-gradient(circle at 92% 9%,#e9ddff 0,transparent 25%),linear-gradient(125deg,#fff8fb,#f8f7ff);}
.shell{max-width:1310px;margin:0 auto;padding:23px clamp(13px,3vw,35px) 55px;}
.panel,.sidebar{border-color:#eee8f3;box-shadow:0 18px 45px rgba(44,27,75,.065);transition:box-shadow .2s ease;}
.panel:hover{box-shadow:0 24px 55px rgba(44,27,75,.095);}
.header{background:#ffffffcc;backdrop-filter:blur(16px);padding:12px 18px;border-radius:19px;border:1px solid #eee4ee;box-shadow:0 7px 30px #54264b0c;margin-bottom:21px;}
.brand{color:#48203c}.brand-icon{border-radius:15px;background:linear-gradient(135deg,#ff759b,#a14ab2);box-shadow:0 8px 22px #c53c7b45;}
.sidebar{padding:18px;top:20px;}
.nav a{transition:transform .17s ease,background .17s ease;}
.nav a:hover{transform:translateX(3px);}
.nav a.active{background:linear-gradient(115deg,#fee2ed,#f1e1ff);color:#8e235c;}
.hero{background:linear-gradient(120deg,#bd397a 0%,#9c3d90 47%,#543e89 100%);min-height:150px;display:flex;flex-direction:column;justify-content:center;}
.hero:after{content:'♡';position:absolute;right:15px;bottom:-66px;font-size:240px;color:#ffffff10;line-height:1;pointer-events:none;}
.card{transition:transform .19s ease,box-shadow .19s ease;}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 24px #6a2c5a17;text-decoration:none;}
button,.btn,.btn-light{transition:transform .17s ease,filter .17s ease;}
button:hover,.btn:hover{transform:translateY(-1px);}
button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #eaa3d4;outline-offset:2px;}
.auth{margin:6vh auto;padding:35px;max-width:465px;}
.auth .brand{font-size:1.22rem;}
.preview{box-shadow:0 20px 36px #29152d25;border:3px solid #342138;}
.flash{animation:flashIn .25s ease;}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.preview.is-yellow .petal{display:block}
.media video{width:100%}
.label-extra{font-size:.8rem;color:#7a6880}
.form-submit-loading{opacity:.65;pointer-events:none;cursor:wait;}
.auth-stamp{margin:15px 0 0;text-align:center;font-size:.8rem;color:#796d84;}
@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{position:static}.nav{display:flex;overflow-x:auto;gap:6px;white-space:nowrap;padding-bottom:3px}.nav a{margin-bottom:0;padding:10px 12px}.sidebar>.help{display:none}.grid.triple{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.shell{padding:10px 10px 32px}.header{padding:10px 11px}.panel{padding:17px}.grid,.grid.triple,.cards{grid-template-columns:1fr}.actions .sm{display:none}.auth{margin:5vh 12px;padding:21px}.hero{min-height:165px}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.preview{max-width:245px}.panel,.sidebar{border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Login editorial: pantalla dividida y vista conceptual del dispositivo */
.auth-screen{background:#fdf9fc;margin:0;}
.auth-stage{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(420px,.88fr)}
.auth-story{position:relative;overflow:hidden;background:radial-gradient(circle at 74% 17%,#7f4c94 0,transparent 34%),linear-gradient(145deg,#2c193d 0%,#512449 53%,#a6346e 110%);color:white;padding:clamp(25px,3.7vw,54px);display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.auth-story:before{content:'♡';position:absolute;top:7%;right:-7%;font-size:400px;color:#fff1;line-height:1;z-index:-1;transform:rotate(-20deg)}
.brand-white{color:#fff}.brand-white small{letter-spacing:.18em;font-size:.6rem;font-weight:650;color:#f3cbdf}
.auth-story-content{width:min(100%,600px);margin:auto;position:relative;padding:40px 0 15px}
.auth-eyebrow{letter-spacing:.18em;font-weight:800;color:#f9b6d1;font-size:.77rem}
.auth-story h1{font-size:clamp(2.2rem,4vw,4.5rem);line-height:1.09;letter-spacing:-.055em;margin:18px 0 16px;max-width:590px}
.auth-story h1 em{font-style:normal;color:#ffb5d2}
.auth-story p{max-width:525px;font-size:1.05rem;line-height:1.7;color:#ebd5e9}
.auth-device{margin:26px auto 8px;display:flex;justify-content:center;filter:drop-shadow(0 22px 30px #170b2877)}
.auth-device-display{width:235px;min-height:265px;border:8px solid #181322;border-radius:26px;background:radial-gradient(circle at 65% 12%,#c85b9e,#50317a 45%,#241c4b);display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;gap:7px;box-shadow:inset 0 0 0 2px #ffffff19}
.auth-device-top{position:absolute;top:13px;left:13px;font-size:.6rem;letter-spacing:.1em;font-weight:800;color:#ffd8e6}
.auth-device-heart{font-size:80px;animation:loveBeat 2.8s ease-in-out infinite}
.auth-device-display>strong{font-size:1.05rem}.auth-device-display>small{font-size:.68rem;color:#f9cfde}
.auth-device-footer{position:absolute;bottom:8px;width:100%;padding:10px;display:flex;justify-content:space-between;font-size:.53rem;color:#fce7f0}
@keyframes loveBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.auth-features{display:flex;gap:10px;flex-wrap:wrap}.auth-features span{padding:8px 11px;border:1px solid #ffffff39;border-radius:100px;font-size:.76rem;color:#fbe9f1;background:#ffffff14}
.auth-right{padding:28px;display:flex;align-items:center;justify-content:center}
.auth-form-container{max-width:420px;width:100%}
.auth-pill{display:inline-flex;padding:9px 13px;background:#fce5ef;border-radius:50px;color:#a32b67;font-size:.72rem;font-weight:800;letter-spacing:.09em}
.auth-right h2{font-size:clamp(1.9rem,2.9vw,2.55rem);letter-spacing:-.06em;margin:16px 0 7px}
.auth-right .muted{line-height:1.6}
.auth-right form label{margin-top:15px}
.auth-right form input{min-height:48px}
.auth-right .auth-submit{width:100%;padding:15px;margin-top:24px;background:linear-gradient(125deg,#df4f89,#a83384);border-radius:14px;display:flex;justify-content:center;gap:12px;align-items:center}
.auth-right .auth-submit:hover{filter:brightness(1.05)}
.auth-note{background:#fcf3f8;border:1px solid #f5ddea;border-radius:13px;color:#79697c;font-size:.78rem;line-height:1.6;padding:12px;margin-top:21px}
.auth-copyright{text-align:center;color:#9e93a2;font-size:.75rem;margin-top:25px}
.auth-mobile-brand{display:none;font-weight:900;color:#982b68;margin-bottom:23px}
@media(max-width:900px){.auth-stage{grid-template-columns:1fr}.auth-story{min-height:380px;padding:25px}.auth-story-content{padding:23px 0 5px;display:grid;grid-template-columns:1fr 160px;column-gap:12px;align-items:center}.auth-story h1{font-size:2.5rem;grid-column:1;grid-row:2}.auth-story p{grid-column:1;grid-row:3}.auth-eyebrow{grid-column:1;grid-row:1}.auth-device{grid-column:2;grid-row:1/4}.auth-device-display{width:150px;min-height:175px;border-radius:17px;border-width:5px}.auth-device-heart{font-size:45px}.auth-device-display>small,.auth-device-footer{display:none}.auth-right{padding:40px 18px}}
@media(max-width:550px){.auth-story{min-height:190px;padding:17px 20px}.auth-story>.brand,.auth-features{display:none}.auth-story-content{padding:0;grid-template-columns:1fr 100px;margin:0}.auth-eyebrow{font-size:.58rem}.auth-story h1{font-size:1.55rem;margin:5px 0 4px}.auth-story p{font-size:.76rem;line-height:1.35;margin:0}.auth-device-display{width:92px;min-height:117px;border-width:4px;border-radius:13px}.auth-device-top{font-size:.4rem;left:5px;top:5px}.auth-device-heart{font-size:36px}.auth-device-display>strong{font-size:.6rem}.auth-right{padding:25px 17px 40px;align-items:flex-start}.auth-form-container{max-width:450px}.auth-right h2{font-size:1.85rem}.auth-mobile-brand{display:block}}

/* Confirmación centrada para operaciones de base de datos */
.confirm-modal{border:0;border-radius:22px;max-width:410px;width:min(90vw,410px);padding:0;box-shadow:0 28px 80px #29152945;color:#34253c}
.confirm-modal::backdrop{background:#1e1129a6;backdrop-filter:blur(3px)}
.confirm-inside{text-align:center;padding:28px}
.confirm-heart{display:grid;place-items:center;width:53px;height:53px;border-radius:18px;margin:auto;background:linear-gradient(140deg,#ff82a9,#b44891);color:white;font-size:30px}
.confirm-inside h3{font-size:1.32rem;margin:14px 0 10px}.confirm-inside p{color:#706475;line-height:1.55}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}



/* ================================================================
   KREALY LOVE CONNECT · MOBILE FIRST REFINEMENT · 2026-10-19
   Exclusively presentational: MVC forms, PHP and JS left untouched.
   ================================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video { max-width: 100%; }
input, select, textarea, button { max-width: 100%; }
.panel, .sidebar, .content, .grid > *, .cards > *, .media-grid > * { min-width: 0; }
.copycode, .help, .listrow { overflow-wrap: anywhere; }
.confirm-modal { max-height: min(88dvh, 680px); overflow-y: auto; }

@media (max-width: 900px) {
  .shell {
    width: 100%;
    max-width: 760px;
    padding: 14px 14px calc(36px + env(safe-area-inset-bottom, 0px));
    margin-inline: auto;
  }
  .header {
    padding: 13px 14px;
    margin-bottom: 13px;
    border-radius: 17px;
    gap: 9px;
  }
  .header .brand {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.18;
    gap: 9px;
  }
  .header .brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    flex: 0 0 42px;
    font-size: 23px;
  }
  .header .actions { flex: 0 0 auto; }
  .header .actions button { min-height: 42px; padding: 9px 14px; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sidebar {
    position: static;
    width: 100%;
    padding: 14px;
    border-radius: 19px;
    box-shadow: 0 9px 26px rgb(81 42 83 / 7%);
  }
  .sidebar > label { margin-bottom: 8px !important; font-size: .91rem; }
  .sidebar .tag { font-size: .77rem; }
  .sidebar > .help { display: none; }
  .nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px !important;
    padding: 0;
    overflow: visible;
    white-space: normal;
  }
  .nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.23;
    min-height: 52px;
    width: 100%;
    margin: 0;
    padding: 10px 5px;
    gap: 4px;
    border: 1px solid #f1e6ee;
    border-radius: 13px;
    background: #fffafd;
    color: #59475e;
    font-size: .83rem;
    font-weight: 750;
    box-shadow: 0 3px 9px rgba(73, 27, 61, .025);
    overflow-wrap: normal;
  }
  .nav a.active {
    border-color: #e6b7d1;
    background: linear-gradient(125deg, #ffe8f1, #f7e7ff);
    box-shadow: inset 0 0 0 1px #f7d7e9;
  }
  .nav a:hover { transform: none; }
  .content { width: 100%; }
  .panel { padding: 17px; margin-bottom: 12px; border-radius: 18px; }
  .panel h2 { font-size: 1.2rem; line-height: 1.26; margin-bottom: 10px; }
  .panel h3 { line-height: 1.28; }
  .panel p { line-height: 1.52; }
  .hero {
    min-height: 0;
    padding: 20px 18px;
    border-radius: 18px;
  }
  .hero h1 { font-size: clamp(1.32rem, 4.8vw, 1.72rem); line-height: 1.2; }
  .hero p { font-size: .91rem; line-height: 1.5; margin: 9px 0 0; max-width: 85%; }
  .hero:after { right: 7px; bottom: -38px; font-size: 155px; }
  .grid { gap: 12px; }
  .cards { gap: 9px; }
  .card { padding: 15px; min-height: 84px; }
  .card:hover { transform: none; }
  .preview { width: min(100%, 250px); max-width: 250px; border-radius: 21px; }
  .preview .overlay { padding-bottom: 20px; }
  .subtext, .label-extra { font-size: .85rem; line-height: 1.5; }
  .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .media-info { min-width: 0; }
  .media .media-info { padding: 10px; }
  .media .media-info strong { font-size: .83rem; }
  .media .media-info small { display: block; margin-top: 4px; }
  .media .media-info button { width: 100%; min-height: 42px; padding: 9px 4px; font-size: .77rem; }
  .mood-pick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .mood-pick form, .mood-pick button { width: 100%; }
  .mood-pick button { min-height: 51px; padding: 11px 8px; font-size: .93rem; white-space: normal; line-height: 1.25; }
  .skin { min-height: 164px; }
  .help { font-size: .87rem; line-height: 1.55; padding: 13px; }
  .listrow { line-height: 1.5; }
  .footer { font-size: .72rem; line-height: 1.55; margin-top: 21px; }
  input:not([type=checkbox]), select, textarea {
    min-height: 46px;
    font-size: 16px !important;
    line-height: 1.4;
  }
  textarea { min-height: 110px; }
  input[type="file"] { max-width: 100%; font-size: 16px !important; }
  .content form button { min-height: 44px; white-space: normal; }
  .confirm-inside { padding: 23px 18px; }
  .confirm-actions button { min-height: 46px; }
}

@media (max-width: 550px) {
  .shell { padding: 10px 10px calc(30px + env(safe-area-inset-bottom, 0px)); }
  .header { padding: 10px 11px; }
  .header .brand { font-size: .95rem; }
  .header .brand-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .header .actions .sm { display: none; }
  .header .actions button { padding: 9px 12px; }
  .sidebar { padding: 13px; }
  .nav { gap: 7px; margin-top: 13px !important; }
  .nav a { min-height: 52px; font-size: clamp(.76rem, 3.25vw, .84rem); padding: 9px 3px; }
  .panel { padding: 16px; }
  .hero { padding: 19px 16px; }
  .hero h1 { font-size: clamp(1.35rem, 5.6vw, 1.64rem); }
  .hero p { max-width: 94%; }
  .grid, .grid.triple { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .card { padding: 13px; }
  .card strong { display: block; font-size: .87rem; line-height: 1.3; }
  .card p { font-size: .77rem; }
  .preview { width: min(100%, 230px); max-width: 230px; }
  .skin { min-height: 154px; }
}

@media (max-width: 360px) {
  .shell { padding-inline: 8px; }
  .header .brand { font-size: .87rem; }
  .nav { gap: 5px; }
  .nav a { min-height: 49px; padding: 8px 2px; font-size: .73rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .mood-pick { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (pointer: coarse) {
  .nav a, button, .btn { -webkit-tap-highlight-color: transparent; }
  .nav a:active, button:active { filter: brightness(.96); }
}

/* Etapa 2B: vinculación fácil del cuadro ESP32 */
.pair-form {margin-top:15px}
.pair-controls {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.pair-controls input {width:100%;min-width:0;font-size:21px!important;font-weight:800;letter-spacing:.13em;text-align:center;text-transform:uppercase;border:2px solid #dfa2c3}
.pair-controls button {white-space:normal;min-height:48px;max-width:100%}
@media(max-width:700px) {
 .pair-controls {grid-template-columns:minmax(0,1fr)}
 .pair-controls button {width:100%;min-height:49px}
 .pair-controls input {font-size:20px!important}
}