.app-shell{
  width:min(430px,90vw);
  padding:14px;
  border-radius:54px;
  background:#08110e;
  box-shadow:0 30px 70px rgba(0,0,0,.28);
}

.app-screen-real{
  min-height:860px;
  padding:26px 22px 20px;
  background:#f4f6f2;
  color:#33403a;
  border-radius:42px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.app-topline,
.today-head,
.sample-trip-top,
.sample-trip-body,
.sample-trip-footer,
.sample-metrics-grid,
.sample-bottom-tabs{
  display:flex;
}

.app-topline,
.today-head,
.sample-trip-top,
.sample-trip-body,
.sample-trip-footer,
.sample-bottom-tabs{
  align-items:center;
  justify-content:space-between;
}

.app-brand-image{width:150px;height:auto;display:block}
.app-head-actions{display:flex;align-items:center;gap:10px}
.demo-pill{padding:8px 16px;border:1px solid #d7ddd5;border-radius:999px;font-size:14px;color:#69756e;background:rgba(255,255,255,.7)}
.icon-btn{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#4a5c53;font-size:18px}

.today-head h2{font-size:36px;letter-spacing:-.04em;line-height:1;margin:0 0 6px;color:#2d3934}
.today-head p{margin:0;color:#6d7a73;font-size:17px}
.refresh-link{color:#426753;font-size:18px;font-weight:700}

.sample-trip-card,
.sample-metric-card,
.sample-feedback-card{
  border:1px solid #d6ddd5;
  border-radius:22px;
  background:#fff;
}

.sample-trip-card{overflow:hidden;background:#fbfcfa}
.sample-trip-top{padding:20px 20px 18px;background:#e8eee5;gap:16px;align-items:flex-start}
.sample-report-time{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.05em;color:#2d3934;white-space:nowrap}
.sample-report-copy,
.sample-seq-copy{display:flex;flex-direction:column;gap:4px}
.sample-report-copy{flex:1;min-width:0}
.sample-report-copy strong,
.sample-seq-copy strong,
.sample-route-main,
.sample-time-main{font-size:18px;font-weight:750;color:#2d3934}
.sample-report-copy span,
.sample-seq-copy span,
.sample-route-sub,
.sample-time-sub,
.metric-label,
.sample-metric-card small,
.sample-disclaimer{color:#6f7b74}
.sample-seq-copy{text-align:right;white-space:nowrap}

.sample-trip-body{padding:18px 20px;border-top:1px solid #edf1eb;gap:12px;align-items:flex-start}
.sample-route-main,.sample-time-main{font-size:24px;letter-spacing:-.04em;margin-bottom:6px}
.sample-time-copy{text-align:right;white-space:nowrap}
.sample-trip-footer{padding:16px 20px;border-top:1px solid #e7ece7;color:#4b5f55;font-size:16px;font-weight:700}
.trip-link{color:#426753}

.sample-metrics-grid{gap:0}
.sample-metric-card{flex:1;padding:22px 20px;min-height:136px;border-radius:0}
.sample-metric-card:first-child{border-top-left-radius:22px;border-bottom-left-radius:22px}
.sample-metric-card:last-child{border-top-right-radius:22px;border-bottom-right-radius:22px;border-left:0}
.sample-metric-card strong{display:block;font-size:36px;letter-spacing:-.04em;line-height:1.05;margin:14px 0 12px;color:#2d3934}
.metric-label{display:block;font-size:16px}
.sample-metric-card small{font-size:14px}

.sample-feedback-card{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;font-size:17px;color:#5d6b64;background:#fbfcfa}

.sample-bottom-tabs{margin-top:auto;border:1px solid #d6ddd5;border-radius:24px;padding:10px 8px;background:#fff;gap:4px}
.sample-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;border-radius:18px;color:#67746d;text-align:center}
.sample-tab span{font-size:20px;line-height:1}
.sample-tab small{font-size:13px;line-height:1.15}
.sample-tab.active{background:#e7eee7;color:#426753;font-weight:800}
.sample-disclaimer{text-align:center;font-size:13px;line-height:1.4;padding-top:8px}

@media(max-width:900px){
  .app-shell{width:min(460px,92vw)}
}

@media(max-width:600px){
  .app-shell{width:min(100%,390px);padding:12px;border-radius:42px}
  .app-screen-real{min-height:auto;padding:20px 16px 16px;border-radius:32px;gap:16px}
  .app-brand-image{width:132px}
  .app-topline{align-items:flex-start;gap:10px}
  .app-head-actions{gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .demo-pill{padding:7px 12px;font-size:13px}
  .today-head h2{font-size:32px}
  .today-head p{font-size:16px}
  .refresh-link{font-size:16px}
  .sample-trip-top,.sample-trip-body,.sample-trip-footer{padding-left:16px;padding-right:16px}
  .sample-trip-top{gap:12px}
  .sample-report-time{font-size:30px}
  .sample-report-copy strong,.sample-seq-copy strong{font-size:15px}
  .sample-report-copy span,.sample-seq-copy span,.sample-route-sub,.sample-time-sub,.metric-label,.sample-metric-card small{font-size:13px}
  .sample-route-main,.sample-time-main{font-size:19px}
  .sample-metrics-grid{gap:10px;flex-direction:column}
  .sample-metric-card{border-radius:20px!important;border-left:1px solid #d6ddd5!important;min-height:auto}
  .sample-metric-card strong{font-size:30px}
  .sample-bottom-tabs{padding:8px 6px;gap:2px}
  .sample-tab{padding:10px 2px}
  .sample-tab small{font-size:11px}
}

@media(prefers-color-scheme:dark){
  .app-screen-real{background:#f2f4ef;color:#33403a}
}