:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;

--success:#16a34a;
--danger:#dc2626;

--bg:#ffffff;
--surface:#f8fafc;

--text:#111827;
--text-sub:#475569;

--border:#d1d5db;

--radius-sm:8px;
--radius-md:12px;
--radius-lg:20px;

--shadow:
0 -4px 24px rgba(0,0,0,.18);

--safe-top:
env(safe-area-inset-top);

--safe-bottom:
env(safe-area-inset-bottom);

--sheet-height:
min(55vh,700px);

}

*{
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}

html,
body{

margin:0;
padding:0;

width:100%;
height:100%;

overflow:hidden;

background:var(--bg);
color:var(--text);

font-family:
-apple-system,
BlinkMacSystemFont,
"Helvetica Neue",
sans-serif;

text-size-adjust:100%;
-webkit-text-size-adjust:100%;

}

body{

touch-action:manipulation;

overscroll-behavior:none;

}

button,
input{

font:inherit;

}

button{

touch-action:manipulation;

}

#map{

position:fixed;

top:0;
left:0;
right:0;
bottom:0;

z-index:1;

}

.floatingButton{

position:fixed;

top:
calc(
16px +
var(--safe-top)
);

right:16px;

width:56px;
height:56px;

border:none;

border-radius:50%;

background:
var(--primary);

color:#fff;

font-size:24px;
font-weight:700;

box-shadow:
0 4px 16px rgba(0,0,0,.25);

z-index:1000;

cursor:pointer;

transition:
transform .15s ease,
background .15s ease;

}

.floatingButton:hover{

background:
var(--primary-dark);

}

.floatingButton:active{

transform:
scale(.95);

}

#sheet{

position:fixed;

left:0;
right:0;
bottom:0;

height:
var(--sheet-height);

background:
var(--bg);

border-radius:
var(--radius-lg)
var(--radius-lg)
0
0;

box-shadow:
var(--shadow);

padding:
12px
12px
max(
12px,
var(--safe-bottom)
);

overflow-y:auto;

-webkit-overflow-scrolling:touch;

overscroll-behavior:contain;

z-index:100;

}

#sheetHandle{

width:48px;
height:5px;

margin:
0 auto
12px;

background:#cbd5e1;

border-radius:999px;

}

.sheetHeader{

display:flex;

justify-content:
space-between;

align-items:center;

gap:12px;

margin-bottom:12px;

}

#appTitle{

margin:0;

font-size:20px;
font-weight:700;

line-height:1.2;

}

#gpsStatus{

margin-top:4px;

font-size:12px;

color:
var(--text-sub);

}

#navStatus{

font-size:12px;

padding:
6px
10px;

background:#e2e8f0;

border-radius:999px;

white-space:nowrap;

flex-shrink:0;

}

.navigationSection{

display:flex;

gap:8px;

margin-bottom:12px;

}

.navigationSection button{

flex:1;

height:48px;

border:none;

border-radius:
var(--radius-md);

background:
var(--primary);

color:#fff;

font-size:15px;
font-weight:700;

cursor:pointer;

transition:
transform .15s ease,
background .15s ease;

}

.navigationSection button:hover{

background:
var(--primary-dark);

}

.navigationSection button:active{

transform:
scale(.98);

}

.statusSection{

border:
1px solid
var(--border);

border-radius:
var(--radius-md);

padding:10px;

margin-bottom:14px;

background:
var(--surface);

}

.statusRow{

display:flex;

justify-content:
space-between;

align-items:center;

gap:10px;

padding:5px 0;

font-size:14px;

}

.addSection,
.routeSection,
.errorSection,
.listSection{

margin-bottom:14px;

}

.addSection h2,
.routeSection h2,
.errorSection h2,
.listSection h2{

margin:
0 0 8px;

font-size:16px;
font-weight:700;

}

.helpText{

font-size:12px;

color:
var(--text-sub);

margin-bottom:8px;

}

#selectedPoint{

padding:10px;

border:
1px solid
var(--border);

border-radius:
var(--radius-sm);

background:
var(--surface);

font-size:12px;

line-height:1.4;

word-break:break-all;

margin-bottom:8px;

