:root{
  --bg:#f8fafc;--panel:#fff;--text:#111827;--muted:#6b7280;--line:#e5e7eb;
  --accent:#2563eb;--accent2:#dbeafe;--danger:#b91c1c;--ok:#166534;--okbg:#dcfce7;
  --warn:#9a3412;--warnbg:#fff7ed;--shadow:0 8px 24px rgba(17,24,39,.08)
}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button,input,select,textarea{font:inherit}a{text-decoration:none;color:inherit}
.app{max-width:900px;margin:auto;padding:16px 16px 92px}.top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}
.top h1{font-size:22px;margin:0 0 4px}.sub{font-size:13px;color:var(--muted)}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.btn{min-height:44px;border:1px solid var(--line);background:white;border-radius:12px;padding:10px 13px;cursor:pointer}.btn.primary{background:var(--accent);border-color:var(--accent);color:white}.btn.danger{color:var(--danger)}
.tabs{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:20}.tabs-inner{max-width:900px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px env(safe-area-inset-bottom)}
.tab{border:0;background:transparent;color:var(--muted);font-weight:800;padding:10px 3px}.tab.active{color:var(--accent)}.view{display:none}.view.active{display:block}
.field{display:grid;gap:6px}label{font-size:12px;color:var(--muted);font-weight:800}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--text);padding:11px;min-height:44px}
textarea{min-height:78px;resize:vertical}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.side{padding:14px;display:grid;gap:12px}.muted{color:var(--muted);font-size:13px}.small{font-size:12px;color:var(--muted)}
.notice{padding:11px;border-radius:12px;background:var(--warnbg);border:1px solid #fed7aa;color:var(--warn);font-size:13px}.ok{padding:11px;border-radius:12px;background:var(--okbg);border:1px solid #bbf7d0;color:var(--ok);font-size:13px}
.list{display:grid;gap:10px}.place{padding:13px}.place h3{margin:0 0 4px;font-size:17px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.chip{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:12px;margin-top:7px}
.route-row{display:grid;grid-template-columns:38px 1fr;gap:8px}.num{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent2);color:var(--accent);font-weight:900;margin-top:13px}.line{width:2px;height:24px;background:var(--line);margin-left:15px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:10px;margin-bottom:10px}.toolbar select{max-width:220px}.install{display:none;padding:12px;margin-bottom:10px;align-items:center;justify-content:space-between;gap:10px}.install.show{display:flex}
.modal{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;overflow:auto}.modal.show{display:flex}.sheet{width:min(900px,100%);max-height:min(88vh,820px);overflow:auto;background:#fff;border-radius:22px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.22)}@media(max-width:700px){.modal{align-items:flex-end;padding:0}.sheet{width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:none}}
.photo-section{margin-top:14px;padding-top:14px;border-top:1px solid #e5e7eb}
.photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.photo-item{border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;background:#fff}
.photo-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#f3f4f6;cursor:pointer}
.photo-caption{padding:8px;font-size:13px;line-height:1.35;word-break:break-word}
.photo-editor{padding:8px}
.photo-editor input{margin-top:6px}
.photo-strip{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:2px}
.photo-mini{width:92px;flex:0 0 92px}
.photo-mini img{width:92px;height:76px;object-fit:cover;border-radius:10px;display:block;background:#f3f4f6}
.photo-mini .cap{font-size:11px;line-height:1.25;margin-top:4px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.photo-status{font-size:12px;color:#6b7280;margin-top:7px}
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.94);display:none;z-index:80;align-items:center;justify-content:center;flex-direction:column;padding:16px}
.viewer.show{display:flex}
.viewer-stage{width:100%;height:78vh;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;position:relative}.viewer img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;touch-action:none}
.viewer .viewer-cap{color:#fff;margin-top:12px;max-width:900px;text-align:center;white-space:pre-wrap}
.viewer .viewer-close{position:absolute;top:14px;right:14px}




.exit-dialog{position:fixed;inset:0;background:rgba(0,0,0,.48);display:none;align-items:center;justify-content:center;z-index:120;padding:24px}.exit-dialog.show{display:flex}.exit-box{width:min(360px,100%);background:#fff;border-radius:20px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.3)}.exit-box h3{margin:0 0 8px}.exit-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}.photo-order-row{display:flex;gap:6px;margin-top:7px}.photo-order-row .btn{flex:1}.expense-total{font-size:22px;font-weight:900;margin:6px 0}.expense-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.expense-amount{font-weight:900;font-size:16px;white-space:nowrap}

.participant-box{display:flex;flex-wrap:wrap;gap:7px;padding:8px 0}
.person-check{display:inline-flex;align-items:center;gap:5px;border:1px solid #d1d5db;border-radius:999px;padding:7px 10px;background:#fff}
.traveler-chip{display:inline-flex;align-items:center;gap:6px;margin:6px 6px 0 0;padding:7px 10px;background:#f3f4f6;border-radius:999px}
.traveler-chip button{border:0;background:transparent;font-weight:900;cursor:pointer}
.expense-card{padding:14px}
.expense-line{display:flex;justify-content:space-between;gap:10px}
.expense-meta{font-size:13px;color:#6b7280;margin-top:5px}
.settle-person{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid #eee}


.expense-table-wrap{overflow-x:auto;margin-top:10px;border:1px solid #e5e7eb;border-radius:14px}
.expense-table{width:100%;border-collapse:collapse;min-width:900px;background:#fff}
.expense-table th,.expense-table td{border-bottom:1px solid #e5e7eb;border-right:1px solid #eef0f2;padding:9px 10px;text-align:left;font-size:13px;white-space:nowrap}
.expense-table th{background:#f8fafc;font-weight:800;position:sticky;top:0}
.expense-table tr:last-child td{border-bottom:0}
.expense-table th:last-child,.expense-table td:last-child{border-right:0}
.expense-excluded{opacity:.52}
.expense-excluded .expense-title,.expense-excluded b{text-decoration:line-through}
.exclude-badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#f3f4f6;font-size:12px;font-weight:700}
.trip-total-box{padding:12px;border-radius:14px;background:#f8fafc;margin-top:8px}
.trip-total-number{font-size:20px;font-weight:900;margin-top:4px}
.transfer-row{padding:8px 0;border-bottom:1px solid #eee;font-weight:700}
.transfer-row:last-child{border-bottom:0}


.summary-section-title{font-size:16px;font-weight:900;margin-top:12px;margin-bottom:6px}
.money-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.personal-spend-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eee}
.personal-spend-row:last-child{border-bottom:0}


.individual-amounts{margin-top:8px}
.individual-row{display:grid;grid-template-columns:1fr 140px;gap:8px;align-items:center;margin-top:7px}
.individual-row input{width:100%}
.amount-mode-note{font-size:12px;color:#6b7280;margin-top:5px}

.amount-preview{margin-top:8px;padding:10px 12px;border-radius:12px;background:#f8fafc;font-size:13px;line-height:1.55}
input:disabled,select:disabled{background:#e5e7eb!important;color:#6b7280!important}
.amount-mode-note{font-size:12px;color:#6b7280;margin-top:5px}

.memo-text{white-space:pre-wrap;overflow-wrap:anywhere}

.place-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.place-head h3{margin:0}
.place-settings{position:relative;flex:0 0 auto}
.icon-btn{width:34px;height:34px;border:1px solid #d1d5db;border-radius:10px;background:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.place-menu{display:none;position:absolute;right:0;top:40px;z-index:20;min-width:150px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:6px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.place-menu.show{display:block}
.place-menu .btn{width:100%;justify-content:flex-start;margin:2px 0;padding:8px 10px}


.trip-card{padding:14px}
.trip-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.trip-title{font-weight:900;font-size:17px}
.trip-meta{font-size:13px;color:#6b7280;margin-top:4px}
.trip-active{border:2px solid #111827}
.trip-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.active-trip-banner{font-weight:700}

.link-input-row{display:grid;grid-template-columns:1fr 40px;gap:7px;align-items:center}
@media(max-width:640px){.individual-row{grid-template-columns:1fr 120px}}

@media(max-width:640px){.grid2{grid-template-columns:1fr}.top h1{font-size:20px}}

/* v26 visual refresh */
:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --text:#172033;
  --muted:#738096;
  --line:#e6ebf2;
  --accent:#4f63e9;
  --accent2:#eef1ff;
  --accent-dark:#3848bf;
  --danger:#d54646;
  --ok:#198754;
  --shadow:0 12px 34px rgba(31,45,80,.09);
}
body{
  background:
    radial-gradient(circle at 15% -5%,rgba(93,110,246,.12),transparent 30%),
    radial-gradient(circle at 95% 5%,rgba(58,196,191,.10),transparent 25%),
    var(--bg);
}
.app{max-width:920px;padding:18px 14px 108px}
.hero{
  min-height:118px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:22px;
  margin-bottom:14px;
  border-radius:26px;
  color:white;
  background:linear-gradient(135deg,var(--hero-dark,#29355f) 0%,var(--hero-main,#4f63e9) 58%,var(--hero-light,#6f7bf7) 100%);
  box-shadow:0 18px 45px rgba(55,70,155,.24);
  overflow:hidden;
  position:relative;
}
.hero:after{
  content:"";
  position:absolute;
  width:170px;height:170px;
  right:-50px;top:-75px;
  border-radius:50%;
  border:34px solid rgba(255,255,255,.08);
}
.hero h1{font-size:30px;line-height:1;margin:5px 0 8px;letter-spacing:-1px}
.hero .sub{color:rgba(255,255,255,.78)}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:2.5px;color:rgba(255,255,255,.72)}
.hero-badge{position:relative;z-index:1;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.22);padding:7px 10px;border-radius:999px;font-weight:900;font-size:12px;backdrop-filter:blur(8px)}
.card{
  border:1px solid rgba(223,229,239,.9);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.side{padding:17px;gap:13px}
.side h2{font-size:18px;letter-spacing:-.35px}
.btn{
  border-color:#dfe5ee;
  border-radius:13px;
  font-weight:800;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#6678ef);
  border-color:transparent;
  box-shadow:0 7px 18px rgba(79,99,233,.22);
}
input,select,textarea{
  border-color:#dfe5ee;
  border-radius:13px;
  background:#fbfcfe;
}
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:#8290f5;
  box-shadow:0 0 0 3px rgba(79,99,233,.10);
  background:white;
}
label{color:#69758b;letter-spacing:.1px}
.trip-card{
  border-left:4px solid transparent;
  transition:transform .15s ease,box-shadow .15s ease;
}
.trip-card:active{transform:scale(.995)}
.trip-active{
  border:1px solid #cdd4ff;
  border-left:4px solid var(--accent);
  background:linear-gradient(135deg,#fff,#f7f8ff);
}
.trip-title{font-size:18px}
.trip-meta{margin-top:5px}
.place{border-radius:20px}
.num{
  background:linear-gradient(135deg,#e8ecff,#f1f5ff);
  color:#4658dc;
  box-shadow:inset 0 0 0 1px #dbe1ff;
}
.chip{
  background:#f7f8fb;
  border-color:#e5e9f0;
  color:#4c5870;
}
.amount-preview,.trip-total-box{
  background:linear-gradient(135deg,#f7f8ff,#f7fbff);
  border:1px solid #e7eaff;
}
.install{background:linear-gradient(135deg,#fff,#f8f9ff)}
.notice{background:#fff9ef;border-color:#f5dfb6}
.tabs{
  background:rgba(248,250,254,.88);
  backdrop-filter:blur(18px);
  border-top:1px solid rgba(218,225,235,.85);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs-inner{
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  padding:7px 8px;
}
.tab{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  border-radius:14px;
  font-size:11px;
  padding:7px 2px;
  font-weight:800;
}
.tab-icon{font-size:19px;line-height:1.2;filter:grayscale(.25)}
.tab.active{
  color:var(--accent);
  background:#eef1ff;
}
.tab.active .tab-icon{filter:none}
.toolbar{border-radius:18px;padding:11px}
.photo-mini img,.photo-item{border-radius:14px}
.expense-table-wrap{border-radius:16px}
.modal{backdrop-filter:blur(5px)}
.sheet{border-radius:26px 26px 0 0;box-shadow:0 -16px 44px rgba(20,28,50,.18)}
.place-menu{border-radius:14px;box-shadow:0 16px 38px rgba(20,28,50,.16)}
.icon-btn{border-radius:12px}
@media(max-width:640px){
  .hero{min-height:106px;padding:19px;border-radius:22px}
  .hero h1{font-size:27px}
  .app{padding-left:11px;padding-right:11px}
  .side{padding:15px}
  .tabs-inner{padding-left:5px;padding-right:5px}
}


.trip-index-card{overflow:hidden}
.trip-index-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.trip-index-tools{display:flex;gap:8px;flex:0 0 auto}
.round-tool-btn{
  width:42px;height:42px;border-radius:14px;border:1px solid #dfe5ee;background:#fff;
  display:grid;place-items:center;font-size:21px;font-weight:900;cursor:pointer;color:#3d4860;
  box-shadow:0 5px 14px rgba(35,48,80,.06)
}
.round-tool-btn:active{transform:scale(.96)}
.primary-tool{background:linear-gradient(135deg,var(--accent),#6d7df0);color:white;border-color:transparent}
.trip-panel{
  display:none;margin-top:4px;padding:14px;border:1px solid #e4e8f4;border-radius:16px;
  background:linear-gradient(135deg,#fafbff,#f7f9ff)
}
.trip-panel.show{display:grid;gap:12px;animation:tripPanelIn .16s ease-out}
@keyframes tripPanelIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.panel-title{font-weight:900;font-size:15px;color:#2c3753}
.trip-list-heading{
  display:flex;align-items:center;justify-content:space-between;padding:14px 4px 8px;
  font-size:13px;font-weight:900;color:#647087
}
.count-badge{
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#e9edff;color:#4658dc;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px
}
.empty-trips{
  padding:30px 18px;text-align:center;border:1px dashed #cfd7e5;border-radius:20px;
  background:rgba(255,255,255,.68);color:#738096
}
.empty-trips .empty-icon{font-size:34px;margin-bottom:8px}
.trip-card .trip-actions .btn{min-height:38px;padding:8px 11px;font-size:13px}


.brand-by{font-size:.46em;font-weight:700;opacity:.78;vertical-align:middle;letter-spacing:.2px;white-space:nowrap}
.trip-date{font-size:12px;color:#78859b;margin-top:5px}


.theme-row{display:grid;grid-template-columns:70px 1fr;gap:10px;align-items:center}
#appBgColor{padding:4px;min-height:44px;cursor:pointer}
.theme-presets{display:flex;gap:10px;flex-wrap:wrap}
.theme-swatch{width:38px;height:38px;border-radius:12px;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #d9e0eb,0 4px 10px rgba(31,45,80,.08);cursor:pointer}
.theme-swatch.selected{box-shadow:0 0 0 2px var(--accent),0 5px 12px rgba(31,45,80,.12)}
.danger-zone{border-color:#f1d6d6;background:linear-gradient(135deg,#fff,#fff9f9)}
.place.completed{opacity:.72;background:linear-gradient(135deg,#f8fafc,#f3f5f8)}
.place.completed h3{text-decoration:line-through;color:#758196}
.complete-btn{width:34px;height:34px;border-radius:10px;border:1px solid #d1d7e2;background:white;display:grid;place-items:center;cursor:pointer;font-size:17px}
.complete-btn.done{background:#e7f8ee;border-color:#bfe6cc;color:#16844b}
.place-head-actions{display:flex;gap:7px;align-items:center}


.setting-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid #edf0f5}
.setting-title{font-weight:900;font-size:14px;color:#35415a}
.switch{position:relative;width:52px;height:30px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.slider{position:absolute;inset:0;background:#cfd6e2;border-radius:999px;cursor:pointer;transition:.2s}
.slider:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 7px rgba(20,30,60,.2);transition:.2s}
.switch input:checked + .slider{background:linear-gradient(135deg,var(--accent),#6b7af0)}
.switch input:checked + .slider:before{transform:translateX(22px)}
.share-disabled-note{padding:10px 12px;border-radius:12px;background:#f4f5f7;color:#788397;font-size:12px;border:1px dashed #d5dbe4}


.hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;position:relative;z-index:2}
.cloud-badge{padding:6px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.7px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12)}
.cloud-badge.online{background:rgba(52,211,153,.18);color:#d9fff1}
.cloud-badge.offline{color:#f0f2ff}
.auth-card{margin-bottom:10px;background:linear-gradient(135deg,#fff,#f8faff)}
.auth-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.auth-user-chip{padding:6px 9px;border-radius:999px;background:#e8f7ef;color:#18784b;font-size:11px;font-weight:900}
.cloud-account-box{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#f5f8ff;border:1px solid #e3e8f8}
#authMessage.error,#supabaseConfigStatus.error{color:#c83e3e}
#authMessage.ok,#supabaseConfigStatus.ok{color:#16844b}


.cloud-trip-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900;background:#e8f7ef;color:#177a4b;border:1px solid #cdebd9}
.local-trip-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900;background:#f3f5f8;color:#758196;border:1px solid #dfe4eb}
.trip-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cloud-syncing{opacity:.72;pointer-events:none}


.place-cloud-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:900;background:#e8f7ef;color:#177a4b;border:1px solid #cdebd9;margin-left:6px}
.place-local-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:900;background:#f2f4f7;color:#778296;border:1px solid #dde2ea;margin-left:6px}


.photo-cloud-label{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 6px;border-radius:999px;background:#e8f7ef;color:#177a4b;border:1px solid #cdebd9;font-size:10px;font-weight:900}
.photo-local-label{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 6px;border-radius:999px;background:#f2f4f7;color:#778296;border:1px solid #dde2ea;font-size:10px;font-weight:900}


.sync-progress-wrap{margin-top:8px}
.sync-progress-track{height:9px;background:#e8ecf5;border-radius:999px;overflow:hidden}
.sync-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#7b89f7);transition:width .25s ease}
#syncProgressText{margin-top:5px;font-variant-numeric:tabular-nums}


.guest-join-box{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.invite-code-box{margin-top:9px;padding:12px;border-radius:14px;background:#f5f7ff;border:1px solid #e3e7ff}
.invite-code-value{font-size:24px;font-weight:900;letter-spacing:3px}
.presence-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.presence-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#eefbf7;font-size:12px;font-weight:800}
.presence-dot{width:7px;height:7px;border-radius:50%;background:#22c55e}


.invite-share-sheet{max-width:420px}
.invite-code-only{
  margin:22px 0 8px;
  padding:22px 14px;
  text-align:center;
  font-size:34px;
  font-weight:900;
  letter-spacing:5px;
  border:1px solid #dfe5ee;
  border-radius:18px;
  background:#f8faff;
  font-variant-numeric:tabular-nums;
}


.share-manage-sheet{max-width:560px}
.share-member-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 130px auto;
  gap:8px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.share-member-row:last-child{border-bottom:0}
.share-member-name{font-weight:900;overflow:hidden;text-overflow:ellipsis}
.share-member-meta{font-size:12px;color:var(--muted);margin-top:3px}
.share-online{display:inline-flex;align-items:center;gap:5px;color:#198754;font-weight:800}
.share-online:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}
.share-offline{color:var(--muted)}
@media(max-width:640px){
  .share-member-row{grid-template-columns:1fr 118px}
  .share-member-row .remove-member-btn{grid-column:1/-1;width:100%}
}


.login-launch-row{margin:0 0 12px}
.login-launch-btn{
  width:100%;display:flex;align-items:center;gap:11px;padding:12px 14px;
  border:1px solid rgba(223,229,239,.95);border-radius:17px;background:#fff;
  box-shadow:var(--shadow);text-align:left;cursor:pointer;color:var(--text)
}
.login-launch-icon{width:38px;height:38px;border-radius:12px;background:var(--accent2);display:flex;align-items:center;justify-content:center;font-size:21px}
.login-launch-text{display:flex;flex-direction:column;min-width:0;flex:1}
.login-launch-text b{font-size:15px}
.login-launch-text span{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-launch-badge{padding:5px 9px;border-radius:999px;background:#eef1ff;color:var(--accent-dark);font-size:12px;font-weight:900}
.login-launch-badge.online{background:#e8f7ef;color:#198754}
.login-access-sheet{max-width:520px}
.login-choice-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
.login-choice{border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px;font-weight:900;cursor:pointer}
.login-choice.active{background:var(--accent2);border-color:#cfd6ff;color:var(--accent-dark)}
.login-choice-panel{display:none}.login-choice-panel.active{display:block}


.schedule-time{
  display:inline-flex;align-items:center;gap:6px;margin:4px 0 8px;padding:6px 10px;
  border-radius:999px;background:#eef2ff;font-weight:900;font-size:14px;
}
.transit-connector{
  grid-column:2;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;color:var(--muted);font-size:13px;
}
.transit-connector b{
  padding:6px 10px;border:1px dashed var(--line);border-radius:999px;background:var(--card);
  color:var(--text);font-size:13px;
}


.login-access-sheet{width:min(560px,100%)}
.login-access-sheet .actions{flex-wrap:wrap}
.login-access-sheet .actions .btn{min-width:0}
@media(min-width:701px){
  .login-access-sheet{max-height:calc(100vh - 48px)}
}


.presence-editing{
  margin-left:6px;
  font-size:11px;
  font-weight:900;
  color:#7c3aed;
}
.editing-badge{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 7px;
  border-radius:999px;
  background:#f3e8ff;
  color:#7c3aed;
  font-size:11px;
  font-weight:900;
  vertical-align:middle;
}


.share-member-row .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:720px){
  .share-member-row{grid-template-columns:1fr}
  .share-member-row .actions{justify-content:flex-start}
}


.guest-approval-status{display:flex;gap:10px;align-items:center;margin-top:12px;padding:12px;border:1px solid #f2c94c;background:#fff8db;border-radius:14px}
.guest-approval-icon{font-size:24px}
.guest-approval-status.approved{border-color:#86efac;background:#ecfdf3}
.guest-approval-status.error{border-color:#fca5a5;background:#fff1f2}


.viewer-tools{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:85;display:flex;align-items:center;gap:7px;color:#fff;background:rgba(0,0,0,.35);padding:6px 8px;border-radius:14px;backdrop-filter:blur(8px)}
.viewer-tools .btn{padding:7px 11px;background:rgba(255,255,255,.92)}
#viewerZoomLabel{min-width:54px;text-align:center;font-weight:900;font-size:13px}
.viewer-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:84;width:52px;height:72px;border:0;border-radius:15px;background:rgba(255,255,255,.16);color:#fff;font-size:48px;line-height:1;cursor:pointer;backdrop-filter:blur(6px)}
.viewer-nav:hover{background:rgba(255,255,255,.28)}
.viewer-prev{left:18px}.viewer-next{right:18px}
.viewer-counter{color:#fff;margin-top:6px;font-size:13px;font-weight:800}
.viewer-stage.dragging{cursor:grabbing}.viewer-stage{cursor:zoom-in}
.viewer-stage.zoomed{cursor:grab}
@media(max-width:700px){.viewer-nav{width:42px;height:60px;font-size:38px}.viewer-prev{left:7px}.viewer-next{right:7px}.viewer-tools{top:58px}}


.hero-swatch{width:38px;height:38px;border-radius:12px;border:2px solid #fff;background:var(--swatch);box-shadow:0 0 0 1px #d9e0eb,0 4px 10px rgba(31,45,80,.08);cursor:pointer}
.hero-swatch.selected{box-shadow:0 0 0 2px var(--accent),0 5px 12px rgba(31,45,80,.12)}