/*!
InoBox Theme
File: style.css
Author: Thomas Cabrit
Developer: https://github.com/Thomas-Cabrit
Company: Kcalb Ltd
Company Website: https://kcalb-ltd.com
© InoBox.org powered by Kcalb Ltd
*/

html{scroll-behavior:smooth}
*{font-family:"Inter",sans-serif;box-sizing:border-box;transition:background .5s ease,color .5s ease,filter .5s ease,border-color .5s ease,box-shadow .5s ease,transform .25s ease}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{margin:0;padding:0;background:#000}
body:has(#how-toggle:checked){overflow:hidden}

:root{
  --bg:#0d0d0d;
  --card:#0d0d0d;
  --glass:rgba(15,15,15,.4);
  --border:#1a1a1a;
  --border2:#232323;

  --muted:#a9a9b3;
  --text:#fff;
  --soft:#d1d1d1;

  --accent:#28a745;
  --accent-rgb:40,167,69;
  --accentDark:#1e7e34;
  --accentSoft:rgba(40,167,69,.14);
  --ring:var(--accent);

  --silver:#bfc0c2;

  --field-bg:#111;
  --field-text:#fff;
  --field-border:#666;
  --field-placeholder:rgba(255,255,255,.45);

  --chip-bg:rgba(40,167,69,.06);
  --chip-border:rgba(40,167,69,.22);
  --chip-hover:rgba(40,167,69,.1);

  --policy-bg:rgba(255,255,255,.035);
  --policy-border:rgba(255,255,255,.1);

  --btn-radius:12px;
  --btn-black:#101010;
  --btn-black-border:rgba(255,255,255,.16);

  --btn-green:rgba(var(--accent-rgb),1);
  --btn-green-border:rgba(var(--accent-rgb),.40);

  --icon-check:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20%206L9%2017l-5-5'%20fill='none'%20stroke='%2328a745'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-cross:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M7%207l10%2010M17%207L7%2017'%20fill='none'%20stroke='%23ff2d2d'%20stroke-width='3'%20stroke-linecap='round'%3E%3C/svg%3E");
}

html[data-theme="light"]{
  --bg:#fff;
  --card:#fff;
  --glass:rgba(255,255,255,.72);
  --border:#e7e7e7;
  --border2:#efefef;

  --muted:#52525b;
  --text:#0d0d0d;
  --soft:#2a2a2a;

  --field-bg:#fff;
  --field-text:#000;
  --field-border:#ddd;
  --field-placeholder:rgba(0,0,0,.42);

  --policy-bg:rgba(0,0,0,.03);
  --policy-border:rgba(0,0,0,.08);

  --btn-black:#101010;
  --btn-black-border:rgba(0,0,0,.22);

  --btn-green:rgba(var(--accent-rgb),1);
  --btn-green-border:rgba(var(--accent-rgb),.52);
}

.ring-green{--ring:var(--accent)}
.ring-red{--ring:#ff2d2d}
.ring-violet{--ring:#8b5cf6}

.how-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.how-modal{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding-top:calc(18px + env(safe-area-inset-top));padding-bottom:calc(18px + env(safe-area-inset-bottom));padding-left:calc(18px + env(safe-area-inset-left));padding-right:calc(18px + env(safe-area-inset-right))}
#how-toggle:checked ~ .how-modal{display:flex}
.how-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer}
html[data-theme="light"] .how-backdrop{background:rgba(255,255,255,.55)}
.how-dialog{position:relative;z-index:1;width:100%;max-width:380px}
.how-card{width:100%;background:#0a0a0a;border-radius:18px;padding:18px 18px 14px;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px rgba(0,0,0,.55);text-align:left;position:relative}
html[data-theme="light"] .how-card{background:#fff;border-color:#eee;box-shadow:0 25px 50px rgba(0,0,0,.35)}
.how-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:2px solid var(--accent);background:transparent;color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;line-height:0;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 3px rgba(40,167,69,.08);user-select:none}
.how-close:hover{filter:drop-shadow(0 0 10px rgba(40,167,69,.35))}
.how-close:active{transform:translateY(1px)}
.how-title{margin:0 0 12px;font-size:14px;font-weight:800;color:#eaeaea}
html[data-theme="light"] .how-title{color:#0d0d0d}
.how-step{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
.how-step-left{display:flex;flex-direction:column;align-items:center;flex:0 0 26px}
.how-step-circle{width:26px;height:26px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;background:transparent;flex:0 0 26px}
.how-step-line{width:2px;height:34px;margin-top:4px;background:linear-gradient(to bottom,rgba(40,167,69,.7),rgba(40,167,69,.15))}
.how-step-text{font-size:12.5px;line-height:1.55;color:#9a9a9a}
html[data-theme="light"] .how-step-text{color:#444}
.how-step-text strong{display:block;margin-bottom:2px;color:#ededed;font-weight:600}
html[data-theme="light"] .how-step-text strong{color:#0d0d0d;font-weight:600}

.support-divider{width:100%;height:1px;margin:14px 0 10px;background:linear-gradient(90deg,transparent,rgba(180,180,180,.35),transparent)}
html[data-theme="light"] .support-divider{background:linear-gradient(90deg,transparent,rgba(120,120,120,.55),transparent)}
.support-line{font-size:11.5px;line-height:1.35;color:#9a9a9a;font-weight:600;white-space:nowrap}
html[data-theme="light"] .support-line{color:#444}
.support-line a{color:inherit;text-decoration:none;font-weight:600}
.support-line a:hover{color:var(--accentDark)}

.inobox-mode-container{position:absolute;top:40px;right:40px;z-index:120;display:flex;align-items:flex-start;justify-content:flex-end}
.toggle-container{position:relative;width:150px;display:flex;flex-direction:column;align-items:center;perspective:800px;z-index:5;transform:scale(.5);transform-origin:top right}
.toggle-wrap{position:relative;width:100%;height:60px;transform-style:preserve-3d}
.toggle-input{position:absolute;opacity:0;width:1px;height:1px}
.toggle-track{position:absolute;width:100%;height:100%;background:rgba(40,167,69,.14);border-radius:30px;cursor:pointer;box-shadow:0 0 15px rgba(40,167,69,.22),inset 0 0 10px rgba(0,0,0,.8);overflow:hidden;backdrop-filter:blur(5px);transition:all .6s cubic-bezier(.23,1,.32,1);border:1px solid rgba(40,167,69,.35);display:block;-webkit-tap-highlight-color:transparent;user-select:none}
.toggle-track::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(40,167,69,.14) 0%,rgba(0,0,0,0) 70%),linear-gradient(90deg,rgba(40,167,69,.1) 0%,rgba(10,30,18,.26) 100%);opacity:.75;transition:all .6s cubic-bezier(.23,1,.32,1)}
.toggle-track::after{content:"";position:absolute;top:2px;left:2px;right:2px;height:10px;background:linear-gradient(90deg,rgba(40,167,69,.34) 0%,rgba(40,167,69,.12) 100%);border-radius:30px 30px 0 0;opacity:.75;filter:blur(1px)}
.track-lines{position:absolute;top:50%;left:0;width:100%;height:1px;transform:translateY(-50%);overflow:hidden}
.track-line{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(40,167,69,.34) 0px,rgba(40,167,69,.34) 5px,transparent 5px,transparent 15px);animation:track-line-move 3s linear infinite}
@keyframes track-line-move{0%{transform:translateX(0)}100%{transform:translateX(20px)}}
.toggle-thumb{position:absolute;width:54px;height:54px;left:3px;top:3px;background:radial-gradient(circle,rgba(10,40,20,.92) 0%,rgba(0,20,10,.82) 100%);border-radius:50%;box-shadow:0 2px 15px rgba(0,0,0,.5),inset 0 0 15px rgba(40,167,69,.55);transition:all .6s cubic-bezier(.23,1,.32,1);z-index:2;border:1px solid rgba(40,167,69,.65);overflow:hidden;transform-style:preserve-3d}
.thumb-core{position:absolute;width:40px;height:40px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(40,167,69,.62) 0%,rgba(40,167,69,.18) 100%);border-radius:50%;box-shadow:0 0 20px rgba(40,167,69,.55);opacity:.95;transition:all .6s cubic-bezier(.23,1,.32,1)}
.thumb-inner{position:absolute;width:25px;height:25px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(160,255,200,.45) 100%);border-radius:50%;box-shadow:0 0 10px rgba(160,255,200,.55);opacity:.72;transition:all .6s cubic-bezier(.23,1,.32,1);animation:pulse 2s infinite alternate}
@keyframes pulse{0%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}100%{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}
.thumb-scan{position:absolute;width:100%;height:5px;top:0;left:0;filter:blur(1px);opacity:.75;background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(40,167,69,.55) 20%,rgba(255,255,255,.85) 50%,rgba(40,167,69,.55) 80%,rgba(0,0,0,0) 100%);animation:thumb-scan 2s linear infinite}
@keyframes thumb-scan{0%{top:-5px;opacity:0}20%{opacity:.75}80%{opacity:.75}100%{top:54px;opacity:0}}
.thumb-particles{position:absolute;inset:0;overflow:hidden}
.thumb-particle{position:absolute;width:3px;height:3px;border-radius:50%;opacity:0;background:rgba(160,255,200,.85);box-shadow:0 0 5px rgba(160,255,200,.65);animation:thumb-particle-float 3s infinite ease-out}
.thumb-particle:nth-child(1){top:70%;left:30%;animation-delay:.2s}
.thumb-particle:nth-child(2){top:60%;left:60%;animation-delay:.6s}
.thumb-particle:nth-child(3){top:50%;left:40%;animation-delay:1s}
.thumb-particle:nth-child(4){top:40%;left:70%;animation-delay:1.4s}
.thumb-particle:nth-child(5){top:80%;left:50%;animation-delay:1.8s}
@keyframes thumb-particle-float{0%{transform:translateY(0) scale(1);opacity:0}20%{opacity:.8}100%{transform:translateY(-30px) scale(0);opacity:0}}

.toggle-data{position:absolute;width:100%;height:100%;z-index:1}
.data-text{position:absolute;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;transition:all .5s ease}
.data-text.off{right:12px;top:50%;transform:translateY(-50%);opacity:1;color:rgba(40,167,69,.8);text-shadow:0 0 6px rgba(40,167,69,.35)}
.data-text.on{left:15px;top:50%;transform:translateY(-50%);opacity:0;color:rgba(13,13,13,.82);text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-theme="light"] .data-text.on{color:rgba(13,13,13,.74);text-shadow:none}

.status-indicator{position:absolute;width:10px;height:10px;border-radius:50%;transition:all .6s cubic-bezier(.23,1,.32,1)}
.status-indicator.off{top:25px;right:15px;background:radial-gradient(circle,rgba(40,167,69,.85) 0%,rgba(30,120,55,.45) 100%);box-shadow:0 0 10px rgba(40,167,69,.45);animation:blink 2s infinite alternate}
.status-indicator.on{top:25px;left:15px;opacity:0;background:radial-gradient(circle,rgba(13,13,13,.08) 0%,rgba(13,13,13,.03) 100%);box-shadow:0 0 2px rgba(0,0,0,.03);animation:blinkLight 2.6s infinite alternate}
@keyframes blink{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:.85;transform:scale(1.08)}}
@keyframes blinkLight{0%,100%{opacity:.08;transform:scale(.98)}50%{opacity:.14;transform:scale(1.01)}}

.energy-rings{position:absolute;width:54px;height:54px;left:3px;top:3px;pointer-events:none;z-index:1;transition:all .6s cubic-bezier(.23,1,.32,1)}
.energy-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:2px solid transparent;opacity:0}
.energy-ring:nth-child(1){width:50px;height:50px;border-top-color:rgba(0,0,0,.22);border-right-color:rgba(0,0,0,.14);animation:spin 3s linear infinite}
.energy-ring:nth-child(2){width:40px;height:40px;border-bottom-color:rgba(0,0,0,.22);border-left-color:rgba(0,0,0,.14);animation:spin 2s linear infinite reverse}
.energy-ring:nth-child(3){width:30px;height:30px;border-left-color:rgba(0,0,0,.22);border-top-color:rgba(0,0,0,.14);animation:spin 1.5s linear infinite}
@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(-50%,-50%) rotate(360deg)}}

.interface-lines{position:absolute;width:100%;height:100%;pointer-events:none}
.interface-line{position:absolute;background:rgba(40,167,69,.28);transition:all .6s cubic-bezier(.23,1,.32,1)}
.interface-line:nth-child(1){width:15px;height:1px;bottom:-5px;left:20px}
.interface-line:nth-child(2){width:1px;height:8px;bottom:-12px;left:35px}
.interface-line:nth-child(3){width:25px;height:1px;bottom:-12px;left:35px}
.interface-line:nth-child(4){width:15px;height:1px;bottom:-5px;right:20px}
.interface-line:nth-child(5){width:1px;height:8px;bottom:-12px;right:35px}
.interface-line:nth-child(6){width:25px;height:1px;bottom:-12px;right:10px}

.toggle-reflection{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 40%);border-radius:30px;pointer-events:none}
.holo-glow{position:absolute;inset:0;border-radius:30px;background:radial-gradient(ellipse at center,rgba(40,167,69,.2) 0%,rgba(0,0,0,0) 70%);filter:blur(10px);opacity:.55;transition:all .6s cubic-bezier(.23,1,.32,1);z-index:0}

.toggle-input:checked + .toggle-track{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.22);box-shadow:0 0 15px rgba(0,0,0,.14),inset 0 0 10px rgba(0,0,0,.55)}
.toggle-input:checked + .toggle-track::before{background:radial-gradient(ellipse at center,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 70%),linear-gradient(90deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.14) 100%);opacity:.72}
.toggle-input:checked + .toggle-track::after{background:linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 100%);opacity:.62}
.toggle-input:checked + .toggle-track .track-line{background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0px,rgba(0,0,0,.2) 5px,transparent 5px,transparent 15px);animation-direction:reverse}
.toggle-input:checked + .toggle-track .toggle-thumb{left:calc(100% - 57px);background:radial-gradient(circle,rgba(25,25,25,.92) 0%,rgba(0,0,0,.78) 100%);border-color:rgba(0,0,0,.42);box-shadow:0 2px 15px rgba(0,0,0,.4),inset 0 0 15px rgba(0,0,0,.18)}
.toggle-input:checked + .toggle-track .thumb-core{background:radial-gradient(circle,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 100%);box-shadow:0 0 16px rgba(0,0,0,.14)}
.toggle-input:checked + .toggle-track .thumb-inner{background:radial-gradient(circle,rgba(255,255,255,.6) 0%,rgba(140,140,140,.3) 100%);box-shadow:0 0 8px rgba(0,0,0,.12)}
.toggle-input:checked + .toggle-track .thumb-scan{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 20%,rgba(255,255,255,.55) 50%,rgba(0,0,0,.22) 80%,rgba(0,0,0,0) 100%);opacity:.48}
.toggle-input:checked + .toggle-track .thumb-particle{background:rgba(180,180,180,.55);box-shadow:0 0 3px rgba(0,0,0,.1)}
.toggle-input:checked + .toggle-track .data-text.off{opacity:0}
.toggle-input:checked + .toggle-track .data-text.on{opacity:1}
.toggle-input:checked + .toggle-track .status-indicator.off{opacity:0}
.toggle-input:checked + .toggle-track .status-indicator.on{opacity:1}
.toggle-input:checked + .toggle-track .energy-rings{left:calc(100% - 57px)}
.toggle-input:checked + .toggle-track .energy-ring{opacity:1}
.toggle-input:checked + .toggle-track .interface-line{background:rgba(0,0,0,.2)}
.toggle-input:checked + .toggle-track .holo-glow{background:radial-gradient(ellipse at center,rgba(0,0,0,.12) 0%,rgba(0,0,0,0) 70%);opacity:.3}