min-height:42px;

}

#nameInput,
#memoInput{

width:100%;

height:44px;

padding:
0 12px;

border:
1px solid
var(--border);

border-radius:
var(--radius-sm);

background:#fff;

margin-bottom:8px;

font-size:14px;

outline:none;

}

#nameInput:focus,
#memoInput:focus{

border-color:
var(--primary);

box-shadow:
0 0 0 3px
rgba(37,99,235,.15);

}

#savePointBtn{

width:100%;

height:48px;

border:none;

border-radius:
var(--radius-md);

background:
var(--success);

color:#fff;

font-size:15px;
font-weight:700;

cursor:pointer;

transition:
transform .15s ease;

}

#savePointBtn:active{

transform:
scale(.98);

}

#savePointBtn:disabled{

opacity:.5;

cursor:not-allowed;

transform:none;

}

#routeInfo,
#messageBox{

padding:10px;

border:
1px solid
var(--border);

border-radius:
var(--radius-md);

background:
var(--surface);

font-size:13px;

line-height:1.4;

word-break:break-word;

overflow:auto;

max-height:120px;

}

#emptyState{

padding:12px;

border:
1px dashed
var(--border);

border-radius:
var(--radius-md);

text-align:center;

font-size:13px;

color:
var(--text-sub);

margin-bottom:8px;

}

#placeList{

display:flex;

flex-direction:column;

gap:8px;

max-height:40vh;

overflow-y:auto;

-webkit-overflow-scrolling:touch;

}

.place{

border:
1px solid
var(--border);

border-radius:
var(--radius-md);

padding:10px;

background:#fff;

}

.placeTitle{

font-size:15px;
font-weight:700;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

}

.placeMeta{

margin-top:4px;

font-size:12px;

color:
var(--text-sub);

word-break:break-all;

line-height:1.4;

}

.placeActions{

display:flex;

gap:8px;

margin-top:8px;

}

.placeDelete{

height:40px;

padding:
0 12px;

border:none;

border-radius:
var(--radius-sm);

background:
var(--danger);

color:#fff;

font-weight:700;

cursor:pointer;

transition:
transform .15s ease;

}

.placeDelete:active{

transform:
scale(.98);

}

.hidden{

display:none !important;

}

@media (max-width:480px){

.navigationSection{

flex-wrap:wrap;

}

.navigationSection button{

min-width:30%;

}

}

@media (prefers-color-scheme:dark){

:root{

--bg:#111827;
--surface:#1e293b;

--text:#f8fafc;
--text-sub:#cbd5e1;

--border:#334155;

}

#sheet{

background:
var(--bg);

}

#nameInput,
#memoInput{

background:
#0f172a;

color:
var(--text);

}

.place{

background:
#0f172a;

}

#routeInfo,
#messageBox,
#selectedPoint,
.statusSection{

background:
#1e293b;

}

#navStatus{

background:
#334155;

color:
#f8fafc;

}

#sheetHandle{

background:
#64748b;

}

}

@media (prefers-reduced-motion:reduce){

*{

transition:none !important;

animation:none !important;

}

}
#sheet{

transition:
transform .25s ease;

}

#sheet.collapsed{

transform:
translateY(
calc(
100% - 50px
)
);

}

#sheetHandle{

cursor:pointer;

font-size:18px;

font-weight:bold;

text-align:center;

user-select:none;

}
#topTarget{

position:fixed;

top:
calc(
80px +
env(safe-area-inset-top)
);

left:50%;

transform:
translateX(-50%);

max-width:80%;

padding:
10px 16px;

background:
rgba(
255,
255,
255,
0.95
);

color:#111827;

border-radius:999px;

box-shadow:
0 2px 8px rgba(0,0,0,.2);

font-size:14px;

font-weight:700;

z-index:1000;

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

}
#topMemo{

position:fixed;

top:
calc(
122px +
env(safe-area-inset-top)
);

left:50%;

transform:
translateX(-50%);

max-width:85%;

padding:
8px 12px;

background:
rgba(
255,
255,
255,
0.9
);

color:#111827;

border-radius:12px;

font-size:12px;

z-index:1000;

text-align:center;

}