/* ---- Kepla tools on a phone ----
   The same language as the transfer app: one dark ground, rounded cards,
   lime for the one thing to do next, segmented controls, 16px fields (so
   iOS never zooms), sentence-case labels. Loaded after each tool's own CSS,
   phones only. */
@media (max-width:767px){
  /* ground */
  html.kembed, html.kembed body{background:#0E0E10 !important;}
  html.kembed .ws-k{display:none !important;}
  html.kembed .ws-head{padding-top:4px !important;}
  .ws-h1, h1.ws-h1{font-size:26px !important; line-height:1.15 !important; letter-spacing:-.7px !important;}
  html.kembed .kapp-lede, html.kembed .kapp-proof, html.kembed .ws-sub, html.kembed .lede{display:none !important;}

  /* fields: 16px so a tap never zooms the page, filled, rounded */
  input[type=text], input[type=email], input[type=number], input[type=search], input[type=url], input:not([type]), select, textarea, .num, .txt2, .sel{font-size:16px !important;}
  .calc-in input.num, .calc-in input.txt2, .calc-in select, .calc-in textarea, .ws select.sel, .ws input.sel{height:48px !important; padding:0 14px !important; border:0 !important; border-radius:12px !important; background-color:#2A2A2E !important; box-shadow:none !important; color:#fff !important;}
  .calc-in textarea{height:auto !important; padding:12px 14px !important;}
  .calc-in select, .ws select.sel{-webkit-appearance:none; appearance:none; padding-right:36px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px 8px !important;}
  input[type=checkbox]{accent-color:#DFFF3F; width:20px !important; height:20px !important;}
  input[type=range]{accent-color:#DFFF3F;}

  /* buttons: lime for the action, filled grey for the rest, all rounded */
  .ws .btn-w, .btn-w, .calc .copybtn.gen, .calc-in .gen, #convertAll{border-radius:12px !important; background:#DFFF3F !important; color:#17171A !important; border:0 !important; box-shadow:none !important; font-weight:600 !important;}
  .ws .btn-w:hover, .btn-w:hover{background:#E8FF66 !important;}
  .ws .btn-o, .btn-o, .calc-out .copybtn{border-radius:12px !important; background:#2A2A2E !important; color:#fff !important; border:0 !important; box-shadow:none !important;}
  .ws .btn-g, .btn-g{border-radius:10px !important; color:rgba(235,235,245,.7) !important;}
  .ws .drop .row .btn-w, .ws .drop .row .btn-o{height:50px !important; font-size:16px !important;}
  #convertAll, .btn-w.big{height:52px !important; font-size:16px !important;}

  /* the drop area: a card, not a dashed box */
  .ws .drop input, .ws .drop .ico{outline:0;}
  .ws .drop, .drop{border:0 !important; border-radius:16px !important; background:#1C1C1F !important; box-shadow:none !important;}
  .ws .drop .ico, .drop .ico{border:0 !important; border-radius:12px !important; background:#2E2E33 !important;}
  .ws .drop .big{font-size:19px !important; letter-spacing:-.3px !important;}
  .ws .drop .sub{font-size:14px !important; color:rgba(235,235,245,.55) !important;}

  /* labels: quiet, sentence case */
  .fl, .kapp-opt .fl, .calc-out .calc-h, .tnext-k, .ws label.fl{text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; font-weight:400 !important; color:rgba(235,235,245,.55) !important;}
  .tnext-k{text-transform:lowercase !important;}
  .tnext-k::first-letter{text-transform:uppercase;}
  .calc-in .field > label{font-size:14px !important; color:rgba(235,235,245,.75) !important;}
  .hint{font-size:12.5px !important; color:rgba(235,235,245,.45) !important;}

  /* segmented controls, the iOS kind */
  .seg{display:flex !important; flex-wrap:wrap; gap:2px !important; padding:2px !important; border:0 !important; border-radius:10px !important; background:rgba(118,118,128,.24) !important; box-shadow:none !important;}
  .seg button{flex:1 1 auto; min-height:36px !important; height:auto !important; padding:6px 10px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:#fff !important; font-size:14px !important; font-weight:500 !important; box-shadow:none !important;}
  .seg button.on, .seg button[aria-pressed="true"]{background:#636366 !important; color:#fff !important; font-weight:600 !important; box-shadow:0 3px 8px rgba(0,0,0,.12) !important;}

  /* calculators and generators */
  .calc, #toolcard{background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;}
  html.kembed .calc{margin-top:14px !important;}
  .ws .drop{margin-top:16px !important;}
  .calc-in{border-radius:16px !important; background:#1C1C1F !important; box-shadow:none !important; padding:18px 16px !important;}
  .calc-out{border-radius:18px 18px 0 0 !important; background:rgba(28,28,31,.94) !important; box-shadow:0 -10px 30px rgba(0,0,0,.4) !important; border-top:0 !important;}
  .calc-out.gen, .calc-out.gen:not(.open){border-radius:16px !important; background:#1C1C1F !important; box-shadow:none !important;}
  .calc-out .calc-h::after{color:#DFFF3F !important; font-size:15px !important;}
  .calc-out .saveline .s-num{font-weight:700 !important; letter-spacing:-1px !important;}
  .calc-out .rows, .calc-out .rowline{border-color:rgba(255,255,255,.1) !important;}
  .calc-out .rowline{font-size:14px !important;}
  .calc-out .copybtn{height:48px !important; font-size:15px !important;}
  .calc-in .gen{height:50px !important; font-size:16px !important;}
  .calc-out .biocard, .calc-out .tagbox{border-radius:12px !important; background:#2A2A2E !important; box-shadow:none !important;}
  .calc-out .bar-track{border-radius:3px; overflow:hidden;}

  /* image tools after the files land (Resize, metadata, GPS, EXIF, HEIC) */
  .kapp{background:#0E0E10 !important;}
  .kapp-strip{background:rgba(14,14,16,.94) !important; border-bottom:.5px solid rgba(255,255,255,.1) !important;}
  html.kembed .kapp-lock{display:none !important;}
  .kapp-strip .btn-w{height:36px !important; padding:0 16px !important; border-radius:999px !important; font-size:15px !important;}
  .kapp-x{border-radius:999px !important; background:#2A2A2E !important; border:0 !important;}
  .kapp-tools{background:transparent !important; border:0 !important;}
  .kapp-opt{border:0 !important;}
  .kapp-qh{border:0 !important;}
  .kapp-list{padding:0 12px !important;}
  .kapp-row{margin:0 0 8px !important; border:0 !important; border-radius:12px !important; background:#1C1C1F !important; box-shadow:none !important;}
  .kapp-row.sel{box-shadow:inset 0 0 0 1.5px rgba(223,255,63,.6) !important;}
  .kapp-row .fn{font-size:15px !important; font-weight:500 !important;}
  .kapp-row .fs{font-size:12.5px !important;}
  .kapp .chips button{height:36px !important; border:0 !important; border-radius:999px !important; background:#2A2A2E !important; color:#fff !important; box-shadow:none !important; font-size:14px !important;}
  .kapp .chips button.on{background:rgba(223,255,63,.14) !important; color:#DFFF3F !important; box-shadow:inset 0 0 0 1px rgba(223,255,63,.5) !important;}
  .kapp .chips button span{color:rgba(235,235,245,.5) !important;}
  .kapp .chips button.on span{color:rgba(223,255,63,.7) !important;}
  .chip, .kapp-row .chip{border:0 !important; border-radius:999px !important; background:#2E2E33 !important; color:#fff !important; padding:4px 10px !important; height:auto !important;}
  .chip.bad{background:rgba(255,69,58,.16) !important; color:#FF6961 !important;}
  .kapp-track{border-radius:2px; overflow:hidden;}
  .kapp-status, .kapp-qf{display:none !important;}
  .kapp-sum b{letter-spacing:-.5px;}

  /* RAW to JPG */
  .ws-bar{border:0 !important;}
  .rcard{border:0 !important; border-radius:14px !important; overflow:hidden; background:#1C1C1F !important; box-shadow:none !important;}
  .rcard .ib{border-radius:10px !important;}
  .ws-set summary{border:0 !important; border-radius:12px !important; background:#1C1C1F !important;}
  .ws-set .panel{border:0 !important; border-radius:0 0 12px 12px !important; background:#1C1C1F !important;}
  .ws-go{background:rgba(14,14,16,.94) !important; border-top:.5px solid rgba(255,255,255,.1) !important;}

  /* White border */
  .bbtn{height:38px !important; border:0 !important; border-radius:10px !important; background:#2A2A2E !important; color:#fff !important; font-weight:500 !important; font-size:14px !important;}
  .bbtn.solid{background:#DFFF3F !important; color:#17171A !important; font-weight:600 !important;}
  .bbtn:disabled, .bbtn[disabled]{opacity:.4 !important;}
  .btop{border-bottom:.5px solid rgba(255,255,255,.1) !important; background:rgba(14,14,16,.94) !important;}
  .bapp-in{background:#0E0E10 !important;}
  .btabs{background:#0E0E10 !important; border-bottom:.5px solid rgba(255,255,255,.1) !important;}
  .bpresets button{height:34px !important; border:0 !important; border-radius:999px !important; background:#2A2A2E !important; color:#fff !important; font-size:14px !important;}
  .bpresets button.on{background:rgba(223,255,63,.14) !important; color:#DFFF3F !important; box-shadow:inset 0 0 0 1px rgba(223,255,63,.5) !important;}
  .bseg{border:0 !important; border-radius:10px !important; padding:2px !important; gap:2px !important; background:rgba(118,118,128,.24) !important;}
  .bseg button{border-radius:8px !important; color:#fff !important; font-size:13.5px !important; min-height:34px;}
  .bseg button.on{background:#636366 !important; color:#fff !important;}
  .bf{border:0 !important; border-radius:12px !important; background:#1C1C1F !important;}
  .bf.on{box-shadow:inset 0 0 0 1.5px #DFFF3F !important; background:rgba(223,255,63,.08) !important;}
  .bempty{gap:10px !important;}
  .bempty::after{content:"Choose photos"; margin-top:10px; display:inline-flex; align-items:center; height:48px; padding:0 28px; border-radius:12px; background:#DFFF3F; color:#17171A; font-size:16px; font-weight:600;}

  /* Text behind the photo */
  .tbdrop{border:0 !important; border-radius:16px !important; background:#1C1C1F !important;}
  .tbtop{border-bottom:.5px solid rgba(255,255,255,.1) !important; background:rgba(14,14,16,.94) !important;}
  html.kembed .tbtop-home, html.kembed .tbtop-t, html.kembed .tbtop-bar, html.kembed #tbClose{display:none !important;}
  html.kembed .tbtop{justify-content:flex-end !important;}
  html.kembed .tbtop-r{width:100%; justify-content:space-between;}
  .tbicon{border:0 !important; border-radius:10px !important; background:#2A2A2E !important; color:#fff !important;}
  .tbtop-save{height:38px !important; padding:0 16px !important; border-radius:10px !important;}
  .tbtop-new{height:38px !important; border-radius:10px !important;}
  .tbsec{border-bottom:.5px solid rgba(255,255,255,.1) !important;}
  .tbsech{font-size:15px !important;}
  .tbin{border:0 !important; border-radius:12px !important; background:#2A2A2E !important; font-size:16px !important;}
  .tbadd{border:0 !important; border-radius:12px !important; background:#2A2A2E !important; color:#fff !important; font-size:14.5px !important;}
  .tbpresets button, .tbpre{border:0 !important; border-radius:999px !important; background:#2A2A2E !important; color:#fff !important; font-size:14px !important; min-height:34px;}
  .tbpresets button.on, .tbpre.on{background:rgba(223,255,63,.14) !important; color:#DFFF3F !important;}
  .tbseg{border:0 !important; border-radius:10px !important; padding:2px !important; gap:2px !important; background:rgba(118,118,128,.24) !important;}
  .tbseg button{border:0 !important; border-radius:8px !important; background:transparent !important; color:#fff !important;}
  .tbseg button.on{background:#636366 !important; color:#fff !important;}
  .tbpanel .btn-o, .tblayers button{border-radius:12px !important;}
  .tbrow > *{border-radius:12px;}

  /* what next, and the rating */
  .tnext{border:0 !important;}
  .tnext-a{border:0 !important; border-radius:12px !important; background:#1C1C1F !important; margin-top:8px !important; box-shadow:none !important;}
  #ratebox > div{border-radius:16px !important;}
  .toast{border-radius:12px !important;}
}

/* ---- premium pass: the first screen is one idea and one button; the app
   screen is a settings card, the files, and one action at the thumb ---- */
@media (max-width:767px){
  /* first screen inside the transfer app: centred, quiet, the action pinned low */
  html.kembed .kapp-hero .drop, html.kembed .ws:not(.has) .drop{text-align:center;}
  html.kembed .kapp-hero{display:flex; flex-direction:column; min-height:calc(100vh - 24px); min-height:calc(100dvh - 24px); padding-top:28px !important; box-sizing:border-box;}
  html.kembed .kapp-hero .ws-h1, html.kembed .ws:not(.has) .ws-h1{max-width:16ch; margin-left:0 !important; margin-right:0 !important; text-align:left; font-size:30px !important; letter-spacing:-1px !important;}
  html.kembed .ws:not(.has) .ws-head{padding-top:28px !important;}
  html.kembed .ws .drop, html.kembed .kapp-hero .drop{flex:1 1 auto; justify-content:center !important; align-items:center !important; text-align:center !important; background:transparent !important; padding:20px 0 0 !important; margin-top:0 !important;}
  html.kembed .ws .drop .ico{width:64px !important; height:64px !important; margin:0 auto 20px !important; border-radius:50% !important; background:#1C1C1F !important; color:#fff !important; box-shadow:none !important;}
  html.kembed .ws .drop .ico svg{width:30px !important; height:30px !important;}
  html.kembed .ws .drop .big{font-size:21px !important; font-weight:600 !important; max-width:20ch; margin:0 auto;}
  html.kembed .ws .drop .sub{display:none !important;}
  html.kembed .ws .drop, html.kembed .kapp-hero .drop{width:100% !important; max-width:none !important; align-self:stretch !important; box-sizing:border-box;}
  html.kembed .ws:not(.has) .drop:not(:has(.ico)) .big::before{content:""; display:block; width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:#1C1C1F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0-4.5 4.5M12 3l4.5 4.5M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / 28px 28px no-repeat;}
  html.kembed .ws .drop .big::after{content:"Private. Nothing leaves your phone."; display:block; margin-top:8px; font-size:15px; font-weight:400; letter-spacing:0; color:rgba(235,235,245,.5);}
  html.kembed .ws:not(.has){display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; box-sizing:border-box; padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;}
  html.kembed .ws:not(.has) .ws-body, html.kembed .ws:not(.has) .ws-steps{display:none !important;}
  html.kembed .ws:not(.has) .drop{display:flex !important; flex-direction:column !important;}
  html.kembed .ws .drop .ico, html.kembed .ws:not(.has) .drop .big{margin-top:auto !important;}
  html.kembed .ws:not(.has) .drop .ico ~ .big{margin-top:0 !important;}
  /* the primary sits at the thumb, the sample is a quiet line above it */
  html.kembed .ws .drop .row{position:static; width:100%; align-self:stretch !important; box-sizing:border-box; display:flex !important; flex-direction:column-reverse !important; align-items:stretch !important; gap:6px !important; margin:auto 0 0 !important;}
  html.kembed .ws .drop .row .btn-w{width:100% !important; height:54px !important; border-radius:14px !important; font-size:17px !important; justify-content:center;}
  html.kembed .ws .drop .row .btn-o, html.kembed .ws .drop .row .btn-g{width:100% !important; height:40px !important; background:transparent !important; color:rgba(235,235,245,.6) !important; font-size:15px !important; font-weight:500 !important; justify-content:center;}
  html.kembed .ws .drop .row #folderBtn{display:none !important;}
  html.kembed .kapp-hero{width:100% !important; margin:0 !important; flex:1 1 auto;}
  html.kembed .kapp-hero{padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important;}
  html.kembed body > div:has(#ratebox), html.kembed .tnext{background:transparent !important; border:0 !important;}

  /* Text behind the photo: the same first screen */
  html.kembed .tbdrop:not([hidden]){display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start; min-height:calc(100vh - 44px); min-height:calc(100dvh - 44px); box-sizing:border-box; padding:28px 0 calc(16px + env(safe-area-inset-bottom)) !important; background:transparent !important; text-align:center;}
  html.kembed div:has(> .tbwrap), html.kembed div:has(> div > .tbwrap), html.kembed .tbwrap{background:transparent !important;}
  html.kembed .tbdropico{display:flex !important; align-items:center; justify-content:center; order:1; width:64px !important; height:64px !important; margin:auto auto 20px !important; border-radius:50% !important; background:#1C1C1F !important; color:#fff !important; box-shadow:none !important;}
  html.kembed .tbdroph{order:2; font-size:21px !important; font-weight:600 !important; max-width:18ch;}
  html.kembed .tbdrops{display:none !important;}
  html.kembed .tbdroph::after{content:"Private. Nothing leaves your phone."; display:block; margin-top:8px; font-size:15px; font-weight:400; letter-spacing:0; color:rgba(235,235,245,.5);}
  html.kembed .tbdropb{order:4; width:100%; margin-top:auto !important;}
  html.kembed .tbdropb .btn-w{width:100% !important; height:54px !important; border-radius:14px !important; font-size:17px !important; justify-content:center;}

  /* the app screen: one settings card */
  .kapp{grid-template-rows:auto auto minmax(0,1fr) auto !important;}
  .kapp-strip{height:52px !important; padding:0 12px 0 16px !important; justify-content:flex-end;}
  .kapp-tools{margin:12px 16px 0 !important; padding:0 !important; border-radius:14px !important; background:#1C1C1F !important; overflow:hidden;}
  .kapp-opt{position:relative; width:100%; box-sizing:border-box; display:flex !important; align-items:center !important; gap:12px !important; min-height:50px; margin:0 !important; padding:6px 16px !important; flex-wrap:wrap;}
  .kapp-opt + .kapp-opt::before{content:""; position:absolute; left:16px; right:0; top:0; height:.5px; background:rgba(255,255,255,.1);}
  .kapp-opt .fl, .kapp-opt > label:not(.chk){flex:0 0 76px; margin:0 !important; font-size:15px !important; color:#fff !important;}
  .kapp-opt .hint{display:none !important;}
  .kapp-opt:not(:has(> :not(.hint))), .kapp-opt:has(> .hint:only-child){display:none !important;}
  .kapp-sum{border-top:0 !important;}
  .kapp-tools:has(.kapp-opt label, .kapp-opt .seg, .kapp-opt .chips, .kapp-opt select) .kapp-sum{border-top:.5px solid rgba(255,255,255,.1) !important;}
  .kapp-opt:has(label.chk) .fl{display:none !important;}
  .kapp-opt label.chk{flex:1 1 auto; width:100%; display:flex !important; flex-direction:row-reverse; justify-content:space-between; align-items:center; gap:12px; min-height:38px; font-size:15px !important; color:#fff !important;}
  .kapp-opt .seg{flex:0 1 auto;}
  .kapp-opt .chips{flex:1 1 0; min-width:0; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px 0;}
  .kapp-opt .chips::-webkit-scrollbar{display:none;}
  .kapp-opt .chips button{flex:none;}
  .kapp-sum{order:99; display:flex !important; align-items:baseline; gap:8px; width:100%; margin:0 !important; padding:14px 16px 12px !important; box-sizing:border-box;}
  .kapp-sum b{font-size:22px !important; font-weight:700 !important;}
  .kapp-sum span{font-size:13.5px !important; color:rgba(235,235,245,.55) !important;}

  /* iOS switches for the yes/no settings */
  .kapp-opt input[type=checkbox], .ws-set input[type=checkbox], .calc-in input[type=checkbox]{-webkit-appearance:none; appearance:none; flex:none; position:relative; width:51px !important; height:31px !important; margin:0 !important; border-radius:999px; background:#39393D; cursor:pointer; transition:background .2s ease;}
  .kapp-opt input[type=checkbox]::after, .ws-set input[type=checkbox]::after, .calc-in input[type=checkbox]::after{content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition:transform .22s cubic-bezier(.2,.7,.2,1);}
  .kapp-opt input[type=checkbox]:checked, .ws-set input[type=checkbox]:checked, .calc-in input[type=checkbox]:checked{background:#DFFF3F;}
  .kapp-opt input[type=checkbox]:checked::after, .ws-set input[type=checkbox]:checked::after, .calc-in input[type=checkbox]:checked::after{transform:translateX(20px);}

  /* files: a header line, roomy rows */
  .kapp-qh{padding:16px 20px 8px !important; min-height:0 !important;}
  .kapp-qh span{font-size:13px !important; color:rgba(235,235,245,.55) !important;}
  .kapp-qh .btn-g{height:auto !important; padding:4px 0 !important; background:none !important; color:rgba(235,235,245,.7) !important; font-size:15px !important;}
  .kapp-list{padding:0 16px calc(96px + env(safe-area-inset-bottom)) !important;}
  .kapp-row{padding:14px 16px !important; margin-bottom:10px !important;}
  .kapp-row.sel{box-shadow:none !important;}
  .kapp-track{height:3px !important; margin-top:10px !important; background:rgba(255,255,255,.08) !important;}
  .kapp-track i{background:#DFFF3F !important;}
  .kapp-row .rm{width:28px; height:28px; border-radius:50% !important; background:#2E2E33 !important; color:rgba(235,235,245,.7) !important;}

  /* the one action: full width, at the thumb */
  .kapp-strip #zipBtn, .kapp-strip .btn-w{position:fixed !important; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90; height:54px !important; border-radius:14px !important; justify-content:center; font-size:17px !important; box-shadow:none !important;}
  .kapp-strip #zipBtn:disabled, .kapp-strip .btn-w:disabled{background:#2A2A2E !important; color:rgba(235,235,245,.4) !important; opacity:1 !important;}
  .kapp::after{content:""; position:fixed; left:0; right:0; bottom:0; height:calc(86px + env(safe-area-inset-bottom)); background:#0E0E10; border-top:.5px solid rgba(255,255,255,.1); pointer-events:none; z-index:85;}

  .ws-set{box-shadow:none !important; background:#1C1C1F !important; border-radius:14px !important; overflow:hidden;}
  .ws-set summary{padding:15px 16px !important; font-size:15px !important; border-radius:0 !important; background:transparent !important;}
  .ws-set summary::after{font-size:15px !important; color:rgba(235,235,245,.5) !important;}
  .ws-set .panel{border-top:.5px solid rgba(255,255,255,.1) !important;}
  .ws-set .ir{border-color:rgba(255,255,255,.1) !important;}
  .ib{border:0 !important; border-radius:10px !important; background:#2E2E33 !important; color:#fff !important; width:36px !important; height:36px !important;}
  .ws-bar .btn-g{font-size:15px !important; color:rgba(235,235,245,.7) !important; background:none !important;}
  .ws-count{font-size:13px !important; color:rgba(235,235,245,.55) !important;}
  .rgrid{gap:12px !important;}
  .rcard .bd{padding:12px !important;}
  .rcard .fn{font-size:14.5px !important; font-weight:500 !important;}
  .ws-go{padding:12px 16px calc(12px + env(safe-area-inset-bottom)) !important;}
  .ws-note{color:rgba(235,235,245,.45) !important;}
  /* motion: things arrive, and answer the touch */
  @media (prefers-reduced-motion:no-preference){
    .kapp-row, .rcard, .calc-out .biocard, .calc-out .tagbox{animation:kin .32s cubic-bezier(.2,.7,.2,1) both;}
    @keyframes kin{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  }
  .btn-w, .btn-o, .bbtn, .seg button, .chips button, .bpresets button, .tbpre, .kapp-row, .rcard, .copybtn{transition:transform .12s ease, background-color .15s ease, box-shadow .15s ease !important;}
  .btn-w:active, .btn-o:active, .bbtn:active, .copybtn:active, .chips button:active, .bpresets button:active{transform:scale(.97);}
}
@media (max-width:767px){
  html.kembed .ws .drop .row #sampleBtn{font-size:0 !important;}
  html.kembed .ws .drop .row #sampleBtn::after{content:"Try a sample"; font-size:15px;}
}

/* ---- mature pass: monochrome, one quiet card to tap, white for the action ----
   Lime stays only where state changes (a switch that is on, progress).
   Everything you press is white on black or grey on black. */
@media (max-width:767px){
  /* type */
  html.kembed .ws-h1, html.kembed h1.ws-h1{font-size:28px !important; font-weight:600 !important; letter-spacing:-.6px !important; line-height:1.15 !important; max-width:none !important;}
  /* actions: white, not neon */
  .ws .btn-w, .btn-w, .calc .copybtn.gen, .calc-in .gen, #convertAll, .bbtn.solid, .tbtop-save, .kapp-strip #zipBtn, .kapp-strip .btn-w{background:#DFFF3F !important; color:#17171A !important; border-radius:12px !important; font-weight:600 !important; box-shadow:none !important;}
  .ws .btn-w:hover, .btn-w:hover{background:#E8FF66 !important;}
  .kapp-strip #zipBtn, .kapp-strip .btn-w, #convertAll, .btn-w.big{height:50px !important; font-size:16px !important;}
  .kapp-strip #zipBtn:disabled, .kapp-strip .btn-w:disabled, .bbtn.solid:disabled{background:#2A2A2E !important; color:rgba(235,235,245,.35) !important;}
  /* selections: neutral, not lime */
  .kapp .chips button.on, .bpresets button.on, .tbpresets button.on, .tbpre.on{background:#DFFF3F !important; color:#17171A !important; box-shadow:none !important;}
  .kapp .chips button.on span{color:rgba(23,23,26,.6) !important;}
  .bf.on{background:rgba(223,255,63,.08) !important; box-shadow:inset 0 0 0 1.5px #DFFF3F !important;}
  .calc-out .calc-h::after{color:#DFFF3F !important;}
  .chip, .kapp-row .chip{background:#2A2A2E !important; color:rgba(235,235,245,.8) !important; font-weight:500 !important;}
  .chip.bad{background:#2A2A2E !important; color:#FF6961 !important;}
  .tbin{box-shadow:none !important; border:0 !important;}

  /* the first screen: a title, then one card you tap */
  html.kembed .ws:not(.has), html.kembed .kapp-hero{min-height:0 !important;}
  html.kembed .kapp-hero{padding-top:20px !important;}
  html.kembed .ws:not(.has) .ws-head{padding-top:20px !important;}
  html.kembed .ws .drop, html.kembed .kapp-hero .drop{flex:0 0 auto !important; margin-top:20px !important; padding:36px 20px 18px !important; border-radius:16px !important; background:#1C1C1F !important; text-align:center !important;}
  html.kembed .ws .drop:active{background:#232327 !important;}
  html.kembed .ws .drop .ico, html.kembed .ws:not(.has) .drop .big{margin-top:0 !important;}
  html.kembed .ws .drop .ico{width:auto !important; height:auto !important; margin:0 auto 12px !important; background:none !important; border-radius:0 !important; color:#DFFF3F !important;}
  html.kembed .ws .drop .ico svg{width:28px !important; height:28px !important;}
  html.kembed .ws .drop .big{display:none !important;}
  html.kembed .ws:not(.has) .drop:not(:has(.ico)) .row::before{content:""; display:block; width:28px; height:28px; margin:0 auto 12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DFFF3F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3m0 0-4.5 4.5M12 3l4.5 4.5M4 15v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center / 28px no-repeat;}
  html.kembed .ws .drop .row{flex-direction:column !important; gap:0 !important; margin:0 !important;}
  html.kembed .ws .drop .row .btn-w{height:auto !important; padding:0 !important; background:none !important; color:#DFFF3F !important; font-size:17px !important; font-weight:600 !important;}
  html.kembed .ws .drop .row .btn-w::after{content:"Private. Nothing is uploaded."; display:block; position:absolute; left:0; right:0; top:100%; margin-top:4px; font-size:13px; font-weight:400; color:rgba(235,235,245,.45);}
  html.kembed .ws .drop .row .btn-w{position:relative; margin-bottom:34px !important;}
  html.kembed .ws .drop .row #sampleBtn{width:100% !important; height:50px !important; margin:6px 0 0 !important; padding:12px 0 0 !important; border-top:.5px solid rgba(255,255,255,.1) !important; border-radius:0 !important; box-sizing:border-box !important;}
  html.kembed .ws .drop .row #sampleBtn::after{color:rgba(235,235,245,.6); font-size:14px; font-weight:500;}

  /* Text behind the photo, the same */
  html.kembed .tbdrop:not([hidden]){min-height:0 !important; margin-top:20px; padding:36px 20px 30px !important; border-radius:16px !important; background:#1C1C1F !important; justify-content:center;}
  html.kembed .tbdropico{margin:0 auto 12px !important; width:auto !important; height:auto !important; background:none !important; color:#DFFF3F !important;}
  html.kembed .tbdroph{display:none !important;}
  html.kembed .tbdropb{margin-top:0 !important;}
  html.kembed .tbdropb .btn-w{height:auto !important; padding:0 !important; background:none !important; color:#DFFF3F !important; font-size:17px !important; position:relative; margin-bottom:22px;}
  html.kembed .tbdropb .btn-w::after{content:"Private. Nothing is uploaded."; position:absolute; left:0; right:0; top:100%; margin-top:4px; font-size:13px; font-weight:400; color:rgba(235,235,245,.45);}

  /* White border's empty canvas */
  .bempty::after{background:#DFFF3F !important; color:#17171A !important; border-radius:12px !important; height:46px !important; font-size:16px !important;}
}
@media (max-width:767px){
  html.kembed .ws{border-bottom:0 !important;}
  html.kembed body > div:not(.toast):not(.kapp), html.kembed .wrap{background:transparent !important;}
}

/* ---- structure: a tool says what it is; options fold behind one row ---- */
@media (max-width:767px){
  html.mtool .ws-h1{font-size:30px !important; font-weight:700 !important; letter-spacing:-.8px !important; text-align:left !important; margin:0 !important;}
  html.mtool .mth{display:block !important; padding:22px 0 0; color:#fff;}
  html.mtool .tbdrop[hidden] ~ .mtsub, html.mtool .mth:has(~ .tbdrop[hidden]){display:none !important;}
  html.mtool .mtsub{margin:6px 0 0 !important; font-size:15px; line-height:1.4; color:rgba(235,235,245,.55); text-align:left; max-width:34ch;}
  html.mtool .ws-head .mtsub{margin-bottom:0 !important;}
  html.mtool .tbdrop:not([hidden]){margin-top:22px !important;}
  /* the app bar: close on the left, the tool's name in the middle */
  html.mtool .kapp-strip{position:relative; justify-content:center !important;}
  html.mtool .kapp-strip .kapp-crumb{display:flex !important; position:absolute; left:50%; transform:translateX(-50%); font-size:0;}
  html.mtool .kapp-strip .kapp-crumb a, html.mtool .kapp-strip .kapp-crumb span{display:none !important;}
  html.mtool .kapp-strip .kapp-crumb b{font-size:17px; font-weight:600; color:#fff; letter-spacing:-.2px;}
  html.mtool .kapp-x{position:absolute !important; left:12px; top:50%; transform:translateY(-50%);}
  html.mtool .kapp-live, html.mtool #kappTools2 > .sp{display:none !important;}
  html.mtool .kapp-strip .kapp-crumb, html.mtool .kapp-strip .kapp-crumb b{border:0 !important; padding:0 !important; margin:0 !important; background:none !important;}
  html.mtool .kapp-strip .kapp-crumb::before, html.mtool .kapp-strip .kapp-crumb::after{display:none !important;}
  html.mtool .wrap > .ws-head, html.mtool .calc ~ .ws-head{padding-top:22px !important;}
  html.mtool body > .wrap{padding-top:0 !important;}
  /* the bottom bar: Add files beside the one action */
  html.mtool .kapp-strip #addMore{display:inline-flex !important; position:fixed !important; left:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90; width:calc(36% - 20px); height:50px !important; justify-content:center; border-radius:12px !important; background:#2A2A2E !important; color:#fff !important; font-size:16px !important; font-weight:500 !important;}
  html.mtool .kapp-strip #zipBtn{left:calc(36% + 4px) !important;}
  html.mtool .kapp-strip #saveTo, html.mtool .kapp-strip #sendKepla{display:none !important;}
  /* options folded */
  html.mtool .mopt{display:flex; align-items:center; gap:12px; width:100%; min-height:50px; padding:0 16px; border:0; background:none; color:#fff; font:inherit; font-size:15px; text-align:left; cursor:pointer;}
  html.mtool .mopt span{flex:none;}
  html.mtool .mopt em{flex:1 1 auto; min-width:0; font-style:normal; text-align:right; color:rgba(235,235,245,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  html.mtool .mopt::after{content:""; flex:none; width:7px; height:7px; border-right:2px solid rgba(235,235,245,.35); border-bottom:2px solid rgba(235,235,245,.35); transform:rotate(45deg); margin:-4px 2px 0 0; transition:transform .2s ease;}
  html.mtool .mopen .mopt::after{transform:rotate(-135deg); margin-top:4px;}
  html.mtool #kappTools2:not(.mopen) .kapp-opt{display:none !important;}
  html.mtool #kappTools2.mopen .kapp-opt:first-of-type::before, html.mtool #kappTools2 .kapp-opt::before{left:16px;}
  html.mtool #kappTools2.mopen .mopt + .kapp-opt::before{content:""; position:absolute; left:16px; right:0; top:0; height:.5px; background:rgba(255,255,255,.1);}
  html.mtool #kappTools2 .kapp-sum{border-top:.5px solid rgba(255,255,255,.1) !important;}
  html.mtool #kappTools2:not(:has(.mopt)) .kapp-sum{border-top:0 !important;}
}

/* one bar only: the transfer app's (Tools back, Open). The tool's own bar
   folds away and keeps just its two bottom buttons. */
@media (max-width:767px){
  html.mtool .kapp-strip{height:0 !important; min-height:0 !important; padding:0 !important; border:0 !important; overflow:visible !important; background:none !important;}
  html.mtool .kapp-strip .kapp-crumb, html.mtool .kapp-x, html.mtool .kapp-lock{display:none !important;}
  html.mtool .kapp-tools{margin-top:16px !important;}
}

/* ================= desktop and tablet =================
   The same language as the phone: black ground, rounded cards with no
   outlines, filled fields, iOS segments and switches, lime for the action.
   Inside the transfer app a tool also drops its marketing copy. */
@media (min-width:768px){
  html.kembed, html.kembed body{background:#0E0E10 !important;}
  html.kembed body > div:not(.toast):not(.kapp), html.kembed .wrap{background:transparent !important;}
  html.kembed .ws{border-bottom:0 !important;}
  html.kembed .ws-k, html.kembed .kapp-lede, html.kembed .kapp-proof, html.kembed .ws-sub, html.kembed .lede, html.kembed .ws-steps, html.kembed .fmts, html.kembed .tnext{display:none !important;}
  html.kembed .ws-h1, html.kembed h1.ws-h1{font-size:34px !important; font-weight:600 !important; letter-spacing:-1px !important; line-height:1.15 !important; max-width:none !important;}
  html.mtool .mtsub{margin:8px 0 0; font-size:16px; line-height:1.45; color:rgba(235,235,245,.55); max-width:60ch;}
  html.kembed .kapp-hero, html.kembed .ws:not(.has) .ws-head, html.kembed .wrap > .ws-head{padding-top:40px !important;}

  /* buttons */
  .ws .btn-w, .btn-w, .calc .copybtn, .calc-in .gen, #convertAll, .bbtn.solid, .tbtop-save{border:0 !important; border-radius:12px !important; background:#DFFF3F !important; color:#17171A !important; font-weight:600 !important; box-shadow:none !important;}
  .ws .btn-w:hover, .btn-w:hover, .calc .copybtn:hover, #convertAll:hover{background:#E8FF66 !important;}
  .ws .btn-o, .btn-o, .bbtn:not(.solid), .tbicon{border:0 !important; border-radius:10px !important; background:#2A2A2E !important; color:#fff !important; box-shadow:none !important;}
  .ws .btn-o:hover, .btn-o:hover, .bbtn:not(.solid):hover{background:#36363B !important;}
  .ws .btn-g, .btn-g{border-radius:10px !important; color:rgba(235,235,245,.7) !important;}
  .btn-w:disabled, .bbtn.solid:disabled, #zipBtn:disabled{background:#2A2A2E !important; color:rgba(235,235,245,.35) !important;}

  /* first screen: one quiet card */
  .ws .drop, .drop, .tbdrop, .bhead .drop.bland{border:0 !important; border-radius:20px !important; background:#1C1C1F !important; box-shadow:none !important;}
  .ws .drop:hover, .drop:hover{background:#222226 !important;}
  .ws .drop .ico, .drop .ico{border:0 !important; border-radius:50% !important; background:#2A2A2E !important; color:#DFFF3F !important;}
  .ws .drop .big{font-weight:600 !important; letter-spacing:-.4px !important;}
  .ws .drop .sub{color:rgba(235,235,245,.5) !important;}
  .ws .drop .row .btn-w, .ws .drop .row .btn-o{height:46px !important; padding:0 22px !important; font-size:15px !important;}
  .ws .drop .row .btn-o{background:transparent !important; color:rgba(235,235,245,.7) !important;}
  .ws .drop .row .btn-o:hover{background:#2A2A2E !important; color:#fff !important;}

  /* fields, segments, switches */
  .calc-in input.num, .calc-in input.txt2, .calc-in select, .calc-in textarea, .ws select.sel, .ws input.sel{border:0 !important; border-radius:12px !important; background-color:#2A2A2E !important; box-shadow:none !important; color:#fff !important;}
  .calc-in select, .ws select.sel{-webkit-appearance:none; appearance:none; padding-right:36px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:right 14px center !important; background-size:12px 8px !important;}
  .seg, .kapp-opt .seg, .bseg, .tbseg{display:inline-flex !important; gap:2px !important; padding:2px !important; border:0 !important; border-radius:10px !important; background:rgba(118,118,128,.24) !important; box-shadow:none !important;}
  .seg button, .kapp-opt .seg button, .bseg button, .tbseg button{border:0 !important; border-radius:8px !important; background:transparent !important; color:#fff !important; box-shadow:none !important;}
  .seg button.on, .kapp-opt .seg button.on, .bseg button.on, .tbseg button.on{background:#636366 !important; color:#fff !important; font-weight:600 !important;}
  .kapp-opt input[type=checkbox], .ws-set input[type=checkbox], .calc-in input[type=checkbox], .ir input[type=checkbox]{-webkit-appearance:none; appearance:none; flex:none; position:relative; width:38px !important; height:22px !important; margin:0 !important; border-radius:999px; background:#39393D; cursor:pointer; transition:background .2s ease; vertical-align:middle;}
  .kapp-opt input[type=checkbox]::after, .ws-set input[type=checkbox]::after, .calc-in input[type=checkbox]::after, .ir input[type=checkbox]::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .2s cubic-bezier(.2,.7,.2,1);}
  .kapp-opt input[type=checkbox]:checked, .ws-set input[type=checkbox]:checked, .calc-in input[type=checkbox]:checked, .ir input[type=checkbox]:checked{background:#DFFF3F;}
  .kapp-opt input[type=checkbox]:checked::after, .ws-set input[type=checkbox]:checked::after, .calc-in input[type=checkbox]:checked::after, .ir input[type=checkbox]:checked::after{transform:translateX(16px);}
  .fl, .kapp-opt .fl, .calc-out .calc-h, .ws label.fl, .tnext-k{text-transform:none !important; letter-spacing:0 !important; font-size:13px !important; font-weight:500 !important; color:rgba(235,235,245,.55) !important;}
  .chip, .kapp-row .chip{border:0 !important; border-radius:999px !important; background:#2A2A2E !important; color:rgba(235,235,245,.85) !important;}
  .chip.bad{color:#FF6961 !important;}
  .kapp .chips button, .bpresets button, .tbpre{border:0 !important; border-radius:999px !important; background:#2A2A2E !important; color:#fff !important;}
  .kapp .chips button.on, .bpresets button.on, .tbpre.on{background:#DFFF3F !important; color:#17171A !important;}
  .kapp .chips button.on span{color:rgba(23,23,26,.6) !important;}

  /* calculators */
  .calc, #toolcard{background:transparent !important; border:0 !important; box-shadow:none !important;}
  .calc-in, .calc-out{border:0 !important; border-radius:20px !important; background:#1C1C1F !important; box-shadow:none !important;}
  .calc-out .rows, .calc-out .rowline{border-color:rgba(255,255,255,.08) !important;}
  .calc-out .biocard, .calc-out .tagbox{border-radius:12px !important; background:#2A2A2E !important; box-shadow:none !important;}

  /* the image tools' app screen */
  .kapp{background:#0E0E10 !important;}
  html.kembed .kapp-lock, html.kembed .kapp-crumb a, html.kembed .kapp-crumb span{display:none !important;}
  html.kembed .kapp-crumb{border:0 !important; padding:0 !important;}
  html.kembed .kapp-crumb b{font-size:16px; font-weight:600; letter-spacing:-.2px;}
  .kapp-strip{background:#0E0E10 !important; border-bottom:1px solid rgba(255,255,255,.06) !important; height:60px !important;}
  .kapp-strip .btn-w, .kapp-strip .btn-o, .kapp-strip .btn-g{height:38px !important; padding:0 16px !important; font-size:14px !important;}
  .kapp-x{border:0 !important; border-radius:10px !important; background:#2A2A2E !important;}
  .kapp-tools{background:#141417 !important; border-bottom:1px solid rgba(255,255,255,.06) !important;}
  .kapp-opt .hint{color:rgba(235,235,245,.4) !important;}
  .kapp-queue{background:#0E0E10 !important; border-right:1px solid rgba(255,255,255,.06) !important;}
  .kapp-list{padding:0 12px !important;}
  .kapp-row{margin:0 0 8px !important; border:0 !important; border-radius:12px !important; background:#1C1C1F !important; box-shadow:none !important;}
  .kapp-row.sel{background:#232327 !important; box-shadow:inset 0 0 0 1.5px rgba(223,255,63,.55) !important;}
  .kapp-track{height:3px !important; border-radius:2px; background:rgba(255,255,255,.08) !important; overflow:hidden;}
  .kapp-track i{background:#DFFF3F !important;}
  .kapp-qh, .kapp-qf{border:0 !important;}
  .kapp-insp, .kapp-insp-top, .kapp-facts{background:#0E0E10 !important; border-color:rgba(255,255,255,.06) !important;}
  .kapp-status{background:#0E0E10 !important; border-top:1px solid rgba(255,255,255,.06) !important; color:rgba(235,235,245,.4) !important;}
  .kapp-status kbd, .kapp kbd{border:0 !important; border-radius:6px !important; background:#2A2A2E !important;}

  /* RAW */
  .rcard{border:0 !important; border-radius:16px !important; overflow:hidden; background:#1C1C1F !important; box-shadow:none !important;}
  .ib{border:0 !important; border-radius:8px !important; background:#2A2A2E !important; color:#fff !important;}
  .ws-set{box-shadow:none !important; border:0 !important; border-radius:16px !important; background:#1C1C1F !important; padding:4px 16px !important;}
  .ws-side .panel, .ws-set .panel{border:0 !important; background:transparent !important;}
  .ws-set .ir{border-color:rgba(255,255,255,.07) !important;}
  .ws-set summary, .ws-side > .fl{color:rgba(235,235,245,.55) !important;}

  /* White border and Text behind */
  .bapp-in{border:0 !important; border-radius:20px !important; background:#141417 !important;}
  .btop, .tbtop{background:#0E0E10 !important; border-bottom:1px solid rgba(255,255,255,.06) !important;}
  .bf{border:0 !important; border-radius:12px !important; background:#1C1C1F !important;}
  .bf.on{box-shadow:inset 0 0 0 1.5px #DFFF3F !important; background:rgba(223,255,63,.06) !important;}
  .tbin{border:0 !important; border-radius:12px !important; background:#2A2A2E !important;}
  .tbadd{border:0 !important; border-radius:12px !important; background:#2A2A2E !important; color:#fff !important;}

  .ws-set .panel, .ws-side .panel{box-shadow:none !important; border:0 !important; background:transparent !important;}
  html.kembed .ws-stephead{display:none !important;}
  .kapp-det .k, .ws-stephead{text-transform:none !important; letter-spacing:0 !important; font-size:12.5px !important; font-weight:500 !important; color:rgba(235,235,245,.5) !important;}
  .kapp-det{border-color:rgba(255,255,255,.06) !important;}
  /* motion */
  .btn-w, .btn-o, .bbtn, .copybtn, .chips button, .bpresets button, .kapp-row, .rcard, .drop{transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease !important;}
  .btn-w:active, .btn-o:active, .bbtn:active, .copybtn:active{transform:scale(.98);}
}