:root{
  --bg:#eef3ee; --panel:#ffffff; --panel-2:#f1f5f1; --line:#e2e9e2;
  --txt:#16241b; --muted:#5d6f63; --accent:#1f9d57; --accent-soft:#e6f6ec;
  --green:#1f9d57; --green-dark:#15673a; --green-soft:#e6f6ec;
  --live:#15a34a; --warn:#e07a16;
  --topbar-h:54px; --tabbar-h:62px;
  --shadow:0 1px 3px rgba(16,40,24,.08); --shadow-lg:0 10px 30px rgba(16,40,24,.14);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"Noto Sans",sans-serif;
  background:var(--bg); color:var(--txt); -webkit-font-smoothing:antialiased; overflow:hidden;
}
html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] button{font-family:"Cairo","Noto Sans Arabic",sans-serif}
.ic{display:inline-block; vertical-align:-.18em; flex:0 0 auto}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; vertical-align:1px; margin-inline-end:5px}
.dot.live{background:var(--live)} .dot.idle{background:var(--muted)}
#app{display:flex; flex-direction:column; height:100vh}

/* Topbar */
#topbar{height:var(--topbar-h); flex:0 0 var(--topbar-h); background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 18px; box-shadow:var(--shadow); z-index:10}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:18px}
.brand .logo{color:var(--green); display:inline-flex; align-items:center}
.brand-name{letter-spacing:.2px}
.brand-sub{color:var(--muted); font-weight:700; font-size:14px}
.ghost-btn{background:var(--panel-2); border:1px solid var(--line); color:var(--txt); border-radius:9px;
  padding:6px 13px; font-size:13px; font-weight:600; cursor:pointer}
.ghost-btn:hover{border-color:var(--accent); color:var(--accent)}

/* Body: just the main panel (sidebar removed — the route picker is a combobox in the topbar) */
#body{flex:1; display:flex; min-height:0; position:relative}
.combo{position:relative; flex:1 1 auto; max-width:440px; margin:0 16px}
.search-ico{position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); line-height:0; color:var(--muted); opacity:.6; pointer-events:none}
#search{width:100%; padding:9px 14px 9px 34px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--txt); font-size:14.5px; outline:none}
html[lang="ar"] #search{padding:9px 34px 9px 14px}
#search:focus{border-color:var(--accent); background:#fff}
#route-list{list-style:none; margin:0; padding:6px; position:absolute; top:calc(100% + 6px); inset-inline:0;
  background:var(--panel); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-lg);
  max-height:min(70vh,520px); overflow:auto; z-index:60}