.toggle-track:hover{box-shadow:0 0 20px rgba(40,167,69,.28),inset 0 0 10px rgba(0,0,0,.8)}
.toggle-input:checked + .toggle-track:hover{box-shadow:0 0 16px rgba(0,0,0,.1),inset 0 0 10px rgba(0,0,0,.55)}
.toggle-input:focus-visible + .toggle-track{outline:2px solid var(--accent);outline-offset:4px}

.page-wrapper{
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:calc(20px + env(safe-area-inset-top));
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
  padding-left:calc(20px + env(safe-area-inset-left));
  padding-right:calc(20px + env(safe-area-inset-right));
  background:
    linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62)),
    url("https://inobox.org/media/images/background-green-line.png") center/cover no-repeat fixed;
}

html[data-theme="light"] .page-wrapper{
  background:
    linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)),
    url("https://inobox.org/media/images/background-white-line.png") center/cover no-repeat fixed;
}

html[data-theme="dark"] .page-wrapper.ring-green{
  background:
    radial-gradient(circle at 20% 10%, rgba(40,167,69,0.12), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 80% 20%, rgba(40,167,69,0.10), rgba(0,0,0,0) 60%),
    linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
    url("https://inobox.org/media/images/background-green-line.png") center/cover no-repeat fixed;
}

