.panel-calc,
.panel-calc * { box-sizing: border-box; }
.panel-calc {
    width: 100%; max-width: 760px; margin: 24px auto; padding: 28px;
    border-radius: 18px; background: #fff; color: #111827;
    font-family: Arial, Helvetica, sans-serif; box-shadow: 0 12px 40px rgba(0,0,0,.06);
}
.panel-calc__title { margin: 0 0 8px; font-size: 28px; line-height: 1.2; }
.panel-calc__subtitle { margin: 0 0 22px; color: #6b7280; font-size: 14px; line-height: 1.5; }
.panel-calc__desktop-ar-callout {
    margin: 0 0 24px; padding: 15px 18px; border: 2px solid #f2c94c; border-radius: 14px;
    background: #fff7cc; color: #3b2f00; text-align: center;
    box-shadow: 0 8px 24px rgba(242,201,76,.22);
}
.panel-calc__desktop-ar-callout strong { display:block; font-size:16px; }
.panel-calc__desktop-ar-callout span { display:block; margin-top:5px; font-size:12px; line-height:1.4; }
.panel-calc__section { margin: 0 0 24px; padding: 0 0 24px; border-bottom: 1px solid #e5e7eb; }
.panel-calc__section:last-child { margin-bottom: 0; }
.panel-calc__section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-calc__section-title { margin: 0 0 14px; font-size: 18px; line-height: 1.3; font-weight: 500; }
.panel-calc__section-title--inline { margin:0; }
.panel-calc__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.panel-calc__field { min-width:0; }
.panel-calc__label { display:block; margin:0 0 6px; font-size:14px; line-height:1.35; font-weight:700; }
.panel-calc__input, .panel-calc__select {
    display:block; width:100%; height:46px; margin:0; padding:0 12px; border:1px solid #d1d5db;
    border-radius:10px; outline:none; background:#fff; color:#111827; font:16px Arial,Helvetica,sans-serif;
    transition:border-color .15s ease,box-shadow .15s ease;
}
.panel-calc__select {
    appearance:none; padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 14px center; background-size:12px 7px;
}
.panel-calc__input:focus,.panel-calc__select:focus { border-color:#6b7280; box-shadow:0 0 0 3px rgba(107,114,128,.10); }
.panel-calc__custom-panel-size,.panel-calc__openings { margin-top:14px; }
.panel-calc__advanced-line,.panel-calc__camera-note,.panel-calc__wall-reserve-hint { margin-top:8px; color:#8b93a1; font-size:11px; line-height:1.45; }
.panel-calc__camera-note { margin:0 0 14px; }
.panel-calc__advanced-toggle { appearance:none; border:0; background:transparent; color:inherit; padding:0; text-decoration:underline dotted; cursor:pointer; }
.panel-calc__advanced { margin-top:12px; padding:14px; border:1px solid #e5e7eb; border-radius:10px; background:#f9fafb; }
.panel-calc__advanced-title { margin:0 0 12px; color:#6b7280; font-size:12px; font-weight:700; }
.panel-calc__camera-button {
    appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px;
    padding:0 14px; border:0; border-radius:11px; background:#111827; color:#fff; font-size:13px; font-weight:700; cursor:pointer;
}
.panel-calc__camera-icon { font-size:19px; line-height:1; }
.panel-calc__result { margin-top:22px; padding:20px; border-radius:12px; background:#f0fdf4; color:#166534; }
.panel-calc__result-top { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px; }
.panel-calc__result-label { font-size:15px; line-height:1.4; }
.panel-calc__result-count-wrap { display:inline-flex; align-items:baseline; gap:7px; white-space:nowrap; }
.panel-calc__result-count { font-size:34px; line-height:1; font-weight:800; letter-spacing:-.02em; }
.panel-calc__result-unit { font-size:20px; line-height:1; font-weight:700; }
.panel-calc__details { font-size:14px; line-height:1.65; }

.panel-calc [hidden],
.ar-measure[hidden],
.ar-measure__unsupported[hidden],
.ar-measure [hidden] { display:none !important; }
.ar-measure {
    position:fixed; inset:0; z-index:2147483000; overflow:hidden; color:#fff; background:#0b0d10;
    font-family:Arial,Helvetica,sans-serif; touch-action:none;
}
.ar-measure__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ar-measure__topbar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 14px; background:linear-gradient(rgba(0,0,0,.58),rgba(0,0,0,0)); }
.ar-measure__eyebrow { color:rgba(255,255,255,.72); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.ar-measure__title { margin-top:4px; font-size:20px; font-weight:800; line-height:1.2; }
.ar-measure__close { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(0,0,0,.46); color:#fff; }
.ar-measure__close svg { width:22px; height:22px; }
.ar-measure__close path { stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.ar-measure__status { position:absolute; top:calc(env(safe-area-inset-top,0px) + 88px); left:18px; right:18px; padding:12px 14px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(12,14,18,.64); backdrop-filter:blur(8px); }
.ar-measure__status strong,.ar-measure__status span { display:block; }
.ar-measure__status strong { font-size:14px; }
.ar-measure__status span { margin-top:3px; color:rgba(255,255,255,.76); font-size:11px; line-height:1.35; }
.ar-measure__reticle { position:absolute; left:50%; top:50%; width:54px; height:54px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.78); border-radius:50%; box-shadow:0 0 0 7px rgba(0,0,0,.14); }
.ar-measure__reticle::before,.ar-measure__reticle::after { content:""; position:absolute; background:rgba(255,255,255,.9); }
.ar-measure__reticle::before { width:14px; height:2px; left:18px; top:24px; }
.ar-measure__reticle::after { width:2px; height:14px; left:24px; top:18px; }
.ar-measure__reticle span { position:absolute; width:8px; height:8px; left:21px; top:21px; border-radius:50%; background:#9ca3af; box-shadow:0 0 12px rgba(255,255,255,.5); }
.ar-measure__reticle.is-ready { border-color:#7ef0a2; }
.ar-measure__reticle.is-ready span { background:#42d675; box-shadow:0 0 16px rgba(66,214,117,.8); }
.ar-measure__reticle.is-soft { border-color:#ffd166; }
.ar-measure__reticle.is-soft span { background:#ffd166; box-shadow:0 0 16px rgba(255,209,102,.75); }
.ar-measure__live { position:absolute; left:50%; top:calc(50% + 48px); transform:translateX(-50%); min-width:150px; padding:8px 12px; text-align:center; border-radius:12px; background:rgba(0,0,0,.68); }
.ar-measure__live-label { display:block; color:rgba(255,255,255,.7); font-size:10px; }
.ar-measure__live-value { display:block; margin-top:2px; font-size:21px; }
.ar-measure__bottom { position:absolute; left:0; right:0; bottom:0; padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 18px); background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.78) 28%,rgba(0,0,0,.9)); }
.ar-measure__step { margin-bottom:9px; text-align:center; color:rgba(255,255,255,.78); font-size:12px; font-weight:700; }
.ar-measure__capture,.ar-measure__apply { width:100%; min-height:54px; border:0; border-radius:15px; font-size:16px; font-weight:800; }
.ar-measure__capture { background:#fff; color:#111827; }
.ar-measure__capture:disabled { opacity:.42; }
.ar-measure__apply { background:#42d675; color:#092a16; }
.ar-measure__actions { display:flex; justify-content:center; gap:10px; margin-top:9px; }
.ar-measure__actions button { min-height:36px; padding:0 14px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; }
.ar-measure__unsupported { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:#111827; }
.ar-measure__unsupported-card { max-width:420px; padding:24px; border-radius:18px; background:#fff; color:#111827; text-align:center; }
.ar-measure__unsupported-card strong { display:block; font-size:20px; line-height:1.25; }
.ar-measure__unsupported-card p { color:#6b7280; font-size:14px; line-height:1.5; }
.ar-measure__unsupported-card button { min-height:46px; padding:0 18px; border:0; border-radius:11px; background:#111827; color:#fff; font-weight:700; }

@media (max-width:620px) {
    .panel-calc { margin:14px auto; padding:20px; border-radius:14px; }
    .panel-calc__grid { grid-template-columns:1fr; }
    .panel-calc__title { font-size:24px; }
    .panel-calc__desktop-ar-callout { display:none; }
    .panel-calc__section-head { align-items:flex-start; flex-direction:column; }
    .panel-calc__camera-button { width:100%; }
}
@media (min-width:621px) {
    .panel-calc__camera-button { opacity:.7; }
}

/* 5.3: the XR compositor owns camera pixels; DOM must stay transparent. */
.ar-measure, .ar-measure * { box-sizing:border-box; }
.ar-measure.is-xr-active { background:transparent !important; }
.ar-measure:xr-overlay { background:transparent !important; }
.ar-measure::backdrop { background:transparent; }
.ar-measure__canvas { background:transparent !important; }
.ar-measure button { appearance:none; margin:0; cursor:pointer; text-align:center; font-family:Arial,Helvetica,sans-serif; line-height:1.2; text-transform:none; letter-spacing:normal; }
.ar-measure button:disabled { cursor:default; }
.ar-measure__status span { font-size:14px; }
.ar-measure__status strong { font-size:16px; }
.ar-measure__step, .ar-measure__live-label { font-size:14px; }
.ar-measure__capture { padding:12px 16px; }
.ar-measure__apply { padding:12px 16px; margin-top:10px !important; }
.ar-measure__actions button { min-height:42px; }
.ar-measure__bottom { padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px); }
@media (max-height:560px) {
    .ar-measure__status { left:12px; right:auto; width:40%; top:80px; }
    .ar-measure__bottom { left:auto; width:45%; padding:10px 12px; }
    .ar-measure__title { font-size:18px; }
}

/* 7.2: free iPhone camera + gyroscope measuring mode. */
.ios-measure[hidden], .ios-measure [hidden] { display:none !important; }
.ios-measure {
    position:fixed; inset:0; z-index:2147483002; overflow:hidden; background:#0b0d10; color:#fff;
    font-family:Arial,Helvetica,sans-serif; touch-action:none;
}
.ios-measure, .ios-measure * { box-sizing:border-box; }
.ios-measure__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.ios-measure__topbar { position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:calc(env(safe-area-inset-top,0px) + 18px) 18px 18px; background:linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,0)); }
.ios-measure__eyebrow { color:rgba(255,255,255,.74); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.ios-measure__title { margin-top:4px; font-size:20px; line-height:1.2; font-weight:800; }
.ios-measure__close { width:44px; height:44px; flex:0 0 44px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(0,0,0,.48); color:#fff; }
.ios-measure__close svg { width:22px; height:22px; }
.ios-measure__close path { stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.ios-measure__status { position:absolute; top:calc(env(safe-area-inset-top,0px) + 88px); left:18px; right:18px; padding:12px 14px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(12,14,18,.70); backdrop-filter:blur(8px); }
.ios-measure__status strong,.ios-measure__status span { display:block; }
.ios-measure__status strong { font-size:15px; }
.ios-measure__status span { margin-top:4px; color:rgba(255,255,255,.8); font-size:12px; line-height:1.4; }
.ios-measure__setup { position:absolute; top:calc(env(safe-area-inset-top,0px) + 166px); left:18px; right:18px; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; border-radius:14px; background:rgba(0,0,0,.58); backdrop-filter:blur(8px); }
.ios-measure__setup label > span:first-child { display:block; margin-bottom:5px; font-size:11px; color:rgba(255,255,255,.82); }
.ios-measure__input-row { display:flex; align-items:center; gap:7px; }
.ios-measure__input-row input { width:88px; height:38px; padding:0 9px; border:1px solid rgba(255,255,255,.25); border-radius:9px; background:rgba(255,255,255,.94); color:#111827; font-size:16px; }
.ios-measure__input-row b { font-size:13px; }
.ios-measure__setup small { grid-column:1/-1; color:rgba(255,255,255,.72); font-size:10px; line-height:1.35; }
.ios-measure__reticle { position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.84); border-radius:50%; box-shadow:0 0 0 7px rgba(0,0,0,.14); }
.ios-measure__reticle::before,.ios-measure__reticle::after { content:""; position:absolute; background:#fff; }
.ios-measure__reticle::before { left:19px; top:27px; width:16px; height:2px; }
.ios-measure__reticle::after { left:26px; top:20px; width:2px; height:16px; }
.ios-measure__reticle span { position:absolute; left:23px; top:23px; width:8px; height:8px; border-radius:50%; background:#9ca3af; }
.ios-measure__reticle.is-ready { border-color:#7ef0a2; }
.ios-measure__reticle.is-ready span { background:#42d675; box-shadow:0 0 16px rgba(66,214,117,.85); }
.ios-measure__live { position:absolute; left:50%; top:calc(50% + 50px); transform:translateX(-50%); min-width:150px; padding:8px 12px; text-align:center; border-radius:12px; background:rgba(0,0,0,.68); }
.ios-measure__live span,.ios-measure__live strong { display:block; }
.ios-measure__live span { color:rgba(255,255,255,.72); font-size:10px; }
.ios-measure__live strong { margin-top:2px; font-size:20px; }
.ios-measure__bottom { position:absolute; left:0; right:0; bottom:0; padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 24px); background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.8) 28%,rgba(0,0,0,.94)); }
.ios-measure__step { margin-bottom:9px; text-align:center; color:rgba(255,255,255,.84); font-size:13px; font-weight:700; }
.ios-measure__capture,.ios-measure__apply { width:100%; min-height:54px; border:0; border-radius:15px; padding:12px 16px; font-size:16px; font-weight:800; }
.ios-measure__capture { background:#fff; color:#111827; }
.ios-measure__capture:disabled { opacity:.42; }
.ios-measure__apply { margin-top:10px; background:#42d675; color:#092a16; }
.ios-measure__actions { display:flex; justify-content:center; gap:10px; margin-top:9px; }
.ios-measure__actions button { min-height:42px; padding:0 14px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.08); color:#fff; }
.ios-measure__unsupported { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:24px; background:#111827; }
.ios-measure__unsupported-card { max-width:420px; padding:24px; border-radius:18px; background:#fff; color:#111827; text-align:center; }
.ios-measure__unsupported-card strong { display:block; font-size:20px; }
.ios-measure__unsupported-card p { color:#6b7280; font-size:14px; line-height:1.5; }
.ios-measure__unsupported-card button { min-height:46px; padding:0 18px; border:0; border-radius:11px; background:#111827; color:#fff; font-weight:700; }
@media (max-height:650px) { .ios-measure__setup { top:132px; } .ios-measure__status { top:76px; } }