.percent-page-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 80% 18%,rgba(255,205,69,.25),transparent 23%),radial-gradient(circle at 18% 90%,rgba(51,201,159,.2),transparent 29%),linear-gradient(135deg,#173b37,#1f4e47 60%,#2b6154)}
.percent-page-hero:before,.percent-page-hero:after{content:"%";position:absolute;color:rgba(255,255,255,.055);font-weight:900;line-height:1;pointer-events:none}.percent-page-hero:before{right:8%;top:-38px;font-size:220px;transform:rotate(-12deg)}.percent-page-hero:after{left:6%;bottom:-62px;font-size:150px;transform:rotate(18deg)}
.percent-page-hero h1,.percent-page-hero p,.percent-hero-badge{position:relative;z-index:1}.percent-hero-badge{display:inline-flex;align-items:center;gap:7px;margin-bottom:13px;padding:7px 12px;border:1px solid rgba(255,255,255,.17);border-radius:999px;background:rgba(255,255,255,.08);color:#dff9ef;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.percent-hero-badge span{color:#f5c64c;font-size:9px}
.percent-app{width:100%;max-width:1240px;margin:0 auto;padding:0 28px 42px}.percent-mode-panel{margin-bottom:18px;padding:22px;border:1px solid #dce5e1;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(23,59,55,.07)}.percent-mode-heading{display:flex;align-items:center;gap:12px;margin-bottom:17px}.percent-mode-heading>span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e6f5ef;color:#16765f;font-weight:900}.percent-mode-heading h2{margin:0;color:#183c34;font-size:18px}.percent-mode-heading p{margin:4px 0 0;color:#71847f;font-size:13px}
.percent-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.percent-tabs button{display:flex;min-width:0;min-height:105px;flex-direction:column;align-items:flex-start;padding:14px;border:1px solid #dbe5e1;border-radius:13px;background:#f9fbfa;color:#566d67;text-align:left;cursor:pointer;transition:.18s}.percent-tabs button:hover{border-color:#91c9ba;transform:translateY(-1px)}.percent-tabs button.active{border-color:#269175;background:linear-gradient(145deg,#eaf8f3,#fff);box-shadow:inset 0 0 0 1px rgba(38,145,117,.12),0 7px 18px rgba(25,109,87,.08);color:#155f4d}.percent-tabs button>span{display:grid;place-items:center;width:28px;height:28px;margin-bottom:9px;border-radius:8px;background:#e8f3ef;color:#21866c;font-size:17px;font-weight:900}.percent-tabs strong{font-size:12px;line-height:1.3}.percent-tabs small{margin-top:5px;color:#82928e;font-size:10px;line-height:1.35}
.percent-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(410px,1.08fr);gap:18px;align-items:start}.percent-app .panel{padding:23px;border:1px solid #dce5e1;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(23,59,55,.07)}.percent-app .panel__title{display:flex;gap:8px;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid #e4ebe8;color:#60736f;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.percent-results{position:sticky;top:86px}
.percent-equation-input{display:grid;grid-template-columns:1fr 48px 1fr;gap:9px;align-items:end}.percent-field label{display:block;margin-bottom:8px;color:#536a65;font-size:11px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}.percent-input-wrap{position:relative}.percent-input-wrap input{width:100%;min-height:57px;padding:13px 48px 13px 14px;border:1px solid #cbd9d5;border-radius:12px;background:#f8fbfa;color:#172d29;font:800 19px/1.2 Arial,sans-serif;outline:none;transition:.18s}.percent-input-wrap input:focus{border-color:#279879;background:#fff;box-shadow:0 0 0 4px rgba(39,152,121,.11)}.percent-input-wrap input.invalid{border-color:#d9485a;box-shadow:0 0 0 3px rgba(217,72,90,.1)}.percent-input-wrap span{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#72847f;font-size:13px;font-weight:800}.percent-equation-symbol{padding-bottom:18px;color:#7b8c87;font-size:12px;font-weight:800;text-align:center}.percent-direction{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px;border:1px solid #dce5e1;border-radius:12px;background:#f7faf9}.percent-direction>span{color:#61756f;font-size:11px;font-weight:800;text-transform:uppercase}.percent-direction>div{display:flex;gap:6px}.percent-direction button{padding:8px 12px;border:1px solid #d4e0dc;border-radius:9px;background:#fff;color:#637670;font-weight:700;cursor:pointer}.percent-direction button.active{border-color:#278f74;background:#e8f6f1;color:#17644f}
.percent-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}.percent-quick>span{margin-right:3px;color:#778984;font-size:11px;font-weight:800}.percent-quick button{padding:7px 10px;border:1px solid #d6e1de;border-radius:999px;background:#fff;color:#596d68;font-size:11px;font-weight:800;cursor:pointer}.percent-quick button:hover,.percent-quick button.active{border-color:#2a987b;background:#eaf7f2;color:#147158}.percent-error{min-height:18px;margin-top:10px;color:#bf3045;font-size:12px;line-height:1.5}.percent-formula-card{margin-top:8px;padding:15px;border:1px solid #cce4dc;border-radius:13px;background:linear-gradient(145deg,#edf8f4,#fff)}.percent-formula-card span{display:block;color:#668079;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.percent-formula-card strong{display:block;margin:7px 0 5px;color:#183d34;font:800 16px/1.4 "Courier New",monospace;overflow-wrap:anywhere}.percent-formula-card small{color:#6e817c;font-size:11px;line-height:1.5}
.percent-invalid{padding:14px;border:1px solid #f1c4cc;border-radius:12px;background:#fff5f6;color:#9d2e40}.percent-invalid strong,.percent-invalid span{display:block}.percent-invalid span{margin-top:4px;font-size:12px}.percent-result-main{text-align:center;padding:7px 0 19px}.percent-result-main>span{display:block;color:#69807a;font-size:12px;font-weight:800;text-transform:uppercase}.percent-result-main>strong{display:block;margin:7px 0 4px;color:#143f35;font-size:43px;line-height:1.05;letter-spacing:-.04em;overflow-wrap:anywhere}.percent-result-main>small{color:#72847f;font-size:12px}.percent-visuals{display:grid;grid-template-columns:155px 1fr;gap:16px;padding:16px;border:1px solid #e0e9e6;border-radius:15px;background:#fafcfb}.percent-donut-card{text-align:center}.percent-donut{display:grid;place-items:center;width:112px;height:112px;margin:0 auto;border-radius:50%;background:conic-gradient(#29a17f 0 20%,#e5ece9 20% 100%);transition:background .35s}.percent-donut:before{content:"";grid-area:1/1;width:78px;height:78px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #e8eeec}.percent-donut>div{z-index:1;grid-area:1/1}.percent-donut strong,.percent-donut span{display:block}.percent-donut strong{color:#16483a;font-size:18px}.percent-donut span{margin-top:2px;color:#7a8c87;font-size:9px;text-transform:uppercase}.percent-donut-card p{margin:8px 0 0;color:#738681;font-size:10px;line-height:1.35}.percent-bars-card{display:flex;flex-direction:column;justify-content:center}.percent-bars-title{display:flex;justify-content:space-between;gap:8px;margin:7px 0 5px;color:#61756f;font-size:11px}.percent-bars-title strong{color:#254d43}.percent-bar{height:12px;overflow:hidden;border-radius:999px;background:#e7edeb}.percent-bar span{display:block;width:20%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#35b790,#1f8d70);transition:width .35s}.percent-bar--muted span{width:100%;background:#b7c8c3}
.percent-insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.percent-insight-grid>div{padding:12px 8px;border:1px solid #e0e8e5;border-radius:11px;text-align:center}.percent-insight-grid span,.percent-insight-grid strong{display:block}.percent-insight-grid span{color:#798a85;font-size:9px;font-weight:800;text-transform:uppercase}.percent-insight-grid strong{margin-top:5px;color:#244a40;font-size:13px}.percent-actions{display:flex;align-items:center;gap:12px;margin-top:15px}.percent-actions button{padding:10px 14px;border:0;border-radius:10px;background:#1f8067;color:#fff;font-weight:800;cursor:pointer}.percent-actions button:hover{background:#176d57}.percent-actions span{color:#278269;font-size:12px}
.percent-examples-panel{margin-top:18px}.percent-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:17px}.percent-section-heading span{display:block;margin-bottom:5px;color:#20836a;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.percent-section-heading h2{margin:0;color:#193d34;font-size:20px}.percent-section-heading p{margin:5px 0 0;color:#72847f;font-size:12px}.percent-section-heading>strong{flex:0 0 auto;padding:8px 11px;border-radius:999px;background:#e8f5f0;color:#1c745d;font-size:12px}
.percent-examples{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.percent-examples button{display:grid;grid-template-columns:33px 1fr;grid-template-rows:auto auto;gap:3px 9px;align-items:center;padding:13px;border:1px solid #dce5e2;border-radius:12px;background:#fff;color:#24463e;text-align:left;cursor:pointer}.percent-examples button:hover{border-color:#7fc1b0;background:#f3faf7}.percent-examples span{grid-row:1/3;font-size:22px}.percent-examples strong{font-size:11px}.percent-examples small{color:#7a8b86;font-size:10px}
.percent-info{max-width:1184px}.percent-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.percent-seo-grid article{padding:19px;border:1px solid #dce5e2;border-radius:14px;background:#fff}.percent-seo-grid h3{margin:0 0 8px;color:#21463d;font-size:16px}.percent-seo-grid p{margin:0;color:#657872;font-size:13px;line-height:1.7}.percent-related{max-width:1184px!important}.percent-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.percent-related-grid a{display:flex;align-items:center;gap:14px;padding:17px;border:1px solid #dae5e1;border-radius:14px;background:#fff;color:inherit;text-decoration:none}.percent-related-grid a:hover{border-color:#8bc8b8;transform:translateY(-1px)}.percent-related-grid a>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#e9f6f1;color:#20856b;font-size:21px;font-weight:900}.percent-related-grid a div{flex:1}.percent-related-grid strong{color:#204239}.percent-related-grid p{margin:4px 0 0;color:#758681;font-size:12px}.percent-related-grid b{color:#21866b;font-size:19px}
.percent-results.has-error .percent-result-main,.percent-results.has-error .percent-visuals,.percent-results.has-error .percent-insight-grid,.percent-results.has-error .percent-actions{display:none}
@media(max-width:1050px){.percent-tabs{grid-template-columns:repeat(3,1fr)}.percent-layout{grid-template-columns:1fr}.percent-results{position:relative;top:auto}.percent-examples{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.percent-app{padding:0 12px 28px}.percent-mode-panel,.percent-app .panel{padding:16px;border-radius:15px}.percent-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:5px}.percent-tabs button{flex:0 0 175px;scroll-snap-align:start}.percent-equation-input{grid-template-columns:1fr}.percent-equation-symbol{padding:0;text-align:left}.percent-visuals{grid-template-columns:1fr}.percent-bars-card{min-height:95px}.percent-seo-grid,.percent-related-grid{grid-template-columns:1fr}.percent-section-heading{display:block}.percent-section-heading>strong{display:inline-block;margin-top:10px}.percent-result-main>strong{font-size:36px}}
@media(max-width:460px){.percent-examples{grid-template-columns:1fr}.percent-insight-grid{grid-template-columns:1fr}.percent-tabs button{flex-basis:155px}.percent-direction{align-items:flex-start;flex-direction:column}.percent-direction>div{width:100%}.percent-direction button{flex:1}}
@media(prefers-reduced-motion:reduce){.percent-tabs button,.percent-donut,.percent-bar span{transition:none}}
.percent-direction[hidden]{display:none!important}
.percent-app{padding-top:28px}
@media(max-width:700px){.percent-app{padding-top:20px}}
@media(min-width:1051px){
  .percent-layout{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .percent-layout>.panel{height:100%}
  .percent-controls{display:flex;flex-direction:column}
  .percent-formula-card{margin-top:auto}
}