html[data-theme="light"] .page-wrapper.ring-green{
  background:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    url("https://inobox.org/media/images/background-white-line.png") center/cover no-repeat fixed !important;
}

.outer-container{
  width:100%;
  max-width:600px;
  padding:25px;
  border-radius:40px;
  background:var(--glass);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  position:relative;
  margin:22px 0;
}

.inner-card{
  width:100%;
  position:relative;
  background:var(--card);
  border-radius:30px;
  padding:50px 40px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  z-index:1;
  overflow:hidden;
  border:1px solid var(--border2);
}

.inner-card::before{
  content:"";
  position:absolute;
  inset:-55%;
  background:conic-gradient(from 0deg,transparent 70%,var(--ring) 98%,transparent 100%);
  animation:inobox-light 16.25s linear infinite;
  z-index:-2;
  opacity:.95;
}

.inner-card::after{
  content:"";
  position:absolute;
  inset:1px;
  background:var(--bg);
  border-radius:29px;
  z-index:-1;
}

html[data-theme="light"] .inner-card{border:1px solid rgba(0,0,0,.08)}
html[data-theme="light"] .inner-card::before{
  background:conic-gradient(from 0deg,transparent 62%,var(--ring) 92%,transparent 100%);
  opacity:.88;
}

@keyframes inobox-light{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.logo-link{display:inline-block;line-height:0}
.logo-medium{width:96px;height:96px;max-width:96px;max-height:96px;object-fit:contain;display:inline-block}

.text-green{color:var(--accent)}
.text-white{color:var(--text)}

.h1-res{
  font-size:32px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--accent);
  line-height:1.1;
  margin:22px 0 14px 0;
  text-align:center;
}
.h1-res span{
  display:inline-block;
  margin-top:10px;
  color:#6b7280;
  font-weight:400;
  font-size:26px;
  line-height:1.25;
  letter-spacing:-0.25px;
}
html[data-theme="dark"] .h1-res span{
  color:var(--muted);
  opacity:.95;
}