#route-list.hidden{display:none}
.route{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; cursor:pointer; transition:.12s}
.route:hover{background:var(--panel-2)}
.route.active{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}
.chip{flex:0 0 auto; min-width:34px; height:25px; padding:0 8px; border-radius:7px; display:flex; align-items:center;
  justify-content:center; font-weight:800; font-size:12.5px; color:#fff}
.route .nm{font-size:13.5px; line-height:1.3; color:var(--txt)}

/* Screens (tabbed) */
.screen{position:absolute; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
.screen.hidden{display:none !important} /* beats #screen-buses{display:flex} — keep screens fully separate */
#screen-buses{display:flex; flex-direction:column; overflow:hidden}
.buses-bar{flex:0 0 auto; display:flex; padding:9px 14px; background:var(--panel); border-bottom:1px solid var(--line); z-index:8}
.buses-bar .combo{margin:0; max-width:560px}

/* Buses screen internals */
#route-head{flex:0 0 auto; background:var(--panel); border-bottom:1px solid var(--line); padding:12px 18px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; box-shadow:var(--shadow); z-index:5}
.icon-btn{display:none; background:var(--panel-2); border:1px solid var(--line); border-radius:9px; width:34px; height:34px;
  font-size:18px; cursor:pointer; color:var(--txt); align-items:center; justify-content:center; flex:0 0 auto}
.rh-info{flex:1; min-width:0}
.rh-title{display:flex; align-items:center; gap:9px; font-size:16px; font-weight:700}
.rh-title #rh-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rh-meta{display:flex; gap:12px; font-size:12.5px; color:var(--muted); margin-top:3px}
.rh-meta span:empty{display:none}
#rh-live{color:var(--live); font-weight:700}
.rh-controls{display:flex; gap:10px; align-items:center}
.seg{display:inline-flex; background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:3px}
.seg.hidden{display:none}
.seg button{border:none; background:none; color:var(--muted); font-size:13px; font-weight:600; padding:6px 13px;
  border-radius:8px; cursor:pointer; font-family:inherit}
.seg button.on{background:#fff; color:var(--accent); box-shadow:var(--shadow)}

/* View area (map + linear + empty overlays) */
#view{position:relative; flex:1; min-height:0}
/* z-index:1 makes #map its own stacking context so Leaflet's panes (z 200–700) stay BELOW the linear/empty overlays */
#map{position:absolute; inset:0; background:#e9edf1; z-index:1}
.leaflet-container{background:#e9edf1}
#empty{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:3}
#empty.hidden{display:none}
.empty-card{text-align:center; color:var(--muted); max-width:300px; padding:24px}
.empty-ico{color:var(--muted); margin-bottom:10px; line-height:0; opacity:.7}
#empty p{font-size:15px; line-height:1.6}

/* Linear (primary) view */
#linear{position:absolute; inset:0; overflow-y:auto; background:var(--bg); padding:22px 16px 56px; z-index:4}
#linear.hidden{display:none}
.l-card{max-width:560px; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:24px;
  padding:22px 24px 28px; box-shadow:var(--shadow-lg)}
.l-empty{color:var(--muted); text-align:center; padding:30px}
.l-sched{text-align:center; font-size:12px; font-weight:700; color:var(--muted); background:var(--panel-2);
  border:1px solid var(--line); border-radius:9px; padding:5px 10px; margin:0 auto 16px; width:fit-content}
/* ONE line CENTERED (symmetric). left→right: ذهاب time · ذهاب bus-lane │ line │ إياب bus-lane · إياب time · NAME (right) */
.l-strip{position:relative; direction:ltr}
.l-row{display:flex; align-items:center; min-height:46px}
.l-name{flex:1 1 0; min-width:0; text-align:left; padding-left:8px; font-size:13.5px; color:var(--txt); overflow-wrap:anywhere}
html[lang="ar"] .l-name{direction:rtl}
.l-eta{flex:0 0 44px; font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap; line-height:1.15}
.l-eta.out{text-align:end; padding-inline-end:5px}
.l-eta.in{text-align:start; padding-inline-start:5px}
.l-eta.soon{color:var(--live)}
.l-busgut{flex:0 0 40px}            /* bus lane flanking the line (one each side) */
.l-rail{flex:0 0 24px; align-self:stretch; position:relative; display:flex; align-items:center; justify-content:center}
.l-rail::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:6px; transform:translateX(-50%); background:var(--c); border-radius:3px}
.l-row:first-child .l-rail::before{top:50%}
.l-row:last-child .l-rail::before{bottom:50%}
.l-node{position:relative; z-index:1; width:14px; height:14px; border-radius:5px; background:var(--c); border:2.5px solid #fff; box-shadow:0 0 0 1px rgba(16,32,43,.12)}
.l-row.term .l-node{width:20px; height:20px; border-radius:7px}
.l-row.term .l-name{font-weight:800; font-size:14.5px}
.l-spacer{flex:1 1 0}            /* balances the name so the line stays centred */
.l-buses{position:absolute; inset:0; pointer-events:none}
/* tinted lanes the buses ride in — one each side of the line (option 6) */
.l-buses::before,.l-buses::after{content:""; position:absolute; top:22px; bottom:22px; width:34px; border-radius:17px;
  background:color-mix(in srgb, var(--c) 11%, transparent)}
.l-buses::before{left:calc(var(--railx, 50%) - 28px); transform:translateX(-50%)} /* equal gap from the centre line */
.l-buses::after{left:calc(var(--railx, 50%) + 28px); transform:translateX(-50%)}
.l-bus{position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; border-radius:50%;
  background:var(--bc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px;
  border:2.5px solid #fff; box-shadow:0 3px 11px rgba(16,32,43,.3); z-index:4}
.l-bus::after{content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:9px solid var(--bc)}
.l-bus.back::after{bottom:auto; top:-8px; border-top:none; border-bottom:9px solid var(--bc)} /* back-trip = up arrow */

/* Map markers */
/* Network view = octolinear schematic (SVG, no tiles), fit-to-screen + pan/zoom */
#net{position:absolute; inset:0; overflow:hidden; background:#fff; z-index:4}
#net.hidden{display:none}
#net-canvas{position:absolute; inset:0; overflow:hidden; touch-action:none; cursor:grab}
#net-canvas svg{display:block; width:100%; height:100%}
.net-empty{color:var(--muted); text-align:center; padding:44px 20px; font-size:15px}
.net-legend{position:absolute; top:10px; inset-inline-start:10px; display:flex; flex-wrap:wrap; gap:6px; max-width:72%; pointer-events:none; z-index:6}
.net-legend .lg{display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.93); border:1px solid var(--line); border-radius:8px; padding:2px 8px; font-size:12px; font-weight:800; box-shadow:var(--shadow)}
.net-legend .lg i{width:11px; height:11px; border-radius:3px}
.net-ctrl{position:absolute; bottom:14px; inset-inline-end:14px; display:flex; gap:8px; align-items:center; z-index:6}
.net-btn{background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:var(--shadow); font-family:inherit; color:var(--txt)}
.net-btn.pick{font-weight:800}
.net-zoom{display:inline-flex; gap:0; box-shadow:var(--shadow); border-radius:10px}
.net-zoom .net-btn{box-shadow:none; border-radius:0; border-inline-width:0}
.net-zoom .net-btn:first-child{border-radius:10px 0 0 10px; border-inline-start-width:1px}
.net-zoom .net-btn:last-child{border-radius:0 10px 10px 0; border-inline-end-width:1px}
#net-picker{position:absolute; inset:0; background:rgba(16,40,24,.4); z-index:12; display:flex; flex-direction:column; justify-content:flex-end}
#net-picker .np-head{display:flex; gap:8px; padding:12px; background:var(--panel); border-radius:18px 18px 0 0}
#net-picker .np-head input{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); font-size:14px; outline:none; font-family:inherit}
.np-x{border:none; background:var(--panel-2); border-radius:10px; width:42px; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer}
.np-list{background:var(--panel); max-height:52vh; overflow:auto; padding:0 14px}
.net-row{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--line); cursor:pointer}
.net-row input{width:18px; height:18px; accent-color:var(--green); flex:0 0 auto}
.net-row .nm{font-size:13.5px; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.np-foot{display:flex; gap:10px; padding:12px calc(14px + env(safe-area-inset-bottom,0px)); background:var(--panel)}
.routeline{filter:drop-shadow(0 1px 1.2px rgba(16,32,43,.28))} /* soft depth on the smoothed route line */
.busglide{}
.busrot{position:relative; width:18px; height:44px; line-height:0}
.busimg{width:18px; height:44px; display:block; filter:drop-shadow(0 2px 3px rgba(16,32,43,.4))}
.bushead{position:absolute; top:-6px; left:50%; margin-left:-5px; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:7px solid #0a9b48;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); z-index:2}
.leaflet-marker-icon.busglide.idle{opacity:.5; filter:grayscale(.6)}
.leaflet-bar a, .leaflet-control-attribution{background:#fff!important; color:var(--muted)!important}

/* Mobile */
@media (max-width:760px){
  #topbar{padding:0 14px}
  .rh-controls{width:100%}
  .l-card{border-radius:18px; padding:18px 16px 24px}
}
.spin{display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:r .8s linear infinite; vertical-align:-2px; margin-inline-end:6px}
@keyframes r{to{transform:rotate(360deg)}}

/* ===== Green shell: bottom tab bar ===== */
#tabbar{flex:0 0 auto; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
  display:flex; background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -1px 8px rgba(16,40,24,.06); z-index:20}
.tab{flex:1; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  color:var(--muted); font-family:inherit; font-size:11px; font-weight:600; padding:6px 0; position:relative}
.tab-ico{line-height:0; display:inline-flex; opacity:.72}
.tab.on{color:var(--green-dark)}
.tab.on .tab-ico{opacity:1}
.tab.on::before{content:""; position:absolute; top:0; width:34px; height:3px; border-radius:0 0 3px 3px; background:var(--green)}

/* ===== Home ===== */
.home{max-width:620px; margin:0 auto; padding:18px 16px 30px}
.hero{text-align:center; padding:16px 12px 8px}
.hero-leaf{color:var(--green); line-height:0; display:flex; justify-content:center}
.hero h1{margin:8px 0 6px; font-size:23px; font-weight:800; color:var(--green-dark); line-height:1.3}
.hero p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6}
.hero .about{font-size:13.5px; line-height:1.7; margin-top:8px}
.home-h{font-size:14px; font-weight:800; color:var(--green-dark); margin:18px 2px 10px}
.impact-card{margin:16px 0; background:linear-gradient(135deg,var(--green),#2bb56a); color:#fff; border-radius:20px; padding:18px 20px; box-shadow:var(--shadow-lg)}
.impact-big{font-size:15px; opacity:.95}
.impact-n{font-size:34px; font-weight:800}
.impact-u{font-size:16px; font-weight:700}
.impact-sub{margin-top:4px; font-size:12.5px; opacity:.92}
.entry-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.entry{border:1px solid var(--line); background:var(--panel); border-radius:18px; padding:18px 14px; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:4px; box-shadow:var(--shadow); transition:.15s; font-family:inherit}
.entry:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--green)}
.entry-ico{color:var(--green-dark); line-height:0; margin-bottom:2px}
.entry.buses .entry-ico{color:#2f7da8}
.entry-t{font-size:16px; font-weight:800; color:var(--txt)}
.entry-s{font-size:12px; color:var(--muted)}
.entry.carpool{background:var(--green-soft); border-color:#c7ead4}
.why{margin-top:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px 16px}
.why b{color:var(--green-dark)}
.why p{margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.6}

/* ===== Carpool ===== */
.cp{max-width:620px; margin:0 auto; padding:14px 16px 92px}
.cp-hero{display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,var(--green),#2bb56a); color:#fff;
  border-radius:18px; padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow)}
.cp-hero-ic{flex:0 0 auto; line-height:0; color:#fff}
.cp-hero-t{font-size:18px; font-weight:800}
.cp-hero-s{font-size:12.5px; opacity:.92; margin-top:1px}
.seg2{display:flex; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:3px; gap:3px}
.seg2.big{margin-bottom:12px}
.s2{flex:1; border:none; background:none; padding:9px; border-radius:9px; font-family:inherit; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer}
.s2.on{background:#fff; color:var(--green-dark); box-shadow:var(--shadow)}
.cp-search{display:flex; gap:8px; margin-bottom:10px}
#cp-q{flex:1; padding:10px 14px; border-radius:11px; border:1px solid var(--line); background:var(--panel-2); font-size:14px; outline:none; font-family:inherit}
#cp-q:focus{border-color:var(--green); background:#fff}
.chip-toggle{display:flex; align-items:center; padding:0 12px; border-radius:11px; border:1px solid var(--line); background:var(--panel-2); font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; white-space:nowrap}
.chip-toggle.on{background:var(--green-soft); border-color:var(--green); color:var(--green-dark)}
.demo-note{background:#fff7e8; border:1px solid #f6e2b8; color:#8a6a1f; font-size:12px; padding:8px 12px; border-radius:11px; margin-bottom:12px; line-height:1.5}
.trip{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:13px 15px; margin-bottom:11px; cursor:pointer; box-shadow:var(--shadow); transition:.12s}
.trip:hover{border-color:var(--green); transform:translateY(-1px)}
.trip-route{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; color:var(--txt); flex-wrap:wrap}
.trip-route .arr{color:var(--green); font-weight:900}
.trip-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; font-size:12.5px; color:var(--muted)}
.trip-meta .leaf{color:var(--green-dark); font-weight:700}
.women{color:#b03a86; font-weight:700}
.trip-foot{display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin-top:8px; font-size:12.5px; color:var(--muted)}
.trip-foot .who{font-weight:700; color:var(--txt)}
.tnote{font-style:italic}
.cp-empty{color:var(--muted); text-align:center; padding:34px 10px; font-size:14px}
.fab{position:absolute; inset-inline-end:18px; bottom:18px; background:var(--green); color:#fff; border:none; border-radius:16px;
  padding:14px 20px; font-size:15px; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:0 8px 22px rgba(31,157,87,.4); z-index:9}

/* ===== Me ===== */
.me{max-width:620px; margin:0 auto; padding:16px 16px 30px}
.me-card{display:flex; align-items:center; gap:13px; background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:15px; box-shadow:var(--shadow)}
.me-ava{width:54px; height:54px; border-radius:50%; background:var(--green-soft); color:var(--green-dark); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.me-id{flex:1; min-width:0}
.me-name{font-size:17px; font-weight:800}
.me-ph{font-size:13px; color:var(--muted); margin-top:2px}
.me-ph .ok{color:var(--green-dark); font-weight:700}
.me-impact{display:flex; flex-direction:column; gap:2px; background:linear-gradient(135deg,var(--green),#2bb56a); color:#fff; border-radius:16px; padding:14px 16px; margin:14px 0}
.me-impact b{font-size:22px}
.me-impact .muted{color:rgba(255,255,255,.85)}
.me-sec{margin-top:16px}
.me-sec h3{margin:0 0 8px; font-size:14px; color:var(--green-dark)}
.me-row{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:11px 14px; margin-bottom:8px; font-size:14px; font-weight:600}
.me-row .ok{color:var(--green-dark); font-weight:700; font-size:12.5px}
.muted{color:var(--muted)} .small{font-size:12px}

/* ===== Bottom sheet ===== */
#sheet-host{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center}
#sheet-host.hidden{display:none}
#sheet-backdrop{position:absolute; inset:0; background:rgba(16,40,24,.45); opacity:0; transition:.22s}
#sheet-host.open #sheet-backdrop{opacity:1}
#sheet{position:relative; width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:var(--panel);
  border-radius:22px 22px 0 0; padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 40px rgba(16,40,24,.3);
  transform:translateY(100%); transition:transform .24s cubic-bezier(.2,.8,.2,1)}
#sheet-host.open #sheet{transform:translateY(0)}
#sheet::before{content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:2px; background:var(--line)}
.sheet-h{font-size:18px; font-weight:800; margin:4px 0 6px; color:var(--txt)}
.sheet-sub{color:var(--muted); font-size:13.5px; margin:0 0 14px}
.consent-body{font-size:13.5px; line-height:1.7; color:var(--txt); background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:14px; max-height:44vh; overflow-y:auto; margin-bottom:12px}
.chk{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:600; margin:10px 0; cursor:pointer; line-height:1.45}
.chk input{margin-top:2px; width:18px; height:18px; accent-color:var(--green); flex:0 0 auto}
.fld{display:block; margin:11px 0}
.fld>span{display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:5px}
.fld input{width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); font-size:15px; font-family:inherit; outline:none}
.fld input:focus{border-color:var(--green); background:#fff}
.row2{display:flex; gap:10px} .row2 .fld{flex:1}
.hint{font-size:12px; color:var(--muted); margin:-4px 0 8px}
.sheet-actions{display:flex; gap:10px; margin-top:16px}
.btn{flex:1; text-align:center; padding:13px; border-radius:13px; border:none; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px}
.btn.primary{background:var(--green); color:#fff} .btn.primary:disabled{opacity:.45}
.btn.ghost{background:var(--panel-2); color:var(--txt); border:1px solid var(--line)}
.btn.wa{background:#25d366; color:#fff}
.btn.wide{width:100%; margin-top:6px} .btn.sm{flex:0 0 auto; padding:9px 14px; font-size:13px}
.td-meta{color:var(--muted); font-size:13px; margin-bottom:8px}
.td-who{font-weight:700; margin-bottom:8px}
.td-note{background:var(--panel-2); border-radius:12px; padding:10px 13px; font-style:italic; color:var(--txt)}
.confirmed{background:var(--green-soft); color:var(--green-dark); font-weight:800; padding:12px; border-radius:13px; text-align:center}
.share-num{font-size:20px; font-weight:800; text-align:center; letter-spacing:.5px; margin:10px 0; direction:ltr}
.share-num.sm{font-size:16px; margin:5px 0}
.pending-line{background:#fff7e8; border:1px solid #f6e2b8; color:#8a6a1f; font-weight:700; padding:12px; border-radius:13px; text-align:center}
.me-row.col{display:flex; flex-direction:column; gap:6px; align-items:stretch}
.me-row .ok{color:var(--green-dark); font-weight:700; font-size:12.5px}
.me-acts{display:flex; gap:8px; margin-top:2px}
.me-acts .btn.sm{flex:1}
.warn-line{background:#fde8f1; color:#b03a86; font-weight:700; padding:10px; border-radius:11px; margin-bottom:10px; font-size:13px}
.shake{animation:shk .4s}
@keyframes shk{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}