:root{
    color-scheme:light;
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --md-primary:#7b52ff;
    --md-on-primary:#ffffff;
    --md-primary-container:#ebddff;
    --md-on-primary-container:#241247;
    --md-secondary:#84543d;
    --md-surface:#fefaf6;
    --md-surface-bright:#fffefd;
    --md-on-surface:#201a17;
    --md-outline:#937c6c;
    --md-outline-variant:#e6d8d0;
    --md-error:#ba1a1a;
    --md-on-error:#fff;
    --elev1:0 6px 18px rgba(33,24,20,0.14);
    --elev2:0 14px 36px rgba(33,24,20,0.18);
    --motion:260ms cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme:dark){
    :root{
        color-scheme:dark;
        --md-primary:#ffb68c;
        --md-on-primary:#3c1600;
        --md-primary-container:#5a2200;
        --md-on-primary-container:#ffdcc5;
        --md-secondary:#f0bda8;
        --md-surface:#1b1714;
        --md-surface-bright:#26201d;
        --md-on-surface:#f8ded2;
        --md-outline:#a28d82;
        --md-outline-variant:#4f4038;
        --md-error:#ffb4ab;
        --md-on-error:#561e1e;
        --elev1:0 8px 24px rgba(0,0,0,0.55);
        --elev2:0 18px 48px rgba(0,0,0,0.6);
    }
}
*{box-sizing:border-box;}
body{
    margin:0;
    min-height:100vh;
    display:flex;
    background:var(--md-surface);
    color:var(--md-on-surface);
    line-height:1.5;
    font-size:1rem;
    transition:background var(--motion);
}
.material-symbols-rounded{
    font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;
}
button{
    font:inherit;
    color:inherit;
    background:none;
    border:none;
    cursor:pointer;
}
.shell{
    flex:1;
    display:flex;
    flex-direction:column;
    background:var(--md-surface-bright);
    min-height:100vh;
}
.app-bar{
    position:sticky;
    top:0;
    z-index:70;
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem 1.25rem;
    backdrop-filter:blur(18px);
    background:color-mix(in srgb,var(--md-surface) 80%,transparent);
    border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    transition:transform var(--motion),box-shadow var(--motion);
}
body.scrolled .app-bar{
    transform:translateY(-4px);
    box-shadow:var(--elev1);
}
.icon-button{
    width:40px;
    height:40px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background 160ms,transform 160ms;
}
.icon-button:hover{background:color-mix(in srgb,var(--md-primary-container) 40%,transparent);}
.icon-button:active{transform:scale(.94);}
.titles h1{margin:0;font-size:1.3rem;letter-spacing:-.01em;}
.titles p{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.2em;color:var(--md-outline);}
.actions{margin-left:auto;display:flex;gap:.4rem;}
.eyebrow{text-transform:uppercase;font-size:.78rem;letter-spacing:.22em;color:var(--md-outline);margin:0 0 .2rem;}
main{
    flex:1;
    padding:1.5rem clamp(1rem,4vw,3rem) 5rem;
    display:grid;
    gap:1.25rem;
    background:linear-gradient(180deg,var(--md-surface-bright),var(--md-surface));
}
.hero{
    border-radius:5px;
    padding:clamp(1.2rem,4vw,2.8rem);
    display:grid;
    gap:1.2rem;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 20% 20%,color-mix(in srgb,var(--md-primary-container) 60%,transparent),var(--md-surface));
    box-shadow:var(--elev1);
}
.hero::after{
    content:"";
    position:absolute;
    inset:1rem;
    border-radius:24px;
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 60%,transparent);
    pointer-events:none;
}
.hero h2{margin:.2rem 0;font-size:clamp(1.7rem,4vw,2.4rem);}
.hero p{margin:0;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem;}
.md-button{
    border-radius:999px;
    padding:.6rem 1.2rem;
    font-weight:600;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    transition:transform 140ms,box-shadow 140ms,background 140ms;
}
.md-button:active{transform:scale(.96);}
.md-button.filled{background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--elev1);}
.md-button.tonal{background:var(--md-primary-container);color:var(--md-on-primary-container);}
.md-button.text{color:var(--md-primary);padding-inline:.4rem;}
.mini-card{
    border-radius:22px;
    padding:1rem;
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    background:color-mix(in srgb,var(--md-surface) 92%,var(--md-surface-bright));
    display:flex;
    flex-direction:column;
    gap:.25rem;
}
.mini-card p{margin:0;font-size:.8rem;letter-spacing:.18em;color:var(--md-outline);}
.mini-card strong{font-size:1.8rem;}
.card{
    background:var(--md-surface-bright);
    border-radius:2px;
    padding:1.4rem;
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 75%,transparent);
    box-shadow:none;
    display:flex;
    flex-direction:column;
    gap:1rem;
    transition:none;
}
.card:hover{box-shadow:none;transform:none;}
.measure-row{
    display:grid;
    gap:1rem;
    grid-template-columns:minmax(260px,32%) minmax(0,68%);
    align-items:start;
}
.input-layout{
    display:grid;
    gap:1rem;
    grid-template-columns:1fr;
    align-items:start;
}
.input-layout > .field-grid{max-width:100%;}
.field-grid{display:grid;gap:1rem;grid-template-columns:1fr;}
label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;}
.input-layout input,select{
    border-radius:2px;
    padding:.7rem 1rem;
    border:1px solid color-mix(in srgb,var(--md-outline) 35%,transparent);
    background:color-mix(in srgb,var(--md-surface) 96%,var(--md-surface-bright));
    color:var(--md-on-surface);
    font-size:1.2rem;
    width:100%;
    line-height:1.25;
    transition:border var(--motion),box-shadow var(--motion);
}
input,select{
    border-radius:2px;
    padding:.7rem 1rem;
    border:1px solid color-mix(in srgb,var(--md-outline) 35%,transparent);
    background:color-mix(in srgb,var(--md-surface) 96%,var(--md-surface-bright));
    color:var(--md-on-surface);
    font-size:1.05rem;
    width:100%;
    line-height:1.25;
    transition:border var(--motion),box-shadow var(--motion);
}
input:focus,select:focus{outline:none;border-color:var(--md-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--md-primary) 30%,transparent);}
.manual-bar{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:space-between;}
.manual-buttons{display:inline-flex;border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);border-radius:999px;overflow:hidden; width: 100%;}
.manual-buttons button{padding:.45rem .9rem;background:color-mix(in srgb,var(--md-primary-container) 50%,transparent);font-weight:600; width: 100%;}
.manual-info{color:var(--md-outline);width: 100%;text-align: center;}
.chip-set{display:flex;flex-wrap:wrap;gap:.5rem;}
.chip{
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    padding:.4rem .9rem;
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    background:color-mix(in srgb,var(--md-surface) 90%,transparent);
    transition:background var(--motion),color var(--motion),box-shadow var(--motion);
}
.chip.active{
    background:var(--md-primary);
    color:var(--md-on-primary);
    box-shadow:var(--elev1);
}
.mode-nav{
    display:flex;
    align-items:center;
    gap:1rem;
    flex-wrap:wrap;
    justify-content:space-between;
}
.mode-nav h4{
    margin:0;
    font-size:.95rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--md-outline);
}
.mode-tabs{
    flex:1;
    display:flex;
    gap:.5rem;
    overflow-x:auto;
    padding-bottom:.3rem;
}
.mode-tabs::-webkit-scrollbar{height:4px;}
.mode-tabs::-webkit-scrollbar-track{background:transparent;}
.mode-tabs::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--md-outline-variant) 60%,transparent);border-radius:999px;}
.hint{
    border-radius:20px;
    padding:1rem 1.1rem;
    border:1px solid color-mix(in srgb,var(--md-primary) 40%,transparent);
    background:color-mix(in srgb,var(--md-primary-container) 60%,var(--md-surface));
}
.hint.danger{background:color-mix(in srgb,var(--md-error) 20%,var(--md-surface));color:var(--md-on-error);}
.result-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.stat{
    border-radius:2px;
    padding:1rem;
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    background:color-mix(in srgb,var(--md-surface) 94%,var(--md-surface-bright));
}
.stat h4{margin:0;font-size:.8rem;text-transform:uppercase;letter-spacing:.16em;color:var(--md-outline);}
.stat strong{display:block;font-size:1.55rem;margin:.3rem 0;}
.stat span{color:var(--md-outline);}
.circular-progress{
    position:relative;
    width:72px;
    height:72px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:.35rem;
}
.circular-progress svg{
    width:72px;
    height:72px;
    transform:rotate(-90deg);
}
.circular-progress circle{
    fill:none;
    stroke-width:6;
}
.circular-progress .track{
    stroke:color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
}
.circular-progress .indicator{
    stroke:var(--md-primary);
    stroke-linecap:round;
    transition:stroke-dashoffset var(--motion),stroke var(--motion);
}
.circular-progress .cp-label{
    position:absolute;
    font-weight:700;
    font-size:.9rem;
    color:var(--md-on-surface);
}
.kaat-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    border-radius:0 0 10px 10px;
    background:color-mix(in srgb,var(--md-surface) 96%,var(--md-surface-bright));
    overflow:hidden;
}
.kaat-table caption{
    text-align:left;
    padding:.75rem 1rem;
    font-weight:700;
    color:var(--md-on-surface);
    background:color-mix(in srgb,var(--md-primary-container) 40%,var(--md-surface));
    border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    border-bottom:none;
    border-radius:0;
}
.kaat-table th,
.kaat-table td{
    padding:.85rem 1rem;
    border-bottom:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
}
.kaat-table tr:last-child th,
.kaat-table tr:last-child td{
    border-bottom:none;
}
.kaat-table th{
    color:var(--md-outline);
    font-weight:600;
}
.kaat-table thead th{
    text-align:center;
}
.kaat-table tbody th{
    text-align:left;
}
.kaat-table td{
    text-align:center;
    font-weight:700;
    color:var(--md-on-surface);
}
.empty{border:1px dashed color-mix(in srgb,var(--md-outline) 45%,transparent);padding:1rem;border-radius:18px;text-align:center;color:var(--md-outline);}
.md-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;}
.md-list li{display:flex;gap:.8rem;align-items:center;padding:.75rem;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);}
.md-list small{color:var(--md-outline);}
.bottom-nav{
    position:sticky;
    bottom:0;
    display:flex;
    gap:.5rem;
    padding:.4rem clamp(.8rem,4vw,2.5rem);
    border-top:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);
    background:color-mix(in srgb,var(--md-surface) 90%,transparent);
    z-index:60;
}
.bottom-nav button{
    flex:1;
    border-radius:18px;
    padding:.4rem;
    text-align:center;
    color:var(--md-outline);
    transition:background var(--motion),color var(--motion);
}
.bottom-nav button.active{
    background:var(--md-primary-container);
    color:var(--md-on-primary-container);
}
.drawer{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    width:min(300px,80vw);
    background:var(--md-surface-bright);
    padding:1.5rem 1.2rem 2rem;
    transform:translateX(-105%);
    transition:transform var(--motion);
    z-index:100;
    box-shadow:var(--elev2);
    display:flex;
    flex-direction:column;
    gap:1rem;
}
body.drawer-open .drawer{transform:none;}
.drawer nav button{
    width:100%;
    border-radius:18px;
    padding:.6rem .8rem;
    display:flex;
    gap:.6rem;
    align-items:center;
    color:var(--md-on-surface);
    transition:background var(--motion);
}
.drawer nav button:hover,
.drawer nav button.active{background:color-mix(in srgb,var(--md-primary-container) 60%,transparent);}
.scrim{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity var(--motion);
    z-index:90;
}
body.drawer-open .scrim{opacity:1;pointer-events:auto;}
.md-dialog{
    position:fixed;
    inset:0;
    padding:1.5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:0;
    background:transparent;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(16px) scale(.96);
    transition:opacity var(--motion),transform var(--motion),visibility var(--motion);
    z-index:130;
}
.md-dialog::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    opacity:0;
    transition:opacity var(--motion);
}
.md-dialog.open{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transform:translateY(0) scale(1);
}
.md-dialog.open::before{
    opacity:1;
}
.md-dialog.closing::before{
    opacity:0;
}
.dialog-body{
    background:var(--md-surface-bright);
    border-radius:26px;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
    box-shadow:var(--elev2);
    transform:translateY(8px) scale(.96);
    opacity:0;
    width:min(480px,100%);
    max-width:calc(100% - 2rem);
}
.md-dialog.open .dialog-body{
    animation:dialogIn var(--motion) forwards;
}
.md-dialog.closing .dialog-body{
    animation:dialogOut 220ms forwards;
}
.md-dialog:not(.open) .dialog-body{animation:none;}
@keyframes dialogIn{
    from{opacity:0;transform:translateY(12px) scale(.96);}
    to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes dialogOut{
    from{opacity:1;transform:translateY(0) scale(1);}
    to{opacity:0;transform:translateY(10px) scale(.96);}
}
.dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;}
.snackbar{
    position:fixed;
    bottom:clamp(4.5rem,6vw,6rem);
    right:clamp(1rem,4vw,3rem);
    transform:translate(120%,0);
    opacity:0;
    padding:.6rem 1.4rem;
    border-radius:999px;
    background:var(--md-on-surface);
    color:var(--md-surface);
    box-shadow:var(--elev1);
    transition:transform var(--motion),opacity var(--motion);
    z-index:120;
}
.snackbar.show{
    transform:translate(0,0);
    opacity:1;
    box-shadow:var(--elev2);
}
@media (min-width:1100px){
    body{padding-left:280px;}
    .drawer{position:fixed;transform:none;width:280px;border-right:1px solid color-mix(in srgb,var(--md-outline-variant) 70%,transparent);box-shadow:none;}
    .scrim{display:none;}
    .bottom-nav{display:none;}
}
@media (max-width:640px){
    .hero,.card{border-radius:2px;}
    .measure-row{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}