.title,
.title-confirm,
.title-404{
  font-size:32px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--accent);
  line-height:1.1;
  margin:22px 0 14px 0;
  text-align:center;
}

.title .text-green,
.title-confirm .text-green,
.title-404 .line-accent{
  display:block;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  color:inherit;
}

.title .text-white,
.title-confirm .text-white,
.title-404 .line-sub{
  display:inline-block;
  margin-top:10px;
  color:#6b7280;
  font-weight:400;
  font-size:26px;
  line-height:1.25;
  letter-spacing:-0.25px;
  text-transform:none;
  opacity:1;
}

html[data-theme="dark"] .title .text-white,
html[data-theme="dark"] .title-confirm .text-white,
html[data-theme="dark"] .title-404 .line-sub{
  color:var(--muted);
  opacity:.95;
}

.hero-sub{margin:18px 0 0;max-width:520px;color:var(--soft);font-size:15px;line-height:1.65;opacity:.92}
html[data-theme="light"] .hero-sub{color:#2a2a2a}

.inobox-smart-info{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:26px 0 30px}
.inobox-info-btn-3d{width:3.5em;height:3.5em;border-radius:50%;border:2px solid #090909;background-image:linear-gradient(145deg,#171717,#444245);box-shadow:inset 2px 2px 0 #7d7c7e,inset -2px -2px 0 #1c1c1c;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;color:#a5a5a5;font-weight:900;font-size:18px;line-height:0}
.inobox-info-btn-3d:active{transform:translateY(1px);border-color:var(--accent);color:var(--accent);box-shadow:inset 3px 3px 0 rgba(0,0,0,.22),inset -3px -3px 0 rgba(255,255,255,.08),0 0 0 3px rgba(40,167,69,.14)}
.inobox-info-btn-3d:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html[data-theme="light"] .inobox-info-btn-3d{border-color:#d9d9d9;background-image:linear-gradient(145deg,#fff,#e9e9e9);box-shadow:0 14px 30px rgba(0,0,0,.14),inset 2px 2px 0 rgba(255,255,255,.95),inset -2px -2px 0 rgba(0,0,0,.06);color:#6f6f6f}
html[data-theme="light"] .inobox-info-btn-3d:active{border-color:var(--accent);color:var(--accent);box-shadow:0 10px 22px rgba(0,0,0,.14),0 0 0 3px rgba(40,167,69,.14),inset 3px 3px 0 rgba(0,0,0,.05),inset -3px -3px 0 rgba(255,255,255,.85);transform:translateY(1px)}
.inobox-info-label{margin-top:10px;font-size:12px;font-weight:600;color:#666}
html[data-theme="light"] .inobox-info-label{color:#5a5a5a}

.pill-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:18px 0 0;align-items:center}
.pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:8px 12px;border-radius:999px;font-size:12px;color:var(--muted);font-weight:800;letter-spacing:.2px;display:inline-flex;align-items:center;gap:8px}
html[data-theme="light"] .pill{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);color:#555}

.btn-row{
  width:100%;
  display:flex;
  gap:12px;
  justify-content:center;
  align-items:center;
  margin:24px 0 0;
  flex-direction:column;
}

.btn-primary,.btn-secondary{
  width:100%;
  max-width:340px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  letter-spacing:.8px;
  font-weight:800;
  font-size:13px;
  border:2px solid var(--accent);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  white-space:nowrap;
}

.btn-primary{background:var(--accent);color:#0d0d0d}
.btn-primary:hover{background:transparent;color:var(--accent)}
.btn-secondary{background:transparent;color:var(--accent)}
.btn-secondary:hover{background:var(--accentSoft);color:var(--accent);box-shadow:0 0 0 3px rgba(40,167,69,.1)}
html[data-theme="light"] .btn-secondary{background:#0d0d0d;border-color:var(--silver);color:#fff}
html[data-theme="light"] .btn-secondary:hover{background:transparent;border-color:var(--silver);color:#0d0d0d;box-shadow:0 0 0 3px rgba(0,0,0,.06)}

@media (min-width:620px){
  .btn-row{flex-direction:row;flex-wrap:nowrap}
  .btn-primary,.btn-secondary{width:280px;max-width:280px}
}

.feature-grid{width:100%;display:grid;grid-template-columns:1fr;gap:12px;margin:28px 0 0}
@media (min-width:560px){.feature-grid{grid-template-columns:1fr 1fr}}
.feature{text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 16px;display:flex;gap:12px;align-items:flex-start}
html[data-theme="light"] .feature{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08)}
.feature.span-2{grid-column:1/-1}
.f-ico{width:38px;height:38px;border-radius:12px;background:rgba(40,167,69,.1);border:1px solid rgba(40,167,69,.2);display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.f-title{margin:0;color:var(--text);font-size:13px;font-weight:600;letter-spacing:.2px}
.f-text{margin:6px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}

.free-note{width:100%;margin:18px 0 0;padding:16px 16px;border-radius:18px;text-align:left;background:rgba(7,22,12,.35);border:1px solid rgba(40,167,69,.2);box-shadow:0 10px 26px rgba(0,0,0,.35)}
html[data-theme="light"] .free-note{background:rgba(40,167,69,.06);border-color:rgba(40,167,69,.18);box-shadow:none}
.free-note p{margin:0;color:var(--soft);font-size:12.8px;line-height:1.65;opacity:.95}
html[data-theme="light"] .free-note p{color:#2a2a2a}
.free-note strong{color:var(--accent);font-weight:900}

#ecosystem{scroll-margin-top:20px}
.eco-wrap{width:100%;margin-top:18px;padding:20px 22px;border-radius:24px;background:#0a0a0a;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.6)}
html[data-theme="light"] .eco-wrap{background:#f9f9f9;border-color:#eee;box-shadow:none}
.eco-title{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);text-align:center}
.eco-grid{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:14px 0 10px}
.eco-item{width:52px;height:52px;border-radius:14px;background:#121212;border:1px solid #1f1f1f;display:flex;align-items:center;justify-content:center;padding:10px;text-decoration:none;position:relative}
html[data-theme="light"] .eco-item{background:#fff;border-color:#eee}
.eco-item img{width:100%;height:100%;object-fit:contain;filter:grayscale(100%) brightness(.65);opacity:.55;transition:all .35s ease}
.eco-item:hover{transform:translateY(-6px)!important;border-color:var(--accent)!important;box-shadow:0 0 15px rgba(40,167,69,.18)}
.eco-item:hover img{filter:grayscale(0%) brightness(1.1)!important;opacity:1}
.eco-item::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--accent);color:#0d0d0d;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:800;white-space:nowrap;opacity:0;visibility:hidden;transition:.25s ease;z-index:50}
html[data-theme="light"] .eco-item::after{color:#fff}
.eco-item:hover::after{opacity:1;visibility:visible}
.eco-note{color:#8e8e8e;font-size:12px;font-weight:600;opacity:.75;text-align:center;margin:0}

.kcalb-under-eco{margin-top:16px;display:flex;justify-content:center;align-items:center}
.kcalb-under-eco a{display:inline-block;line-height:0;text-decoration:none;-webkit-tap-highlight-color:transparent;user-select:none}
.kcalb-under-eco img{width:120px;max-width:120px;height:auto;display:block;opacity:.95;transition:filter .2s ease,opacity .2s ease;transform:none}
.kcalb-under-eco a:hover img{filter:none;opacity:.98;transform:none}

.footer-centered{padding:34px 0 6px;width:100%;text-align:center}
.social-mail-row{padding-top:14px;line-height:1;display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}

.social-mail-link{
  text-decoration:none;
  display:inline-block;
  border-radius:16px;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  padding:0;
}
.social-mail-inner{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:30px;
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
html[data-theme="light"] .social-mail-inner{
  background:#fff;
  border-color:rgba(0,0,0,.25);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.social-mail-img{border:0;display:block;width:22px;height:22px;object-fit:contain;filter:none!important;-webkit-filter:none!important;mix-blend-mode:normal!important}
.social-mail-link:hover .social-mail-inner{
  transform:translateY(-2px);
  border-color:rgba(var(--accent-rgb),.55);
  box-shadow:0 0 22px rgba(var(--accent-rgb),.16),0 14px 26px rgba(0,0,0,.45);
  background:#0a0a0a;
}
html[data-theme="light"] .social-mail-link:hover .social-mail-inner{background:#fff}
.social-mail-link:active .social-mail-inner{transform:translateY(-1px)}
.social-mail-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:18px}

.footer-links{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px}
.footer-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:13px;transition:color .18s ease,filter .18s ease}
.footer-link:hover{color:var(--accentDark);filter:drop-shadow(0 0 6px rgba(40,167,69,.35))}
.footer-link:active{transform:translateY(1px)}
.footer-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.footer-sep{color:var(--text);opacity:.3}

.copyright{color:#e6e6e6;font-size:11px;margin-top:14px;line-height:1.4;opacity:.6}
html[data-theme="light"] .copyright{color:#0d0d0d;opacity:.8}
.copyright a{color:inherit;text-decoration:none;font-weight:600}
.copyright a:hover{color:#7a7a7a}

.logo-footer{display:inline-block;margin-top:26px}
.logo-footer img{width:80px;height:auto;display:inline-block}

.page-wrapper.ring-red{
  --accent:#dc3545;
  --accent-rgb:220,53,69;
  --accentDark:#b72c39;
  --accentSoft:rgba(220,53,69,.14);
  --ring:#dc3545;
  --chip-bg:rgba(220,53,69,.06);
  --chip-border:rgba(220,53,69,.22);
  --chip-hover:rgba(220,53,69,.10);

  --btn-green:rgba(var(--accent-rgb),1);
  --btn-green-border:rgba(var(--accent-rgb),.40);
}

.page-wrapper.ring-red .btn-primary{color:#fff}
.page-wrapper.ring-red .btn-primary:hover{color:var(--accent)}
.page-wrapper.ring-red .inobox-info-btn-3d:active{box-shadow:inset 3px 3px 0 rgba(0,0,0,.22),inset -3px -3px 0 rgba(255,255,255,.08),0 0 0 3px rgba(220,53,69,.14)}
html[data-theme="light"] .page-wrapper.ring-red .inobox-info-btn-3d:active{box-shadow:0 10px 22px rgba(0,0,0,.14),0 0 0 3px rgba(220,53,69,.14),inset 3px 3px 0 rgba(0,0,0,.05),inset -3px -3px 0 rgba(255,255,255,.85)}

.page-wrapper.ring-red .toggle-track{background:rgba(220,53,69,.14);border-color:rgba(220,53,69,.35);box-shadow:0 0 15px rgba(220,53,69,.22),inset 0 0 10px rgba(0,0,0,.8)}
.page-wrapper.ring-red .toggle-track::before{background:radial-gradient(ellipse at center,rgba(220,53,69,.14) 0%,rgba(0,0,0,0) 70%),linear-gradient(90deg,rgba(220,53,69,.10) 0%,rgba(35,10,12,.26) 100%)}
.page-wrapper.ring-red .toggle-track::after{background:linear-gradient(90deg,rgba(220,53,69,.34) 0%,rgba(220,53,69,.12) 100%)}
.page-wrapper.ring-red .track-line{background:repeating-linear-gradient(90deg,rgba(220,53,69,.34) 0px,rgba(220,53,69,.34) 5px,transparent 5px,transparent 15px)}
.page-wrapper.ring-red .toggle-thumb{background:radial-gradient(circle,rgba(55,12,14,.92) 0%,rgba(25,5,7,.82) 100%);border-color:rgba(220,53,69,.65);box-shadow:0 2px 15px rgba(0,0,0,.5),inset 0 0 15px rgba(220,53,69,.55)}
.page-wrapper.ring-red .thumb-core{background:radial-gradient(circle,rgba(220,53,69,.62) 0%,rgba(220,53,69,.18) 100%);box-shadow:0 0 20px rgba(220,53,69,.55)}
.page-wrapper.ring-red .thumb-inner{background:radial-gradient(circle,rgba(255,255,255,.80) 0%,rgba(255,190,195,.45) 100%);box-shadow:0 0 10px rgba(255,190,195,.55)}
.page-wrapper.ring-red .thumb-scan{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(220,53,69,.55) 20%,rgba(255,255,255,.85) 50%,rgba(220,53,69,.55) 80%,rgba(0,0,0,0) 100%)}
.page-wrapper.ring-red .thumb-particle{background:rgba(255,190,195,.85);box-shadow:0 0 5px rgba(255,190,195,.65)}
.page-wrapper.ring-red .data-text.off{color:rgba(220,53,69,.80);text-shadow:0 0 6px rgba(220,53,69,.35)}
.page-wrapper.ring-red .status-indicator.off{background:radial-gradient(circle,rgba(220,53,69,.85) 0%,rgba(155,30,42,.45) 100%);box-shadow:0 0 10px rgba(220,53,69,.45)}
.page-wrapper.ring-red .interface-line{background:rgba(220,53,69,.28)}
.page-wrapper.ring-red .holo-glow{background:radial-gradient(ellipse at center,rgba(220,53,69,.20) 0%,rgba(0,0,0,0) 70%)}
.page-wrapper.ring-red .toggle-track:hover{box-shadow:0 0 20px rgba(220,53,69,.28),inset 0 0 10px rgba(0,0,0,.8)}

.page-wrapper.ring-red .how-step-line{background:linear-gradient(to bottom,rgba(220,53,69,.72),rgba(220,53,69,.15))}
.page-wrapper.ring-red .how-close{box-shadow:0 0 0 3px rgba(220,53,69,.10)}
.page-wrapper.ring-red .how-close:hover{filter:drop-shadow(0 0 10px rgba(220,53,69,.35))}
.page-wrapper.ring-red .eco-item:hover{box-shadow:0 0 15px rgba(220,53,69,.18)}
.page-wrapper.ring-red .footer-link:hover{filter:drop-shadow(0 0 6px rgba(220,53,69,.35))}
.page-wrapper.ring-red .free-note{background:rgba(40,10,12,.28);border-color:rgba(220,53,69,.20)}
html[data-theme="light"] .page-wrapper.ring-red .free-note{background:rgba(220,53,69,.06);border-color:rgba(220,53,69,.18)}

.kcalb-footer{width:100%;display:flex;justify-content:center;align-items:center;margin:8px 0 12px}
.kcalb-link{display:inline-block;line-height:0;-webkit-tap-highlight-color:transparent;user-select:none;text-decoration:none}
.kcalb-link:hover{transform:none;filter:none;box-shadow:none}
.kcalb-link:active{transform:none}
.kcalb-link:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
.kcalb-logo-img{width:30%;max-width:180px;min-width:110px;height:auto;display:block;margin:0 auto;filter:none!important;-webkit-filter:none!important;mix-blend-mode:normal!important;opacity:.92}
html[data-theme="light"] .kcalb-logo-img{opacity:.96}
@media (max-width:600px){.kcalb-logo-img{width:45%;max-width:200px}}
footer.footer-centered .kcalb-footer{width:100%;display:flex;justify-content:center;align-items:center}
footer.footer-centered .kcalb-footer .kcalb-link{display:inline-block;line-height:0;text-decoration:none;max-width:600px}
footer.footer-centered .kcalb-footer img.kcalb-logo-img{width:30%!important;height:auto!important;max-width:180px!important;min-width:110px;display:block;margin:0 auto;filter:none!important;-webkit-filter:none!important;mix-blend-mode:normal!important}

@media (max-width:600px){
  .page-wrapper{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:calc(12px + env(safe-area-inset-bottom));padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
  .outer-container{padding:14px;margin:12px 0}
  .inner-card{padding:40px 14px}
  .inobox-mode-container{top:25px;right:25px}
  .btn-primary,.btn-secondary{width:100%}
  .footer-links{gap:4px}
  .footer-link,.footer-sep{font-size:10px}
  .how-dialog{max-width:340px}
  .kcalb-under-eco img{width:112px;max-width:112px}
  .h1-res,
  .title,
  .title-confirm,
  .title-404{font-size:28px;margin:18px 0 12px 0}
  .h1-res span,
  .title .text-white,
  .title-confirm .text-white,
  .title-404 .line-sub{font-size:20px}
}

@supports (-webkit-touch-callout: none){
  .terms-page .toc-actions .toc-btn,
  .cookie-page .toc-actions .toc-btn{
    overflow:hidden;
    -webkit-mask-image:-webkit-radial-gradient(white, black);
  }
}