:root{
  --app-bg:#eef2f7;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#dfe5ec;
  --blue:#4c82c3;
  --blue-soft:#eaf3ff;
  --sky:#dceefe;
  --mint:#dff4ec;
  --mint-strong:#4b9b82;
  --lav:#eee9ff;
  --lav-strong:#7868b7;
  --pink:#fde8ef;
  --pink-strong:#b86282;
  --amber:#fff1d8;
  --amber-strong:#a66d16;
  --red:#ffe6e6;
  --red-strong:#c34f4f;
  --green:#e5f5e9;
  --green-strong:#478257;
  --shadow:0 8px 26px rgba(45,62,80,.08);
  --shadow-soft:0 4px 14px rgba(45,62,80,.06);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--app-bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans JP",sans-serif}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
button,input,textarea,select{font:inherit}
button{border:0;cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .09s ease,box-shadow .09s ease,filter .09s ease,background-color .12s ease}
button:active{transform:translateY(2px) scale(.975);filter:brightness(.94);box-shadow:inset 0 2px 8px rgba(31,41,55,.12)!important}
svg.ui-icon{display:block;width:20px;height:20px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.ui-icon.sm{width:16px;height:16px}svg.ui-icon.lg{width:28px;height:28px}
.app-shell{max-width:760px;margin:0 auto;min-height:100vh;padding:16px 15px 116px}
.topbar{background:linear-gradient(135deg,#e5f2ff 0%,#f3edff 100%);border:1px solid #d9e4f2;border-radius:26px;padding:15px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow);margin-bottom:12px}
.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:46px;height:46px;border-radius:16px;background:#fff;color:#4d78a8;display:grid;place-items:center;box-shadow:0 4px 12px rgba(76,130,195,.12)}
.brand h1{font-size:21px;line-height:1.2;margin:0;font-weight:850;letter-spacing:.02em}.brand .sub{font-size:11px;color:#66758a;margin-top:4px}
.icon-btn,.back{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.86);display:grid;place-items:center;color:#58718e;border:1px solid rgba(88,113,142,.12)}
.status-row{display:flex;justify-content:flex-end;margin:-2px 2px 12px}.status{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);padding:6px 9px;border-radius:999px}.dot{width:7px;height:7px;border-radius:50%;background:#56a16a}.dot.off{background:#a1a8b2}
.dashboard{display:grid;gap:13px}
.section-panel{border-radius:var(--radius);padding:15px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.weather-panel{background:#eaf5ff;border-color:#bad9f0}.traffic-panel{background:#fff2d8;border-color:#e9ca8d}.clients-panel{background:#eee9ff;border-color:#cec3ef;margin-top:13px;box-shadow:0 10px 28px rgba(91,76,139,.10)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.section-title-wrap{display:flex;align-items:center;gap:10px;min-width:0}.section-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:#fff;box-shadow:var(--shadow-soft)}
.weather-panel .section-icon{color:#4d83bb}.traffic-panel .section-icon{color:#a56b16}.clients-panel .section-icon{color:#7263ad}
.section-title{font-size:16px;font-weight:850;line-height:1.25}.section-sub{font-size:11px;color:var(--muted);margin-top:3px}.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid rgba(0,0,0,.08);font-size:11px;font-weight:750;color:#586575;box-shadow:var(--shadow-soft)}
.weather-now{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:#fff;border:1px solid #d9e9f6;border-radius:18px;padding:14px}.weather-symbol{width:44px;height:44px;border-radius:15px;background:#eaf4fe;display:grid;place-items:center;color:#4c82c3}.weather-symbol svg{width:27px;height:27px}.weather-main strong{display:block;font-size:24px}.weather-main span{font-size:12px;color:var(--muted)}.weather-hi-lo{text-align:right;font-size:11px;color:#5d6977}.weather-hi-lo strong{font-size:14px;color:#344154}.hourly-rain{display:flex;gap:8px;overflow-x:auto;padding:10px 0 0;scrollbar-width:none}.hourly-rain::-webkit-scrollbar{display:none}.rain-chip{min-width:66px;text-align:center;border-radius:15px;padding:9px 7px;background:#fff;border:1px solid #dce9f4}.rain-chip .t{font-size:10px;color:var(--muted)}.rain-chip .mini{height:22px;display:grid;place-items:center;color:#6688a9;margin:3px 0}.rain-chip .mini svg{width:18px;height:18px}.rain-chip .r{font-size:14px;font-weight:850;color:#4679aa}.weather-error{background:#fff;border:1px solid #d8e6f1;border-radius:16px;padding:13px;color:#637283;font-size:12px;line-height:1.65}
.traffic-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.traffic-stat{background:#fff;border:1px solid #ead9bc;border-radius:15px;padding:10px;text-align:center}.traffic-stat strong{display:block;font-size:20px}.traffic-stat span{font-size:10px;color:var(--muted)}.traffic-stat.danger strong{color:#b94a4a}.traffic-stat.warn strong{color:#a66b17}.traffic-stat.info strong{color:#8c6b37}
.traffic-map{height:210px;border-radius:17px;overflow:hidden;border:1px solid #e6d5b8;background:#f5f1ea}.traffic-empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);padding:20px;font-size:12px;line-height:1.65;background:rgba(255,255,255,.65)}
.traffic-list{display:grid;gap:8px;margin-top:10px}.incident{background:#fff;border:1px solid #eadbc3;border-radius:16px;padding:11px 12px;display:grid;grid-template-columns:auto 1fr;gap:10px;box-shadow:0 3px 10px rgba(82,65,37,.04)}.incident-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center}.incident-icon svg{width:20px;height:20px}.incident.road-closed .incident-icon{background:var(--red);color:var(--red-strong)}.incident.accident .incident-icon{background:#ffe8de;color:#b65d37}.incident.jam .incident-icon{background:var(--amber);color:var(--amber-strong)}.incident.lane-closed .incident-icon{background:#fff0cf;color:#9b741d}.incident.road-works .incident-icon{background:#f4e8d3;color:#9b6b2b}.incident.other .incident-icon{background:#edf0f3;color:#66717e}.incident-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.incident-kind{font-size:11px;font-weight:850}.incident-road{font-size:13px;font-weight:850}.incident-route{font-size:12px;color:#4b5563;margin-top:4px;line-height:1.45}.incident-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:6px;color:#7b756d;font-size:10px}.traffic-connect{background:#fff;border:1px dashed #d6ba8d;border-radius:17px;padding:15px;text-align:center;color:#705d3d}.traffic-connect strong{display:block;font-size:14px;color:#55462f;margin-bottom:5px}.traffic-connect p{font-size:11px;line-height:1.65;margin:0 0 10px}.traffic-source{font-size:9px;color:#8a7c66;margin-top:8px;line-height:1.5}
.search-wrap{position:relative}.search-wrap .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#776b9d;pointer-events:none}.search{width:100%;border:1px solid #d4caed;background:#fff;border-radius:16px;padding:13px 14px 13px 43px;outline:none;color:var(--text);box-shadow:0 3px 10px rgba(86,73,126,.06)}.search:focus{border-color:#9f91d0;box-shadow:0 0 0 4px rgba(120,104,183,.12)}
.dest-list{display:grid;gap:11px;margin-top:12px;max-height:clamp(260px,40vh,440px);overflow-y:auto;overscroll-behavior:contain;padding:2px 5px 8px 1px;scrollbar-width:thin;scrollbar-color:#b9aedb transparent;-webkit-overflow-scrolling:touch}.dest-list::-webkit-scrollbar{width:5px}.dest-list::-webkit-scrollbar-track{background:transparent}.dest-list::-webkit-scrollbar-thumb{background:#b9aedb;border-radius:999px}.dest-btn{width:100%;min-height:72px;border-radius:18px;padding:15px 18px;text-align:center;display:grid;place-items:center;font-size:20px;font-weight:850;letter-spacing:.02em;color:#344154;border:1px solid #bfd8ed;box-shadow:0 5px 0 #c8ddec,0 8px 15px rgba(57,84,110,.08);background:#dfefff;position:relative}.dest-btn:nth-child(4n+2){background:#e4f5ed;border-color:#bfe1d2;box-shadow:0 5px 0 #c9e5d9,0 8px 15px rgba(57,104,86,.07)}.dest-btn:nth-child(4n+3){background:#eee8ff;border-color:#d2c5f4;box-shadow:0 5px 0 #d9cff2,0 8px 15px rgba(87,71,134,.07)}.dest-btn:nth-child(4n+4){background:#fde8ef;border-color:#efc5d4;box-shadow:0 5px 0 #f0ced9,0 8px 15px rgba(133,76,97,.07)}.dest-btn:active{transform:translateY(5px) scale(.99);box-shadow:0 1px 0 rgba(0,0,0,.12),inset 0 2px 8px rgba(31,41,55,.08)!important;filter:saturate(1.08) brightness(.96)}.empty{background:rgba(255,255,255,.8);border:1px dashed #cbc2e2;border-radius:18px;padding:28px 16px;text-align:center;color:var(--muted);line-height:1.55}.empty strong{display:block;color:#4d4663;font-size:17px;margin-bottom:5px}
.fab{position:fixed;right:max(18px,calc((100vw - 760px)/2 + 18px));bottom:calc(84px + env(safe-area-inset-bottom));width:58px;height:58px;border-radius:18px;background:#6f88b8;color:#fff;display:grid;place-items:center;box-shadow:0 6px 0 #526d9e,0 12px 25px rgba(83,108,154,.24);z-index:30}.fab svg{width:27px;height:27px}.bottom-call{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));width:min(730px,calc(100vw - 30px));z-index:29}.call-btn{width:100%;min-height:56px;border-radius:18px;background:#d8f0e4;color:#2f684d;border:1px solid #acd3bd;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:850;box-shadow:0 5px 0 #b8d8c6,0 10px 24px rgba(52,108,83,.12)}
.page-head{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);margin-bottom:12px}.page-title{flex:1;min-width:0}.page-title h2{font-size:20px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-title div{font-size:11px;color:var(--muted);margin-top:3px}.edit{border-radius:13px;padding:10px 12px;background:var(--lav);color:#655698;border:1px solid #d9cff4;font-weight:750;display:flex;align-items:center;gap:6px}
.card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:15px;margin:12px 0;box-shadow:var(--shadow)}.card h3{margin:0 0 12px;font-size:15px;color:#3e4a58}.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.timebox{border-radius:15px;padding:12px 8px;text-align:center;border:1px solid #dae4ee}.timebox:nth-child(1){background:#eaf3ff}.timebox:nth-child(2){background:#e6f5ef}.timebox:nth-child(3){background:#f0ebff}.timebox span{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}.timebox strong{font-size:21px}.info-row{padding:9px 0;border-bottom:1px solid #edf0f3}.info-row:last-child{border-bottom:0}.label{font-size:10px;color:var(--muted);margin-bottom:4px}.value{font-size:15px;line-height:1.6;white-space:pre-wrap}.map-wrap{height:225px;border-radius:16px;overflow:hidden;border:1px solid #dfe5ec;background:#eef1f4}.map-wrap iframe{width:100%;height:100%;border:0}.map-offline{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);padding:18px;white-space:pre-line}.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.action-btn{border-radius:13px;padding:11px;background:#eaf3ff;border:1px solid #d4e6f7;color:#4c739c;font-weight:750}.action-btn.warn{background:#fff0d7;border-color:#efd8aa;color:#916921}.action-btn.full{width:100%}.alert{background:#fff1d8;border:1px solid #eddaa9;border-radius:15px;padding:12px;color:#785c25;line-height:1.65;white-space:pre-wrap}.textbox{line-height:1.72;white-space:pre-wrap}.note{font-size:11px;color:var(--muted);line-height:1.65}
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.photo-card{position:relative;aspect-ratio:4/3;border-radius:15px;overflow:hidden;background:#edf0f3;border:1px solid var(--line)}.photo-card img{width:100%;height:100%;object-fit:cover}.photo-tag{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.92);padding:4px 7px;border-radius:8px;font-size:9px}.photo-delete{position:absolute;right:6px;top:6px;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.92);color:#b34f5e;font-size:18px}.add-photo{display:block;width:100%;margin-top:9px;border-radius:14px;padding:12px;text-align:center;background:#f3efff;border:1px dashed #cfc3ee;color:#6c5e9b;font-weight:750}.add-photo input{display:none}.comment{padding:11px 0;border-bottom:1px solid #edf0f3}.comment:last-child{border-bottom:0}.comment-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-bottom:6px}.comment-text{line-height:1.6;white-space:pre-wrap}.text-delete{background:transparent;color:#b34f5e;padding:0}.comment-form{display:flex;gap:7px;margin-top:10px}.comment-form input{flex:1;border:1px solid #dfe5ec;background:#f9fafb;border-radius:12px;padding:11px;outline:none}.comment-form button{border-radius:12px;background:#e7effa;color:#496b91;padding:0 14px;font-weight:800}
.form{display:grid;gap:13px}.field label{display:block;font-size:11px;color:#5f6975;margin:0 0 6px 2px;font-weight:700}.field input,.field textarea,.field select{width:100%;border:1px solid #d7dee6;background:#f8fafc;border-radius:14px;padding:13px;color:var(--text);outline:none}.field input:focus,.field textarea:focus,.field select:focus{background:#fff;border-color:#7d9bc2;box-shadow:0 0 0 4px rgba(76,130,195,.1)}.field textarea{min-height:110px;resize:vertical}.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.savebar{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:4px}.ghost-btn,.primary-btn,.danger-btn{border-radius:14px;padding:13px}.ghost-btn{background:#eef1f4;color:#5d6670}.primary-btn{background:#6685b4;color:#fff;font-weight:850;box-shadow:0 7px 18px rgba(84,113,159,.18)}.danger-btn{background:#ffe9ec;color:#b34f5e;border:1px solid #f0cdd2}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf0f3}.switch-row:last-child{border-bottom:0}.switch-row small{display:block;margin-top:3px;color:var(--muted)}.switch{appearance:none;width:46px;height:27px;border-radius:999px;background:#cfd5dc;position:relative;transition:.2s;flex:none}.switch:before{content:"";position:absolute;width:21px;height:21px;background:#fff;border-radius:50%;left:3px;top:3px;box-shadow:0 2px 5px rgba(0,0,0,.16);transition:.2s}.switch:checked{background:#6e8db9}.switch:checked:before{transform:translateX(19px)}
.toast{position:fixed;left:50%;bottom:108px;transform:translate(-50%,20px);opacity:0;background:#263442;color:#fff;padding:10px 14px;border-radius:12px;z-index:100;transition:.2s;box-shadow:var(--shadow);font-size:12px;font-weight:750}.toast.show{opacity:1;transform:translate(-50%,0)}
.garage-map{height:340px;border-radius:17px;overflow:hidden;border:1px solid #cfd9e4;background:#eef1f4;margin-top:9px}.garage-help{font-size:11px;color:var(--muted);line-height:1.65}.map-tools{display:flex;gap:8px;margin-top:9px}.map-tools button{flex:1;border-radius:12px;background:#eaf3ff;border:1px solid #d1e3f5;color:#4d739b;padding:10px;font-size:11px;font-weight:750}.radius-box{margin-top:12px;background:#e8f5ef;border:1px solid #cce5d9;border-radius:16px;padding:12px}.radius-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.radius-top strong{color:#43816d}.radius-range{width:100%;accent-color:#5da98d}.radius-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.radius-presets button{border:1px solid #c6dfd4;background:#fff;border-radius:999px;padding:7px 10px;color:#4d796a;font-size:10px}.api-box{background:#f2f6fb;border:1px solid #d8e2ee;border-radius:16px;padding:12px;margin-top:8px}.source-note{background:#fff7e9;border:1px solid #efddbc;border-radius:13px;padding:10px;margin-top:8px;font-size:10px;color:#786a50;line-height:1.55}
.leaflet-control-attribution{font-size:8px!important}
@media(max-width:430px){.app-shell{padding-left:12px;padding-right:12px}.weather-now{grid-template-columns:auto 1fr}.weather-hi-lo{grid-column:1/-1;text-align:left;padding-left:56px}.traffic-summary{grid-template-columns:repeat(3,1fr)}.traffic-stat{padding:8px 5px}.traffic-stat strong{font-size:18px}.row3{grid-template-columns:1fr}.actions{grid-template-columns:1fr}.garage-map{height:310px}.dest-btn{font-size:19px;min-height:68px}}


/* ===== V1.4 home/detail refinement ===== */
html,body{height:100%}
.home-layout{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 88px);min-height:560px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.home-layout .section-panel{flex:none}
.compact-panel{padding:12px 13px;border-radius:20px}
.compact-panel .section-head{margin-bottom:9px}
.head-actions{display:flex;align-items:center;gap:7px}
.compact-icon{width:36px;height:36px;border-radius:12px;background:#fff}
.home-layout .status{padding:6px 8px;font-size:10px}
.home-layout .weather-now{padding:10px 12px;border-radius:15px;gap:9px}
.home-layout .weather-symbol{width:38px;height:38px;border-radius:12px}
.home-layout .weather-main strong{font-size:21px}
.home-layout .weather-main span{font-size:10px}
.home-layout .weather-hi-lo{font-size:10px}
.home-layout .weather-hi-lo strong{font-size:12px}
.home-layout .hourly-rain{padding-top:7px;gap:6px}
.home-layout .rain-chip{min-width:58px;padding:6px 5px;border-radius:12px}
.home-layout .rain-chip .mini{height:17px;margin:1px 0}
.home-layout .rain-chip .mini svg{width:15px;height:15px}
.home-layout .rain-chip .r{font-size:12px}

.traffic-panel{background:#fff2dc;border-color:#eac88a}
.home-layout .traffic-summary{margin-bottom:7px}
.home-layout .traffic-stat{padding:7px 4px;border-radius:12px}
.home-layout .traffic-stat strong{font-size:17px}
.home-layout .traffic-list{max-height:125px;overflow-y:auto;margin-top:7px;padding-right:2px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.home-layout .incident{padding:8px 9px;border-radius:13px;gap:8px}
.home-layout .incident-icon{width:30px;height:30px;border-radius:10px}
.home-layout .incident-icon svg{width:17px;height:17px}
.home-layout .incident-road{font-size:12px}.home-layout .incident-route{font-size:11px;margin-top:2px}.home-layout .incident-meta{margin-top:3px;font-size:9px}
.traffic-map,.traffic-source{display:none!important}

.main-clients-panel{flex:1!important;min-height:0;display:flex;flex-direction:column;margin-top:0;background:linear-gradient(180deg,#eee9ff 0%,#f5f1ff 100%);border-color:#c8bcea;padding:13px 13px 12px;box-shadow:0 10px 28px rgba(91,76,139,.11)}
.clients-head{margin-bottom:9px}
.main-clients-panel .search-wrap{flex:none}
.dest-list{flex:1;min-height:0;max-height:none!important;overflow-y:auto;margin-top:10px;padding:3px 5px 12px 1px;align-content:start}
.dest-btn{min-height:78px;font-size:21px;border-radius:19px;box-shadow:0 5px 0 #c1d9ea,0 8px 16px rgba(57,84,110,.09)}
.dest-btn:active{transform:translateY(5px) scale(.985);filter:saturate(1.12) brightness(.92);box-shadow:0 0 0 rgba(0,0,0,0),inset 0 3px 9px rgba(31,41,55,.14)!important}
.add-destination-btn{width:100%;min-height:58px;margin-top:2px;border-radius:17px;background:#fff;color:#665797;border:1px dashed #ae9cd7;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:850;box-shadow:0 3px 10px rgba(78,60,124,.06)}
.add-destination-btn:active{background:#e4dcfb;color:#4e3f82;transform:translateY(3px) scale(.985)}
.add-destination-btn svg{width:19px;height:19px}
.app-shell{padding-top:10px}

.detail-head{background:linear-gradient(135deg,#edf6ff,#f2efff);border-color:#cfdff0}
.detail-card{position:relative;overflow:hidden;border-width:1px;padding:16px}
.detail-card h3{display:flex;align-items:center;gap:8px;font-size:16px;margin-bottom:13px}
.card-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#fff;box-shadow:0 3px 10px rgba(45,62,80,.07)}
.card-icon svg{width:18px;height:18px}
.time-card{background:#eef6ff;border-color:#c9def3}.time-card .card-icon{color:#4c82c3}
.client-info-card{background:#eefaf5;border-color:#c9e5da}.client-info-card .card-icon{color:#42806b}
.warning-card{background:#fff4df;border-color:#ead29b}.warning-card .card-icon{color:#a36c16}.warning-card .alert{background:#fffaf0;border-color:#ead8ad}
.procedure-card{background:#f3efff;border-color:#d5c9f2}.procedure-card .card-icon{color:#6f5eaa}.procedure-card .textbox{background:#fff;border:1px solid #ded6f1;border-radius:14px;padding:12px}
.photo-section-card{background:#fff0f5;border-color:#edcbd8}.photo-section-card .card-icon{color:#ad607c}.photo-section-card .add-photo{display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;border-color:#d9aebf;color:#98546d}
.comments-card{background:#edf8fa;border-color:#c8e2e7}.comments-card .card-icon{color:#467d87}.comments-card .comment{border-color:#dcecef}.comments-card .comment-form input{background:#fff;border-color:#cde1e5}.comments-card .comment-form button{background:#d8eef2;color:#3f717b}
.notifications-card{background:#eef4ff;border-color:#cbd9ef}.notifications-card .card-icon{color:#587ab0}
.client-info-card .map-wrap{border-color:#c6ded5}
.client-info-card .action-btn{background:#fff;border-color:#c7dfd6;color:#3f7564}

@media(max-width:430px){
  .home-layout{height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 82px);gap:8px}
  .compact-panel{padding:10px 11px}
  .section-icon{width:34px;height:34px;border-radius:11px}
  .section-title{font-size:15px}
  .home-layout .weather-now{grid-template-columns:auto 1fr auto}
  .home-layout .weather-hi-lo{grid-column:auto;padding-left:0;text-align:right}
  .home-layout .hourly-rain{max-height:50px}
  .home-layout .traffic-list{max-height:108px}
  .main-clients-panel{padding:11px 11px 10px}
  .dest-btn{min-height:74px;font-size:20px}
}
@media(max-height:720px){
  .home-layout .hourly-rain{display:none}
  .home-layout .traffic-list{max-height:90px}
  .dest-btn{min-height:68px}
}

body.home-mode{overflow:hidden}
body.home-mode .app-shell{height:100dvh;min-height:0;padding-top:10px;padding-bottom:78px;overflow:hidden}
body.home-mode .home-layout{height:100%;min-height:0}
body.home-mode .bottom-call{bottom:calc(10px + env(safe-area-inset-bottom))}
.home-layout .traffic-list{max-height:none;overflow:visible}
.traffic-more{text-align:center;font-size:10px;color:#8a7048;padding-top:5px;font-weight:700}

/* ===== V1.5 traffic + detail clarity ===== */
.traffic-panel{background:linear-gradient(180deg,#fff0cf 0%,#fff7e7 100%);border:1px solid #e7bd63;box-shadow:0 8px 22px rgba(135,92,18,.10)}
.traffic-panel .section-head{margin-bottom:8px}
.traffic-summary{margin-bottom:7px;gap:6px}
.traffic-stat{padding:7px 6px;border-radius:12px;border-color:#e6c987;box-shadow:none}
.traffic-stat strong{font-size:18px}.traffic-stat span{font-size:9px;font-weight:750}
.traffic-list{gap:6px!important;margin-top:0!important}
.traffic-panel .incident{padding:8px 9px;border-radius:13px;grid-template-columns:auto 1fr;gap:8px}
.traffic-panel .incident-icon{width:30px;height:30px;border-radius:9px}.traffic-panel .incident-icon svg{width:17px;height:17px}
.traffic-panel .incident-route{font-size:11px;margin-top:2px}.traffic-panel .incident-meta{font-size:9px;margin-top:4px;gap:7px}.traffic-panel .incident-desc{display:none}
.traffic-clear{display:flex;align-items:center;gap:10px;background:#f3fbf5;border:1px solid #bcdcc4;border-radius:14px;padding:10px 11px;color:#326346}
.traffic-clear-dot{width:11px;height:11px;border-radius:50%;background:#4fa268;box-shadow:0 0 0 4px rgba(79,162,104,.12);flex:none}
.traffic-clear strong{display:block;font-size:12px}.traffic-clear small{display:block;margin-top:3px;font-size:9px;line-height:1.35;color:#66806e}
.traffic-details-btn{width:100%;margin-top:7px;border-radius:12px;padding:8px 10px;background:#fff;border:1px solid #d6b56f;color:#775719;font-size:11px;font-weight:850;box-shadow:0 3px 0 #e0c58f}
.traffic-details-btn:active{transform:translateY(3px);box-shadow:none;background:#f6e6c5}
.incident-desc{font-size:11px;color:#6b7280;margin-top:4px;line-height:1.45}

.traffic-page-head{background:linear-gradient(135deg,#fff0cf,#fff8e9);border-color:#e8c578}
.traffic-full-card{background:#fff6e2;border:1px solid #e6c16e;border-radius:20px;padding:13px;box-shadow:var(--shadow);margin-bottom:12px}
.traffic-route-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.route-status{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border-radius:12px;padding:9px 10px;border:1px solid #e5e7eb;font-size:11px;font-weight:760}
.route-status strong{font-size:10px;white-space:nowrap}.route-status.clear{border-color:#c9e4d0;color:#356648}.route-status.clear strong{color:#3e8a57}.route-status.has-issue{border-color:#e7be74;background:#fff9ed;color:#7c5817}.route-status.has-issue strong{color:#a06300}
.traffic-full-note{font-size:10px;color:#8a754d;margin-top:9px;text-align:right}
.traffic-full-list{display:grid;gap:9px;padding-bottom:20px}.traffic-full-list .incident{box-shadow:var(--shadow-soft);border-color:#e5d4b4}.traffic-clear.large{padding:18px 15px}.traffic-clear.large strong{font-size:14px}.traffic-clear.large small{font-size:11px}

/* Detail screen: stronger section separation */
.detail-head{background:linear-gradient(135deg,#e7efff 0%,#efe8ff 100%);border:1px solid #becbe8;box-shadow:0 8px 22px rgba(74,87,137,.12)}
.detail-head .page-title h2{color:#313957;font-size:21px}.detail-head .page-title div{color:#687090}
.detail-head .edit{background:#fff;border:1px solid #c9c1ec;color:#625698;box-shadow:0 3px 0 #d8d1f0}
.detail-head .edit:active{transform:translateY(3px);box-shadow:none;background:#eee9ff}
.detail-card{padding:0!important;border-width:1px!important;border-radius:21px!important;overflow:hidden;box-shadow:0 8px 22px rgba(44,56,75,.09)!important;background:#fff!important;margin:13px 0!important}
.detail-card h3{margin:0!important;padding:12px 14px!important;font-size:16px!important;border-bottom:1px solid transparent;letter-spacing:.01em}
.detail-body{padding:14px;background:#fff}
.detail-card .card-icon{box-shadow:none;border:1px solid rgba(255,255,255,.6)}
.time-card{border-color:#b6d5ef!important}.time-card h3{background:#dceeff;color:#315f87;border-bottom-color:#bad8ef}.time-card .detail-body{background:#f5faff}
.client-info-card{border-color:#b9decf!important}.client-info-card h3{background:#dff4ea;color:#326b56;border-bottom-color:#bddfd1}.client-info-card .detail-body{background:#f5fcf8}
.warning-card{border-color:#e8c36f!important}.warning-card h3{background:#ffedbd;color:#845b0d;border-bottom-color:#e8c878}.warning-card .detail-body{background:#fff9e9}.warning-card .alert{background:#fffdf7;border:1px solid #e7cb86;color:#624914;font-weight:650}
.procedure-card{border-color:#cdbfea!important}.procedure-card h3{background:#e9e0ff;color:#5c4e92;border-bottom-color:#cfc0ef}.procedure-card .detail-body{background:#faf8ff}.procedure-card .textbox{background:#fff!important;border:1px solid #d6cdf0!important;line-height:1.8}
.photo-section-card{border-color:#e7bed0!important}.photo-section-card h3{background:#ffe0eb;color:#8e4b66;border-bottom-color:#e7c0d0}.photo-section-card .detail-body{background:#fff8fa}
.comments-card{border-color:#b9dce2!important}.comments-card h3{background:#dcf2f5;color:#3e7078;border-bottom-color:#b9dce2}.comments-card .detail-body{background:#f7fcfd}
.notifications-card{border-color:#c1cde8!important}.notifications-card h3{background:#e2eaff;color:#4b6494;border-bottom-color:#c1cde8}.notifications-card .detail-body{background:#f7f9ff}
.timebox{border-width:1px;box-shadow:0 2px 6px rgba(49,67,89,.05)}
.timebox:nth-child(1){background:#e3f1ff;border-color:#bed9ef}.timebox:nth-child(2){background:#e1f6ec;border-color:#badfce}.timebox:nth-child(3){background:#eee7ff;border-color:#d1c4ef}
.timebox span{font-weight:750}.timebox strong{font-size:22px;color:#2e3b4e}
.info-row{background:#fff;border:1px solid #d7e8e0!important;border-radius:13px;padding:10px 11px!important;margin-bottom:8px}.info-row:last-of-type{margin-bottom:11px}.info-row .label{color:#628073;font-weight:800}.info-row .value{color:#34463e;font-weight:650}
.client-info-card .map-wrap{border:1px solid #bcd9cd;border-radius:15px}
.client-info-card .action-btn{background:#e5f5ed!important;border-color:#b8dccb!important;color:#356a55!important;box-shadow:0 3px 0 #c3dfd2}.client-info-card .action-btn:active{transform:translateY(3px);box-shadow:none;background:#d5ece1!important}
.photo-section-card .add-photo{background:#fff!important;box-shadow:0 3px 0 #edcbd8}.photo-section-card .add-photo:active{transform:translateY(3px);box-shadow:none;background:#fff0f5!important}
.comments-card .comment{background:#fff;border:1px solid #d0e7eb;border-radius:13px;padding:10px;margin-bottom:8px}
.comments-card .comment-form button{box-shadow:0 3px 0 #bddde3}.comments-card .comment-form button:active{transform:translateY(3px);box-shadow:none}
.notifications-card .switch-row{background:#fff;border:1px solid #d7def0;border-radius:14px;padding:11px 12px;margin-bottom:8px}

button,.action-btn,.add-photo,.dest-btn,.mini-btn,.icon-btn,.edit{transition:transform .08s ease,box-shadow .08s ease,filter .08s ease,background-color .08s ease}
.mini-btn:active,.icon-btn:active{transform:translateY(2px) scale(.98);filter:brightness(.94)}

@media(max-width:430px){
  .traffic-route-grid{grid-template-columns:1fr 1fr}
  .route-status{padding:8px 9px;font-size:10px}
  .detail-body{padding:12px}
}

/* ===== V1.6 strong color hierarchy ===== */
:root{
  --weather-strong:#2f6fa8;
  --traffic-strong:#b76416;
  --clients-strong:#6650a6;
  --teal-strong:#237565;
  --warn-strong:#a9650d;
  --purple-strong:#644da4;
  --rose-strong:#a7486b;
  --cyan-strong:#307a87;
  --notify-strong:#435f9c;
}
body{background:#edf1f5}
.weather-panel,.traffic-panel,.main-clients-panel{border:0!important;box-shadow:0 9px 24px rgba(35,45,60,.14)!important}
.weather-panel{background:var(--weather-strong)!important}
.traffic-panel{background:var(--traffic-strong)!important}
.main-clients-panel{background:var(--clients-strong)!important}
.weather-panel .section-title,.traffic-panel .section-title,.clients-panel .section-title{color:#fff}
.weather-panel .section-sub,.traffic-panel .section-sub,.clients-panel .section-sub{color:rgba(255,255,255,.78)}
.weather-panel .section-icon,.traffic-panel .section-icon,.clients-panel .section-icon{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}
.weather-panel .status{background:rgba(255,255,255,.95);border:0}
.weather-panel .compact-icon{background:rgba(255,255,255,.96);color:#405976}
.traffic-panel .mini-btn{background:#fff;color:#7d4313;border:0;box-shadow:0 3px 0 rgba(70,35,5,.2)}
.traffic-panel .mini-btn:active{transform:translateY(3px);box-shadow:none!important}
.weather-now,.rain-chip,.weather-error{border:0!important;box-shadow:0 3px 10px rgba(20,50,80,.13)}
.search{border:0!important;box-shadow:0 3px 11px rgba(36,24,73,.15)!important}
.search-wrap .search-icon{color:#6650a6}

/* Main client buttons: darker, clear, tactile */
.dest-btn{color:#fff!important;background:#397ab0!important;border:0!important;box-shadow:0 6px 0 #285f8d,0 9px 16px rgba(23,50,75,.2)!important}
.dest-btn:nth-child(4n+2){background:#368371!important;box-shadow:0 6px 0 #286555,0 9px 16px rgba(23,70,56,.2)!important}
.dest-btn:nth-child(4n+3){background:#7459b2!important;box-shadow:0 6px 0 #58428d,0 9px 16px rgba(55,39,95,.2)!important}
.dest-btn:nth-child(4n+4){background:#ad5676!important;box-shadow:0 6px 0 #8b405d,0 9px 16px rgba(92,35,57,.2)!important}
.dest-btn:active{transform:translateY(6px) scale(.985)!important;box-shadow:0 1px 0 rgba(0,0,0,.2),inset 0 3px 8px rgba(0,0,0,.14)!important;filter:brightness(.88)!important}
.add-destination-btn{background:rgba(255,255,255,.98)!important;border:2px dashed rgba(255,255,255,.62)!important;color:#59458f!important;box-shadow:0 4px 0 rgba(46,31,86,.28)!important}
.add-destination-btn:active{transform:translateY(4px)!important;box-shadow:none!important;background:#e8e2f8!important}

/* Traffic: human-readable text lines only */
.traffic-panel .traffic-list{display:grid!important;gap:6px!important}
.traffic-line{background:#fff;border-radius:13px;padding:9px 11px;border-left:5px solid #e49125;box-shadow:0 3px 9px rgba(63,34,8,.16);display:grid;gap:3px}
.traffic-line.closed{border-left-color:#cf3f3f}
.traffic-line-road{font-size:12px;font-weight:900;color:#313a46;line-height:1.2}
.traffic-line-detail{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0}
.traffic-line-detail span{font-size:10px;color:#5e6874;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.traffic-line-detail strong{font-size:11px;color:#a4500c;white-space:nowrap}
.traffic-line.closed .traffic-line-detail strong{color:#b62e2e}
.traffic-clear{background:#fff!important;border:0!important;box-shadow:0 3px 9px rgba(63,34,8,.14)}
.traffic-details-btn{background:#fff!important;border:0!important;color:#7b3e0e!important;box-shadow:0 3px 0 rgba(71,37,9,.24)!important}
.traffic-details-btn:active{transform:translateY(3px)!important;box-shadow:none!important}
.traffic-page-head{background:#9c5517!important;border:0!important;color:#fff}
.traffic-page-head .page-title h2,.traffic-page-head .page-title div{color:#fff}
.traffic-page-head .back{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.25)}
.traffic-full-card.compact-status{background:#fff;border:0;border-left:6px solid var(--traffic-strong);display:flex;justify-content:space-between;gap:10px;font-weight:800;color:#5e4937;box-shadow:var(--shadow)}
.traffic-full-list .traffic-line{border:1px solid #e3e6eb;border-left-width:6px;box-shadow:var(--shadow-soft)}

/* Detail: dark section bands, white readable bodies */
.detail-head{background:#384a78!important;border:0!important;color:#fff!important}
.detail-head .page-title h2,.detail-head .page-title div{color:#fff!important}
.detail-head .back{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.detail-head .edit{background:#fff!important;border:0!important;color:#384a78!important;box-shadow:0 3px 0 #c7cfdf!important}
.detail-card{border:0!important;box-shadow:0 8px 22px rgba(42,52,66,.13)!important}
.detail-card h3{color:#fff!important;border:0!important}
.detail-card h3 .card-icon{background:rgba(255,255,255,.15)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important}
.time-card h3{background:#2f6fa8!important}.time-card .detail-body{background:#fff!important}
.client-info-card h3{background:#28745f!important}.client-info-card .detail-body{background:#fff!important}
.toll-card h3{background:#176f72!important}.toll-card .detail-body{background:#fff!important}
.warning-card h3{background:#a8660d!important}.warning-card .detail-body{background:#fff!important}
.procedure-card h3{background:#654ca2!important}.procedure-card .detail-body{background:#fff!important}
.photo-section-card h3{background:#a8486b!important}.photo-section-card .detail-body{background:#fff!important}
.comments-card h3{background:#317989!important}.comments-card .detail-body{background:#fff!important}
.notifications-card h3{background:#425f99!important}.notifications-card .detail-body{background:#fff!important}
.timebox:nth-child(1){background:#e7f2fb!important;border-color:#b9d7ee!important}.timebox:nth-child(2){background:#e7f5ef!important;border-color:#bcdccd!important}.timebox:nth-child(3){background:#eeeafd!important;border-color:#d1c7ed!important}
.info-row{border-left:5px solid #28745f!important;background:#f8faf9!important}
.warning-card .alert{background:#fff7e9!important;border:1px solid #e7c37e!important}
.procedure-card .textbox{border-left:5px solid #654ca2!important;background:#faf9fd!important}
.comments-card .comment{border-left:5px solid #317989!important}
.notifications-card .switch-row{border-left:5px solid #425f99!important}

/* Toll / IC UI */
.toll-empty,.toll-pending{background:#f4f8f8;border:1px dashed #a8c8c6;border-radius:13px;padding:12px;color:#577173;font-size:12px;text-align:center}
.toll-leg-card{border:1px solid #c7dedd;border-left:5px solid #176f72;border-radius:15px;padding:11px;margin-bottom:10px;background:#f8fbfb}
.toll-leg-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}.toll-leg-head>span{width:25px;height:25px;border-radius:8px;background:#176f72;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.toll-leg-head strong{font-size:14px;color:#27484a}
.toll-segments{display:grid;gap:5px;border-top:1px solid #d7e6e5;padding-top:8px}.toll-segments>div,.toll-leg-total,.toll-grand{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.toll-segments strong{color:#315b5d}.toll-leg-total{margin-top:8px;padding-top:8px;border-top:1px solid #c8dcda}.toll-leg-total strong{font-size:17px;color:#176f72}.toll-grand{margin-top:12px;background:#176f72;color:#fff;border-radius:14px;padding:12px 13px}.toll-grand strong{font-size:20px}.toll-note{font-size:10px;color:#69777a;line-height:1.55;margin-top:10px}
.toll-search-btn{width:100%;margin-top:10px;border-radius:12px;background:#dbeeed;color:#165e61;padding:10px;font-size:12px;font-weight:850;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 3px 0 #afd1cf}.toll-search-btn:active{transform:translateY(3px);box-shadow:none!important;background:#c9e4e2}
.form-subsection{border-radius:18px;padding:13px;margin:3px 0 15px}.toll-form-section{background:#e9f3f2;border:1px solid #b9d6d3}.form-subsection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.form-subsection-head strong{display:block;color:#205f61}.form-subsection-head small{display:block;color:#63797a;font-size:10px;margin-top:3px;line-height:1.45}.toll-form-list{display:grid;gap:9px}.toll-form-row{position:relative;background:#fff;border-left:5px solid #176f72;border-radius:14px;padding:10px 38px 4px 10px;box-shadow:0 3px 9px rgba(32,79,78,.08)}.toll-form-num{font-size:10px;font-weight:900;color:#176f72;margin-bottom:5px}.toll-form-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toll-form-row .field{margin-bottom:8px}.toll-row-delete{position:absolute;right:8px;top:8px;width:27px;height:27px;border-radius:9px;background:#f8e3e3;color:#a53b3b;font-weight:900}.toll-row-delete:active{transform:translateY(2px);background:#f1caca}

/* General form/settings cards: stronger title bars */
.form>.card{overflow:hidden;padding:0!important;border:0!important;box-shadow:var(--shadow)!important}.form>.card>h3{margin:0;padding:12px 14px;background:#53657a;color:#fff}.form>.card>h3~*{margin-left:13px;margin-right:13px}.form>.card>h3+.field,.form>.card>h3+.switch-row{margin-top:13px}

@media(max-width:430px){
  .traffic-line{padding:8px 9px}.traffic-line-road{font-size:11px}.traffic-line-detail span{font-size:9.5px}.traffic-line-detail strong{font-size:10.5px}
  .toll-form-fields{grid-template-columns:1fr}.form-subsection-head{align-items:flex-start;flex-direction:column}.form-subsection-head .mini-btn{align-self:flex-end}
}
.toll-form-section{background:#176f72!important;border:0!important;box-shadow:0 7px 18px rgba(20,83,85,.16)}
.toll-form-section .form-subsection-head strong,.toll-form-section .form-subsection-head small{color:#fff!important}
.toll-form-section .form-subsection-head small{opacity:.78}
.toll-form-section .mini-btn{background:#fff;color:#176f72;border:0;box-shadow:0 3px 0 rgba(0,0,0,.18)}

/* ===== V1.7 bright aqua UI + always-visible monitored roads ===== */
:root{
  --app-bg:#eaf7ff;
  --weather-strong:#66b6e8;
  --traffic-strong:#f4b75d;
  --clients-strong:#62bea8;
}
html,body{background:#eaf7ff!important}
body{background:linear-gradient(180deg,#e8f7ff 0%,#f4fbff 48%,#eaf8f5 100%)!important}

.weather-panel,.traffic-panel,.main-clients-panel{
  box-shadow:0 8px 22px rgba(55,98,126,.12)!important;
  border:1px solid rgba(255,255,255,.72)!important;
}
.weather-panel{background:linear-gradient(135deg,#69b9e9,#86c9ef)!important}
.traffic-panel{background:linear-gradient(135deg,#f4b55b,#f7ca82)!important}
.main-clients-panel{background:linear-gradient(135deg,#5ebda7,#81cfbd)!important}
.weather-panel .section-title,.traffic-panel .section-title,.clients-panel .section-title{color:#fff!important}
.weather-panel .section-sub,.traffic-panel .section-sub,.clients-panel .section-sub{color:rgba(255,255,255,.88)!important}
.weather-panel .section-icon,.traffic-panel .section-icon,.clients-panel .section-icon{
  background:rgba(255,255,255,.20)!important;color:#fff!important;border:1px solid rgba(255,255,255,.30)!important
}
.weather-panel .status{background:rgba(255,255,255,.94)!important}
.traffic-panel .mini-btn{background:#fff!important;color:#9a641d!important;box-shadow:0 3px 0 rgba(126,76,13,.18)!important}
.main-clients-panel .search{background:#fff!important;color:#304352!important;box-shadow:0 3px 10px rgba(30,92,79,.13)!important}
.main-clients-panel .search-wrap .search-icon{color:#479d8a!important}

/* Cute, bright client cards without purple */
.dest-btn{
  background:#66afe2!important;color:#fff!important;border:1px solid rgba(255,255,255,.44)!important;
  box-shadow:0 5px 0 #438fc6,0 9px 17px rgba(48,110,153,.16)!important;
  border-radius:22px!important;font-weight:900!important
}
.dest-btn:nth-child(4n+2){background:#65c6a6!important;box-shadow:0 5px 0 #43a986,0 9px 17px rgba(45,126,98,.15)!important}
.dest-btn:nth-child(4n+3){background:#ee91a6!important;box-shadow:0 5px 0 #d46f87,0 9px 17px rgba(150,66,88,.14)!important}
.dest-btn:nth-child(4n+4){background:#efc35f!important;color:#4e4328!important;box-shadow:0 5px 0 #d6a944,0 9px 17px rgba(137,105,37,.14)!important}
.dest-btn:active{transform:translateY(5px) scale(.985)!important;filter:brightness(.91)!important;box-shadow:0 1px 0 rgba(0,0,0,.12),inset 0 3px 8px rgba(0,0,0,.10)!important}
.add-destination-btn{background:#fff!important;color:#388f7c!important;border:2px dashed rgba(255,255,255,.9)!important;box-shadow:0 4px 0 rgba(45,126,108,.20)!important}
.add-destination-btn:active{background:#dff6ef!important;color:#287865!important}

/* All monitored roads are visible directly on Home. */
.traffic-panel .traffic-list{display:block!important;overflow:visible!important;max-height:none!important;margin-top:0!important;padding:0!important}
.route-home-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.route-home-status{
  min-width:0;border-radius:11px;background:rgba(255,255,255,.96);border:1px solid rgba(135,91,27,.13);
  padding:6px 8px;box-shadow:0 2px 7px rgba(98,65,21,.08);font-size:10px
}
.route-home-status.clear{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:31px}
.route-home-status.clear span{font-weight:850;color:#4d5962;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.route-home-status.clear strong{color:#3c9b68;font-size:9px;white-space:nowrap;background:#e8f7ee;border-radius:999px;padding:3px 6px}
.route-home-status.issue{grid-column:1/-1;border-left:5px solid #df645f;background:#fff9f4;padding:8px 9px}
.route-home-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.route-home-title span{font-size:11px;font-weight:900;color:#3f4a53}
.route-home-title strong{font-size:9px;color:#b44c48;background:#ffe8e6;border-radius:999px;padding:3px 7px}
.route-home-event{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-top:4px;border-top:1px solid #f0ded1}
.route-home-event span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#67717a;font-size:9.5px;font-weight:700}
.route-home-event b{color:#b0522e;font-size:9.5px;white-space:nowrap}
.route-home-status.issue>small{display:block;text-align:right;color:#8e6d5d;font-size:8.5px;margin-top:4px}
.traffic-connect{background:rgba(255,255,255,.96)!important;border:0!important}

/* Detail: clear but brighter and less heavy */
.detail-head{background:linear-gradient(135deg,#69b7e6,#82c6ec)!important;box-shadow:0 8px 20px rgba(63,126,166,.15)!important}
.detail-head .edit{color:#3d84ad!important;box-shadow:0 3px 0 #c6e2f1!important}
.detail-card{border:1px solid rgba(84,120,142,.12)!important;box-shadow:0 7px 20px rgba(54,93,117,.10)!important}
.time-card h3{background:#62ace0!important}.time-card .detail-body{background:#f2f9fe!important}
.client-info-card h3{background:#5cbd96!important}.client-info-card .detail-body{background:#f2fbf7!important}
.toll-card h3{background:#51b9be!important}.toll-card .detail-body{background:#f2fbfb!important}
.warning-card h3{background:#e7ad48!important}.warning-card .detail-body{background:#fff9ed!important}
.procedure-card h3{background:#6da9d7!important}.procedure-card .detail-body{background:#f4f9fd!important}
.photo-section-card h3{background:#e9829b!important}.photo-section-card .detail-body{background:#fff5f8!important}
.comments-card h3{background:#55afbd!important}.comments-card .detail-body{background:#f3fbfc!important}
.notifications-card h3{background:#6b8fd0!important}.notifications-card .detail-body{background:#f5f7fd!important}
.info-row{border-left-color:#5cbd96!important;background:#fff!important}
.procedure-card .textbox{border-left-color:#6da9d7!important;background:#fff!important}
.comments-card .comment{border-left-color:#55afbd!important;background:#fff!important}
.notifications-card .switch-row{border-left-color:#6b8fd0!important;background:#fff!important}
.toll-leg-card{border-left-color:#51b9be!important;background:#fff!important}
.toll-leg-head>span,.toll-grand{background:#51b9be!important}
.toll-leg-total strong{color:#318f94!important}
.toll-search-btn{background:#dff4f4!important;color:#2c8589!important;box-shadow:0 3px 0 #b6dddd!important}
.toll-form-section{background:linear-gradient(135deg,#55b9bc,#72c9c6)!important;box-shadow:0 7px 18px rgba(50,139,138,.14)!important}

@media(max-width:430px){
  .route-home-grid{gap:4px}
  .route-home-status{padding:5px 6px}
  .route-home-status.clear{min-height:29px}
  .route-home-status.clear span{font-size:9.4px}
  .route-home-status.clear strong{font-size:8.2px;padding:3px 5px}
  .route-home-title span{font-size:10.2px}
  .route-home-event span,.route-home-event b{font-size:9px}
  .dest-btn{border-radius:20px!important}
}

/* ===== V1.8 mobile one-screen refinement ===== */
:root{
  --home-bg:#edf9ff;
  --weather-v18:#78c7ec;
  --traffic-v18:#ffc96f;
  --clients-v18:#8fd7cf;
}
body{background:linear-gradient(180deg,#eaf8ff 0%,#f7fcff 48%,#eefaf7 100%)!important}
body.home-mode .app-shell{padding:8px 10px 68px!important}
.home-layout{gap:7px!important}

/* Softer, cleaner sections; keep enough contrast. */
.weather-panel{background:linear-gradient(135deg,#76c4ea,#98d8f3)!important}
.traffic-panel{background:linear-gradient(135deg,#ffc66a,#ffda9a)!important}
.main-clients-panel{background:linear-gradient(135deg,#87d4cc,#a8e3dd)!important;border-color:#75c6bd!important}
.main-clients-panel .section-title,.main-clients-panel .section-sub{color:#214e50!important}
.main-clients-panel .section-icon{background:rgba(255,255,255,.72)!important;color:#409b96!important;border-color:rgba(255,255,255,.9)!important}

/* Weather is deliberately compact so traffic + clients remain in one viewport. */
.home-layout .weather-panel{padding:9px 10px!important}
.home-layout .weather-panel .section-head{margin-bottom:6px!important}
.home-layout .weather-now{padding:7px 9px!important;min-height:52px!important}
.home-layout .weather-symbol{width:34px!important;height:34px!important}
.home-layout .weather-main strong{font-size:19px!important}
.home-layout .hourly-rain{padding-top:5px!important;gap:5px!important;max-height:42px!important}
.home-layout .rain-chip{min-width:52px!important;padding:4px 5px!important}
.home-layout .rain-chip .t{font-size:9px!important}
.home-layout .rain-chip .mini{display:none!important}
.home-layout .rain-chip .r{font-size:11px!important}

/* Traffic: always one vertical column. No masonry/two-column jumping. */
.home-layout .traffic-panel{padding:9px 10px!important}
.home-layout .traffic-panel .section-head{margin-bottom:5px!important}
.traffic-panel .traffic-list{display:block!important;overflow:visible!important;max-height:none!important;margin:0!important;padding:0!important}
.route-home-grid{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
.route-home-status{width:100%!important;border-radius:7px!important;padding:3px 6px!important;box-shadow:none!important;border:1px solid rgba(154,103,34,.12)!important;background:rgba(255,255,255,.94)!important}
.route-home-status.clear{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:21px!important}
.route-home-status.clear .route-name{font-size:9.2px!important;font-weight:850!important;color:#48545e!important;white-space:nowrap!important}
.route-home-status.clear strong{font-size:7.8px!important;padding:2px 5px!important;background:#e9f8ef!important;color:#349260!important}
.route-home-status.issue{grid-column:auto!important;border-left:4px solid #e46962!important;padding:4px 6px!important;background:#fff8f5!important}
.route-home-title{margin:0 0 2px!important;min-height:15px!important}
.route-home-title span{font-size:9.6px!important;font-weight:900!important}
.route-home-title strong{font-size:7.7px!important;padding:2px 5px!important}
.route-home-event{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:5px!important;padding-top:2px!important}
.route-home-event .route-interval{font-size:8.4px!important;line-height:1.15!important;color:#535f69!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.route-home-event b{font-size:8.4px!important;line-height:1.15!important;color:#b24d31!important;white-space:nowrap!important}
.route-home-status.issue>small{font-size:7.5px!important;margin-top:2px!important}

/* Client section gets the remaining height; only its card list scrolls. */
.main-clients-panel{flex:1 1 auto!important;min-height:145px!important;padding:9px 10px 8px!important}
.main-clients-panel .section-head{margin-bottom:6px!important}
.main-clients-panel .search{padding:9px 12px 9px 38px!important;border-radius:13px!important;background:rgba(255,255,255,.94)!important;border:1px solid #b7ded9!important}
.dest-list{flex:1!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;margin-top:7px!important;padding:2px 3px 8px!important;gap:8px!important;-webkit-overflow-scrolling:touch!important}
.dest-btn{
  min-height:58px!important;font-size:18px!important;color:#36515d!important;background:#f5fbff!important;
  border:1px solid #c5e4f4!important;box-shadow:0 4px 0 #d4eaf5,0 7px 13px rgba(57,100,124,.08)!important
}
.dest-btn:nth-child(4n+2){background:#f4fcf8!important;border-color:#cbe9de!important;box-shadow:0 4px 0 #d7eee5,0 7px 13px rgba(65,112,95,.07)!important}
.dest-btn:nth-child(4n+3){background:#fff8fb!important;border-color:#f1d7e2!important;box-shadow:0 4px 0 #f3e0e8,0 7px 13px rgba(125,76,95,.06)!important}
.dest-btn:nth-child(4n+4){background:#fffcef!important;border-color:#ede1b8!important;box-shadow:0 4px 0 #f1e7c7,0 7px 13px rgba(121,99,46,.06)!important}
.dest-btn:active{transform:translateY(4px) scale(.988)!important;filter:brightness(.96)!important;box-shadow:0 1px 0 rgba(0,0,0,.10),inset 0 2px 7px rgba(57,85,105,.10)!important}
.add-destination-btn{min-height:50px!important;background:rgba(255,255,255,.92)!important;color:#3f958e!important;border:1px dashed #80c9c1!important;box-shadow:none!important}

/* Keep phone button compact so content stays inside viewport. */
body.home-mode .bottom-call{left:10px!important;right:10px!important;bottom:calc(6px + env(safe-area-inset-bottom))!important}
body.home-mode .call-btn{min-height:46px!important}

@media(max-width:430px){
  body.home-mode .app-shell{padding-left:8px!important;padding-right:8px!important}
  .section-title{font-size:14px!important}
  .section-sub{font-size:9px!important}
  .section-icon{width:31px!important;height:31px!important;border-radius:10px!important}
  .mini-btn{padding:6px 8px!important;font-size:9px!important}
  .dest-btn{min-height:54px!important;font-size:17px!important;border-radius:17px!important}
}
@media(max-height:740px){
  .home-layout .hourly-rain{display:flex!important;max-height:36px!important}
  .home-layout .weather-panel{padding:7px 8px!important}
  .home-layout .traffic-panel{padding:7px 8px!important}
  .route-home-status.clear{min-height:19px!important}
  .route-home-status.clear .route-name{font-size:8.5px!important}
  .route-home-status.issue{padding:3px 5px!important}
  .route-home-title span{font-size:9px!important}
  .route-home-event .route-interval,.route-home-event b{font-size:7.8px!important}
  .main-clients-panel{min-height:120px!important;padding:7px 8px!important}
}


/* ===== V1.9: traffic button + photo editing/viewer ===== */
body.home-mode{height:100dvh;overflow:hidden}
body.home-mode #app{height:100%}
body.home-mode .app-shell{height:100dvh;min-height:0!important;display:flex;flex-direction:column;overflow:hidden;padding-bottom:66px!important}
.home-layout{height:100%;min-height:0;display:flex!important;flex-direction:column!important}

/* Home traffic is a single clear button; full details live on the traffic page. */
.traffic-home-button{
  width:100%;display:flex;align-items:center;gap:11px;text-align:left;
  padding:11px 13px;border-radius:18px;background:linear-gradient(135deg,#ffd27e,#ffe2a8);
  border:1px solid #efbe65;box-shadow:0 4px 0 #e8b45a,0 8px 18px rgba(146,98,19,.10);
  color:#604818;flex:0 0 auto;
}
.traffic-home-button:active{transform:translateY(4px) scale(.992)!important;box-shadow:0 1px 0 #d9a446!important}
.traffic-home-icon{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.78);display:grid;place-items:center;color:#a36d16;flex:0 0 auto}
.traffic-home-copy{min-width:0;display:flex;flex-direction:column;gap:2px;flex:1}.traffic-home-copy strong{font-size:15px}.traffic-home-copy small{font-size:9.5px;color:#82662f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.traffic-home-arrow{transform:rotate(180deg);color:#9c711f}.traffic-home-arrow svg{width:21px;height:21px}

/* Cleaner aqua client area, with nearly-white cards. */
.main-clients-panel{background:linear-gradient(180deg,#d8f5f4 0%,#e9fbfa 100%)!important;border:1px solid #a9dedb!important;box-shadow:0 8px 22px rgba(52,128,125,.10)!important;color:#244b50!important}
.main-clients-panel .section-title{color:#22545a!important}.main-clients-panel .section-sub{color:#5e7f82!important}.main-clients-panel .section-icon{background:#f8ffff!important;color:#48a8a2!important;border:1px solid #bfe6e3!important}
.dest-btn{background:#f8fcff!important;border-color:#d3eaf5!important;color:#34515d!important;box-shadow:0 4px 0 #dcecf4,0 7px 12px rgba(50,86,104,.06)!important}
.dest-btn:nth-child(4n+2){background:#f9fdfb!important;border-color:#d7eee5!important;box-shadow:0 4px 0 #e0f0e9,0 7px 12px rgba(57,100,83,.05)!important}
.dest-btn:nth-child(4n+3){background:#fffafd!important;border-color:#f1dde6!important;box-shadow:0 4px 0 #f4e5eb,0 7px 12px rgba(115,76,91,.05)!important}
.dest-btn:nth-child(4n+4){background:#fffdf6!important;border-color:#eee6c9!important;box-shadow:0 4px 0 #f1ead2,0 7px 12px rgba(112,94,50,.05)!important}

/* Traffic detail: fixed vertical list of all monitored routes. */
.traffic-page-list{margin-top:10px!important;display:block!important}.traffic-route-list{display:grid;grid-template-columns:1fr;gap:9px}.traffic-route-card{background:#fff;border:1px solid #dfe7ed;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(46,65,80,.05)}
.traffic-route-head{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;background:#f4f8fb}.traffic-route-head strong{font-size:14px}.traffic-route-head span{font-size:10px;font-weight:850;padding:4px 8px;border-radius:999px;background:#e5f6eb;color:#2d8a58}
.traffic-route-card.issue{border-color:#f0c2ad}.traffic-route-card.issue .traffic-route-head{background:#fff1e9}.traffic-route-card.issue .traffic-route-head span{background:#ffe0d3;color:#bd532e}.traffic-route-events{display:grid}.traffic-route-events .traffic-line{border-radius:0;border:0;border-top:1px solid #f0e1d9;box-shadow:none}
.traffic-refresh{flex:0 0 auto}

/* Photos in the add/edit form. */
.photo-form-section{background:#fff6fa!important;border:1px solid #efd4df!important}.photo-form-section .form-subsection-head strong{color:#8b5369}.form-photo-grid{margin-top:10px}.form-add-photo{background:#fff!important;border-color:#e2b9c9!important;color:#995c74!important}
.photo-open{width:100%;height:100%;padding:0;background:transparent;display:block}.photo-open img{width:100%;height:100%;object-fit:cover;display:block}

/* Full-screen photo viewer: pinch zoom only. */
body.viewer-open{overflow:hidden}.photo-viewer{position:fixed;inset:0;z-index:9999;background:rgba(9,18,27,.97);display:none;flex-direction:column;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.photo-viewer.open{display:flex}
.photo-viewer-top{height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:10px;background:rgba(17,29,40,.88);border-bottom:1px solid rgba(255,255,255,.1);flex:0 0 auto}.photo-viewer-top>button{height:38px;width:38px;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:22px;border:1px solid rgba(255,255,255,.16)}.photo-viewer-hint{color:rgba(255,255,255,.72);font-size:11px;font-weight:700}
.photo-viewer-stage{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:10px;touch-action:none;background:#0c141c}.photo-viewer-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none}
.photo-detail-note{margin-top:9px;padding:9px 10px;border-radius:11px;background:#fff7fa;color:#8d6474;font-size:10px;text-align:center;border:1px solid #f0d8e2}

@media(max-height:740px){
  .traffic-home-button{padding:8px 10px}.traffic-home-icon{width:32px;height:32px}.traffic-home-copy strong{font-size:13px}.traffic-home-copy small{font-size:8.7px}
  .main-clients-panel{min-height:0!important}
}
.toll-adjust{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;padding:7px 9px;border-radius:10px;background:#eef9f7;color:#466568;font-size:11px}
.toll-adjust strong{color:#16746f;font-size:12px}
.toll-meta{margin-top:6px;text-align:right;font-size:10px;font-weight:700;color:#738487}


/* V1.12 - 高速料金を料金所単位で明確に表示 */
.toll-leg-head>div{min-width:0;flex:1}
.toll-leg-head>div>strong{display:block;font-size:14px;color:#24484b}
.toll-leg-head>div>small{display:block;margin-top:2px;font-size:9px;color:#718688;font-weight:700}
.toll-saved-status{display:flex;align-items:center;gap:6px;margin:2px 0 9px;font-size:9px;font-weight:800;color:#5f7d7f}
.toll-saved-dot{width:7px;height:7px;border-radius:50%;background:#55bea2;box-shadow:0 0 0 3px #e2f6ef}
.toll-breakdown{display:grid;gap:7px;margin-top:4px}
.toll-breakdown-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid #d7e8e8;border-radius:12px;background:#fff}
.toll-breakdown-main{display:grid;gap:3px;min-width:0}
.toll-road-name{font-size:9px;font-weight:850;color:#6b8587;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toll-route-name{font-size:12px;color:#25494b;line-height:1.35}
.toll-route-name span{color:#70a7aa;padding:0 2px}
.toll-breakdown-fare{flex:0 0 auto;font-size:17px;font-weight:950;color:#238f96;letter-spacing:-.4px}
.toll-breakdown-fare small{font-size:10px;margin-left:2px}
.toll-leg-total-clear{margin-top:10px;padding:11px 12px;border:0;border-radius:13px;background:#e5f7f7}
.toll-leg-total-clear span{font-size:11px;font-weight:900;color:#477477}
.toll-leg-total-clear strong{font-size:23px!important;color:#168e96!important;letter-spacing:-.5px}
.toll-leg-total-clear strong small{font-size:11px;margin-left:2px}
.toll-grand-clear{background:#4fb8bc!important}
.toll-search-btn-secondary{background:#f1f8f8!important;color:#49797c!important;box-shadow:0 2px 0 #d5e8e7!important;border:1px solid #d5e8e7}
.toll-note{background:#f7fbfb;border-radius:10px;padding:9px 10px}


/* V1.16 - 注意事項入力を明確化 */
.warning-form-section{
  border:1px solid #f2cf84;
  background:#fff9e9;
}
.warning-form-section .form-subsection-head{
  margin-bottom:8px;
}
.warning-form-section .form-subsection-head strong{
  color:#8b6416;
}
.warning-input-field{
  margin:0;
}
.warning-input-field textarea{
  min-height:120px;
  background:#fff;
  border-color:#e9c56f;
}
.warning-input-field textarea:focus{
  border-color:#dca632;
  box-shadow:0 0 0 3px rgba(220,166,50,.12);
}

/* 説明文削除後の余白調整 */
.toll-leg-head>div>strong{margin:0}
.photo-section-card .detail-body{padding-bottom:14px}
.notifications-card .switch-row{min-height:48px}


/* V1.17: ホームの業務課ボタンをアプリ中央へ揃える */
body.home-mode .bottom-call{
  left:50%!important;
  right:auto!important;
  width:min(730px,calc(100vw - 16px))!important;
  transform:translateX(-50%)!important;
  bottom:calc(6px + env(safe-area-inset-bottom))!important;
}

.traffic-attribution{
  margin:8px 4px 2px;
  text-align:right;
  font-size:8px;
  color:#7b8e95;
}