:root {
    --accent: #00d2ff;
    --danger: #ff4757;
    --glass: rgba(15, 15, 20, 0.85);
}

body { margin: 0; overflow: hidden; background: #000; font-family: 'Segoe UI', Roboto, sans-serif; }

#ui-container {
    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
    width: 92%; max-width: 420px; z-index: 1000;
    background: var(--glass); backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1); border-radius: 28px;
    padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    color: white; pointer-events: auto;
}

/* AR中は、背面（カメラ映像）への blur を切って視認性と解像感を優先 */
body.ar-active #ui-container {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 15, 20, 0.92);
}

h3 { margin: 0 0 15px 0; font-weight: 600; font-size: 16px; letter-spacing: 0.5px; }
h3 span { color: var(--accent); }

.control-group label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 10px; opacity: 0.8; }

input[type="range"] {
    width: 100%; height: 4px; border-radius: 2px; background: #333;
    appearance: none; margin-bottom: 20px;
}
input[type="range"]::-webkit-slider-thumb {
    appearance: none; width: 20px; height: 20px; background: #fff;
    border: 3px solid var(--accent); border-radius: 50%;
}

.action-grid { display: flex; flex-direction: column; gap: 12px; }
.landmark-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.scan-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.small { font-size: 11px; opacity: 0.7; margin: 0; line-height: 1.35; }
.select { width: 100%; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.2); color: #fff; }
.btn-sub:disabled, .btn-primary:disabled { opacity: 0.45; filter: saturate(0.7); }
.toggle-group { display: flex; gap: 8px; }
.btn-sub { flex: 1; padding: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; border-radius: 12px; font-size: 13px; }
.btn-sub.active { background: rgba(0, 210, 255, 0.15); border-color: var(--accent); color: var(--accent); }

.btn-primary {
    width: 100%; padding: 16px; border: none; border-radius: 16px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    color: white; font-weight: 700; font-size: 15px;
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.3);
}

#guide-msg { font-size: 10px; text-align: center; margin-top: 12px; opacity: 0.5; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.55); padding: 18px; }
.modal.hidden { display: none; }
.modal-content { width: min(720px, 96vw); background: rgba(15, 15, 20, 0.96); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.7); color: #fff; }
#export-text { width: 100%; height: 42vh; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); color: #dff7ff; padding: 12px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.4; }