.calculator{max-width:1200px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);border-radius:22px;padding:25px;box-shadow:0 10px 30px rgba(26,75,95,.08);margin:30px auto;display:flex;flex-direction:column;gap:25px;border:1px solid #d9e3ee;position:relative;overflow:hidden}.calculator::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(107,158,158,.12),transparent 38%),radial-gradient(circle at bottom left,rgba(26,75,95,.08),transparent 35%);pointer-events:none}.input-row{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;align-items:center;position:relative;z-index:1}.input-group{display:flex;flex-direction:column;min-width:150px;flex:1}.input-group label{margin-bottom:8px;font-weight:700;color:#2e546a;font-size:15px}.form-control{width:100%;padding:12px 15px;background:#fefcf5;border:1px solid #ecdca8;border-radius:12px;font-size:16px;font-family:inherit;text-align:center;transition:border-color .2s ease,box-shadow .2s ease;color:#1a3f5c}.form-control:focus{border-color:#1a4b5f;outline:none;box-shadow:0 0 0 4px rgba(26,75,95,.08);background:#fff}.mode-selector{min-width:180px}.mode-selector select{width:100%}.btn-row{display:flex;justify-content:center;width:100%;margin-top:10px;position:relative;z-index:1}.btn{background:linear-gradient(135deg,#1a4b5f 0%,#2b6a79 100%);color:#fff;border:0;padding:12px 28px;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;min-width:160px;height:52px;box-shadow:0 8px 18px rgba(26,75,95,.14)}.btn:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(26,75,95,.18);filter:saturate(1.03)}.comparison-area{display:flex;justify-content:center;align-items:flex-end;gap:0px;margin:30px 0;min-height:400px;width:100%;overflow:hidden;position:relative;z-index:1}.person-figure{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:48%;max-width:170px;margin:0 -18px;position:relative}.svg-container{width:100%;display:flex;justify-content:center;align-items:flex-end;min-height:300px;max-height:500px}.svg-container svg{max-height:100%;width:auto;transition:height 0.5s ease}.person-info{text-align:center;margin-top:15px;width:auto}.person-name{display:block;background:#1a4b5f;color:#fff;padding:8px 15px;border-radius:12px;font-weight:700;margin-bottom:5px}.person-height{font-size:18px;color:#6b9e9e;font-weight:700}.result-container{background:#fefcf5;border-radius:16px;padding:12px;margin-top:20px;border:1px solid #ecdca8;border-right:6px solid #6b9e9e;display:none;box-shadow:0 6px 16px rgba(0,0,0,.04);position:relative;z-index:1}.result-title{color:#1a4b5f;font-size:18px;margin-bottom:12px;text-align:center;font-weight:800}.result-value{font-size:20px;font-weight:800;color:#1a3f5c;text-align:center;margin:10px 0}.result-details{color:#5a6c7d;text-align:center;font-size:14px;margin-bottom:16px}.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px}.stat-card{padding:10px;border-radius:12px;text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:70px;background:#fff;border:1px solid #e0e7ef;transition:all 0.2s;box-shadow:0 4px 12px rgba(0,0,0,.02)}.stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,75,95,.08)}.stat-title{font-weight:700;margin-bottom:6px;font-size:13px;color:#2e546a}.stat-value{font-size:16px;font-weight:800;color:#1a3f5c}.content-section{background:#fff;border-radius:16px;padding:30px;margin:30px 0;box-shadow:0 6px 16px rgba(0,0,0,.04);border:1px solid #e0e7ef;position:relative;z-index:1}@media (max-width:768px){.input-row{flex-direction:column;align-items:stretch}.mode-selector{align-self:flex-start;width:auto;min-width:180px;margin-bottom:15px}.height-inputs{display:flex;flex-direction:row;gap:15px;width:100%}.height-inputs .input-group{flex:1}.btn-row{justify-content:center}.btn{width:auto;min-width:160px}.comparison-area{flex-direction:row;gap:0px;min-height:350px}.person-figure{width:49%;max-width:160px;margin:0 -3px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:10px}.page-title{font-size:24px}.result-container{padding:10px;border-radius:12px}.result-title{font-size:16px;margin-bottom:10px}.result-value{font-size:18px;margin:8px 0}.result-details{font-size:13px;margin-bottom:12px}.stats-grid{grid-template-columns:repeat(1,1fr);gap:8px}.stat-card{padding:8px;min-height:60px}.stat-title{font-size:12px}.stat-value{font-size:15px}}@media (min-width:769px){.input-row{flex-direction:row;justify-content:center;align-items:center}.mode-selector{margin-left:10px}.height-inputs{display:flex;gap:15px;flex:2}.btn-row{justify-content:center}.comparison-area{gap:0px}.person-figure{width:48%;max-width:170px;margin:0 -18px}}@media (max-width:640px){.input-row{flex-direction:row;flex-wrap:wrap;gap:12px}.input-group{min-width:calc(50% - 12px);flex:1 1 auto}.mode-selector{min-width:100%}.height-inputs{width:100%}.btn{width:100%}}@media (max-width:480px){.input-row{flex-direction:column;gap:10px}.input-group{min-width:100%}.height-inputs{flex-direction:column;gap:10px}.height-inputs .input-group{width:100%}.btn{width:100%;min-width:unset}.comparison-area{gap:0px}.person-figure{width:49%;max-width:150px;margin:0 -2px}.svg-container{min-height:250px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}.result-container{padding:8px}.result-title{font-size:15px}.result-value{font-size:16px}.result-details{font-size:12px}.stat-card{padding:8px;min-height:56px}.stat-title{font-size:12px}.stat-value{font-size:14px}}