/* SEA & Finance styles (extracted from styles.v2-4-0-r26.css) */


/* ==================== SEA & FINANCE (r26) ==================== */
.sea-finance-body{padding:10px 16px 32px!important;}

.sf-section-label{font-size:13px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;}

.sf-card{background:#fff;border-radius:16px;padding:18px;margin-bottom:12px;box-shadow:0 2px 12px rgba(0,0,0,.08);position:relative;}

.sf-clickable{cursor:pointer;}

.sf-card-arrow{float:right;color:#0066cc;}

.sf-ship{font-size:17px;font-weight:700;}

.sf-meta{font-size:13px;color:#666;margin-top:4px;}

.sf-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f5f5f5;font-size:14px;gap:12px;}

.sf-row:last-child{border:none;}

.sf-k{color:#666;flex-shrink:0;}

.sf-v{font-weight:600;text-align:right;word-break:break-word;}

.sf-subhead{font-size:13px;font-weight:700;color:#0066cc;margin:12px 0 4px;text-transform:uppercase;}

.sf-empty-title{font-size:16px;font-weight:700;margin-bottom:6px;}

.sf-empty-sub{font-size:14px;color:#666;margin-bottom:12px;}

.sf-attach{background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);color:#0066cc;}

.sf-attach-name{font-size:14px;font-weight:600;color:#1a1a1a;}

.sf-attach-sub{font-size:12px;color:#666;}

.sf-hist{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 6px rgba(0,0,0,.06);color:#666;}

.sf-hist-ship{font-weight:600;font-size:14px;color:#1a1a1a;}

.sf-hist-d{font-size:12px;color:#666;margin-top:2px;}

.sf-add-btn{display:block;width:100%;padding:14px;border:2px dashed #0066cc;border-radius:12px;background:none;color:#0066cc;font-size:15px;font-weight:600;cursor:pointer;margin-top:16px;}

.sf-btn-primary{display:block;width:100%;padding:13px;border:none;border-radius:10px;background:#0066cc;color:#fff;font-size:15px;font-weight:700;cursor:pointer;margin-top:12px;}

.sf-btn-small{padding:8px 14px;border:none;border-radius:8px;background:#0066cc;color:#fff;font-size:13px;font-weight:600;cursor:pointer;}

.sf-btn-back{flex:1;padding:12px;border:none;border-radius:8px;background:#f0f0f0;color:#333;font-size:14px;font-weight:600;cursor:pointer;}

.sf-btn-next{flex:1;padding:12px;border:none;border-radius:8px;background:#0066cc;color:#fff;font-size:14px;font-weight:700;cursor:pointer;}

.sf-del{background:none;border:none;color:#d32f2f;font-size:13px;cursor:pointer;padding:4px 8px;}


/* Dashboard */
.sf-dash{background:linear-gradient(135deg,#0066cc,#004499);border-radius:16px;padding:20px;color:#fff;margin-bottom:12px;position:relative;}

.sf-dash-overrun{background:linear-gradient(135deg,#ff9800,#f57c00);}

.sf-dash-completed{background:linear-gradient(135deg,#26a69a,#00796b);}

.sf-completed-label{font-size:14px;}

.sf-dash-mlc{background:linear-gradient(135deg,#e53935,#b71c1c);}

.sf-goals-btn{position:absolute;top:16px;right:12px;width:28px;height:28px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}

.sf-days-row{display:flex;align-items:flex-start;gap:12px;margin-top:8px;}

.sf-card-ship{font-size:16px;font-weight:800;margin-bottom:6px;letter-spacing:.2px;}
.sf-days-big{font-size:36px;font-weight:800;line-height:1;}

.sf-days-label{font-size:13px;opacity:.85;padding-top:4px;}

.sf-onboard{font-size:13px;margin-top:8px;opacity:.9;}

.sf-onboard-sub{font-size:12px;margin-top:4px;opacity:.85;}

.sf-mlc-note{font-size:13px;font-weight:700;margin-top:8px;background:rgba(255,255,255,.2);border-radius:8px;padding:8px 12px;}

.sf-earn-row{display:flex;justify-content:space-between;margin-top:12px;font-size:13px;}

.sf-earn-k{opacity:.7;}

.sf-earn-v{font-weight:700;font-size:16px;}


/* Timeline */
.sf-timeline{margin-top:12px;}

.sf-tl-top{display:flex;justify-content:space-between;align-items:flex-end;font-size:11px;opacity:.85;margin-bottom:2px;}

.sf-tl-ptr{display:flex;flex-direction:column;align-items:center;}

.sf-tl-val{font-size:10px;font-weight:700;}

.sf-tri-down{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #000;margin-top:2px;}

.sf-tri-up{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:10px solid #000;margin-bottom:2px;}

.sf-tl-bar{display:flex;height:8px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;margin:2px 0;}

.sf-tl-normal{background:#fff;}

.sf-tl-over{background:#ffcc80;}

.sf-tl-bottom{display:flex;justify-content:flex-end;}


/* Goals flip */
.sf-flip-btn{position:absolute;top:12px;right:12px;padding:6px 10px;border:none;border-radius:20px;background:rgba(255,255,255,.25);color:#fff;cursor:pointer;display:flex;align-items:center;}

.sf-flip-title{font-size:14px;font-weight:700;margin-bottom:12px;}

.sf-flip-empty{font-size:13px;opacity:.8;margin-bottom:12px;}

.sf-goal{margin-bottom:12px;}

.sf-goal-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px;}

.sf-goal-bar{height:8px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;}

.sf-goal-fill{height:100%;border-radius:4px;}

.sf-goal-eta{font-size:11px;opacity:.85;margin-top:2px;}

.sf-flip-actions{display:flex;gap:8px;margin-top:8px;}


/* Tabs */
.sf-detail-head{margin-bottom:4px;}

.sf-tabs{display:flex;background:#fff;border-radius:12px 12px 0 0;overflow:hidden;margin-top:12px;}

.sf-tab{flex:1;padding:12px 4px;text-align:center;font-size:13px;font-weight:600;color:#666;cursor:pointer;border:none;background:none;border-bottom:3px solid transparent;}

.sf-tab.active{color:#0066cc;border-bottom-color:#0066cc;}

.sf-tab-body{background:#fff;border-radius:0 0 12px 12px;padding:18px;margin-bottom:16px;}

.sf-detail-actions{margin-bottom:16px;}

.sf-port{padding:10px 0;border-bottom:1px solid #f5f5f5;}

.sf-port:last-child{border:none;}

.sf-port-name{font-weight:600;font-size:14px;}

.sf-port-d{font-size:12px;color:#666;margin-top:2px;}


/* Wizard */
.sf-wiz{background:#fff;border-radius:16px;padding:20px;margin-top:16px;box-shadow:0 2px 12px rgba(0,0,0,.08);}

.sf-wiz-steps{display:flex;gap:6px;margin-bottom:16px;}

.sf-wiz-step{flex:1;height:4px;background:#e0e0e0;border-radius:2px;}

.sf-wiz-step.done{background:#0066cc;}

.sf-wiz-step.active{background:#0066cc;opacity:.5;}

.sf-wiz-title{font-size:16px;margin-bottom:12px;font-weight:700;}

.sf-label{display:block;font-size:13px;font-weight:600;color:#333;margin:10px 0 6px;}

.sf-input{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px;font-size:14px;font-family:inherit;}

.sf-wiz-btns{display:flex;gap:10px;margin-top:12px;}

.sf-note{font-size:13px;color:#666;margin-top:8px;}

.sf-goal-setup .sf-input{margin-bottom:8px;}

.sf-spend-row{display:flex;gap:8px;}

.sf-spend-row .sf-spend-val{flex:1;}

.sf-spend-row .sf-spend-mode{width:100px;flex:none;}

.sf-strat{display:flex;background:#f0f2f5;border-radius:10px;padding:4px;margin-bottom:12px;gap:4px;}

.sf-strat-btn{flex:1;padding:10px;border:none;border-radius:8px;background:none;font-size:13px;font-weight:600;color:#666;cursor:pointer;}

.sf-strat-btn.active{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1);color:#0066cc;font-weight:700;}

.sf-goal-table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:12px;}

.sf-goal-table th{text-align:left;padding:8px;color:#666;font-weight:600;border-bottom:2px solid #eee;font-size:13px;}

.sf-goal-table td{padding:10px 8px;border-bottom:1px solid #f5f5f5;}

.sf-goal-addrow{display:flex;gap:8px;}

.sf-goal-addrow .sf-input{margin-bottom:0;}

.sf-goal-addrow .sf-btn-small{flex:none;}

/* r261: contract list rows */
.sf-rowitem{background:#fff;border-radius:12px;padding:14px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 6px rgba(0,0,0,.06);color:#666;}
.sf-rowitem-text{flex:1;min-width:0;}
.sf-rowitem-l1{font-weight:700;font-size:15px;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-rowitem-l2{font-size:12px;color:#666;margin-top:3px;}
.sf-badge{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:#0066cc;border-radius:10px;padding:2px 8px;margin-left:6px;vertical-align:middle;text-transform:uppercase;letter-spacing:.4px;}

/* r263: timeline pointers at far right edge, vertically aligned */
.sf-tl-ptr-edge{margin-right:-4px;}

/* r266: scroll fix — ensure the list scrolls */
.sea-finance-body{
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  overscroll-behavior-y:contain;
}

/* r266: inline accordion detail */
.sf-accordion{
  background:transparent;
  margin:-4px 0 10px 0;
  animation:sfAccIn .18s ease-out;
}
@keyframes sfAccIn{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}
.sf-rowitem-chev{transition:transform .18s ease;flex:none;}
.sf-rowitem-chev.sf-chev-open{transform:rotate(90deg);}

/* r272: compact 2-per-row wizard */
.sf-wiz{padding:14px;}
.sf-wiz-title{font-size:15px;margin-bottom:10px;}
.sf-wiz-steps{margin-bottom:12px;}
.sf-row2{display:flex;gap:8px;}
.sf-row3{display:flex;gap:8px;}
.sf-f{flex:1;min-width:0;margin-bottom:10px;}
.sf-f-flex{flex:0 0 74px;}
.sf-row2 .sf-label,.sf-row3 .sf-label{margin:0 0 4px;font-size:12px;}
.sf-row2 .sf-input,.sf-row3 .sf-input{margin-bottom:0;padding:10px 8px;font-size:13px;}
.sf-period-wrap{display:flex;align-items:center;border:1px solid #ddd;border-radius:8px;background:#fff;overflow:hidden;}
.sf-period-wrap .sf-input-nb{flex:1;border:none;text-align:center;font-size:14px;font-weight:700;padding:10px 4px;min-width:0;background:transparent;font-family:inherit;}
.sf-period-wrap .sf-input-nb:focus{outline:none;}
.sf-period-wrap:focus-within{border-color:#0066cc;}
.sf-unit{padding:0 10px 0 2px;font-size:12px;color:#888;white-space:nowrap;}
.sf-flex-wrap{display:flex;align-items:center;border:1px solid #ddd;border-radius:8px;background:#fff;overflow:hidden;}
.sf-flex-wrap:focus-within{border-color:#0066cc;}
.sf-flex-sym{padding:0 0 0 8px;font-size:16px;font-weight:700;color:#0066cc;}
.sf-flex-wrap .sf-input-nb{flex:1;border:none;text-align:center;font-size:14px;font-weight:700;padding:10px 2px;min-width:0;background:transparent;font-family:inherit;}
.sf-flex-wrap .sf-input-nb:focus{outline:none;}
.sf-auto-tag{display:inline-block;font-size:10px;font-weight:700;color:#0066cc;background:#e8f0fe;border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:middle;}
.sf-enddate-display{padding:10px 8px;background:#f0f2f5;border-radius:8px;font-size:13px;color:#555;font-weight:600;}
.sf-subhead{margin:10px 0 6px;}
.sf-wiz .sf-label{font-size:12px;margin:0 0 4px;}
.sf-wiz .sf-input{padding:10px 8px;font-size:13px;margin-bottom:10px;}

/* r273: equal field heights + tappable option + iOS zoom fix */
.sf-row2 .sf-input,.sf-row3 .sf-input{height:42px;box-sizing:border-box;}
.sf-period-wrap,.sf-flex-wrap{height:42px;box-sizing:border-box;}
.sf-period-wrap .sf-input-nb,.sf-flex-wrap .sf-input-nb{height:100%;padding:0 4px;font-size:16px;box-sizing:border-box;}
.sf-flex-sym{font-size:18px;}
.sf-enddate-display{min-height:42px;box-sizing:border-box;display:flex;align-items:center;}

/* r274: iOS date input height fix + compact row-3 columns */
.sf-row3 input[type="date"]{-webkit-appearance:none;appearance:none;height:42px !important;min-height:42px;line-height:42px;box-sizing:border-box;}
.sf-row3 .sf-f-period{flex:0 0 112px;max-width:112px;}
.sf-row3 .sf-f-flex{flex:0 0 84px;max-width:84px;}
.sf-unit{padding:0 6px 0 2px;}

/* r275: Option field — symbol dropdown + number side by side */
.sf-flex2-wrap{display:flex;gap:4px;}
.sf-flex2-wrap .sf-flex-sign{flex:0 0 52px;max-width:52px;padding:10px 4px;text-align:center;font-size:16px;font-weight:700;height:42px;box-sizing:border-box;}
.sf-flex2-wrap .sf-flex-num{flex:1;min-width:0;text-align:center;font-size:16px;font-weight:700;height:42px;box-sizing:border-box;}
.sf-row3 .sf-f-flex{flex:0 0 110px;max-width:110px;}
/* r275: emoji picker */
.sf-emoji-wrap{position:relative;flex:none;}
.sf-emoji-btn{width:42px;height:42px;border:1.5px solid #d5d5d5;border-radius:12px;background:#fff;font-size:22px;cursor:pointer;padding:0;line-height:1;}
.sf-emoji-pop{position:absolute;top:48px;left:0;z-index:50;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:#fff;border:1.5px solid #d5d5d5;border-radius:12px;padding:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);}
.sf-emoji-opt{width:40px;height:40px;border:none;background:#f5f6f8;border-radius:8px;font-size:22px;cursor:pointer;padding:0;line-height:1;}
.sf-emoji-opt:active{background:#e0e0e0;}

/* r276: bottom-sheet modal for add/import wizard */
.sf-sheet-overlay{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(10,15,25,.5);z-index:2000;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s ease;}
.sf-sheet-overlay.show{opacity:1;}
.sf-sheet{position:relative;width:100%;max-width:560px;max-height:88vh;max-height:88dvh;background:#f2f4f7;border-radius:20px 20px 0 0;transform:translateY(102%);transition:transform .32s cubic-bezier(.32,.72,.35,1);display:flex;flex-direction:column;box-shadow:0 -8px 32px rgba(0,0,0,.25);}
.sf-sheet-overlay.show .sf-sheet{transform:translateY(0);}
.sf-sheet-close{position:absolute;top:10px;right:12px;width:34px;height:34px;border-radius:50%;border:none;background:#e2e6ec;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:6;padding:0;}
.sf-sheet-close:active{background:#d0d5dd;}
.sf-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:20px 16px calc(22px + env(safe-area-inset-bottom));}
.sf-sheet-body .sf-wiz{margin-top:0;max-width:520px;margin-left:auto;margin-right:auto;}
/* r276: emoji picker popup with category tabs (overrides r275 grid popup) */
.sf-emoji-pop{position:absolute;top:48px;left:0;z-index:60;background:#fff;border:1.5px solid #d5d5d5;border-radius:12px;padding:8px;box-shadow:0 4px 20px rgba(0,0,0,.2);width:272px;max-height:320px;overflow-y:auto;display:block;}
.sf-emoji-tabs{display:flex;gap:4px;margin-bottom:8px;}
.sf-emoji-tab{flex:1;border:none;background:#f0f2f5;border-radius:8px;padding:7px 2px;font-size:12px;font-weight:700;color:#666;cursor:pointer;}
.sf-emoji-tab.active{background:#0066cc;color:#fff;}
.sf-emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
.sf-emoji-grid .sf-emoji-opt{width:100%;aspect-ratio:1;border:none;background:#f5f6f8;border-radius:8px;font-size:22px;cursor:pointer;padding:0;line-height:1;}
.sf-emoji-grid .sf-emoji-opt:active{background:#e0e0e0;}

/* r277: centered popup variant for the wizard (action sheet keeps bottom slide-in) */
.sf-sheet-overlay.sf-centered{align-items:center;padding:18px;}
.sf-sheet-overlay.sf-centered .sf-sheet{border-radius:20px;transform:scale(.92);max-height:85vh;max-height:85dvh;width:100%;}
.sf-sheet-overlay.sf-centered.show .sf-sheet{transform:scale(1);}
.sf-emoji-grid-all{max-height:300px;overflow-y:auto;}

/* r278: emoji picker opens upward as a fixed overlay (immune to wizard scroll clipping) */
.sf-emoji-pop{position:fixed !important;top:auto !important;z-index:3000;max-height:320px;}

/* r279: X close button no longer overlaps the step progress bar */
.sf-sheet-body .sf-wiz-steps{margin-top:34px;}

/* r280: single card — sheet uses app card surface (white in light mode,
   dark navy in dark mode via --sc-card-surface); inner white wizard card
   removed so content renders directly in the single popup card */
.sf-sheet{background:var(--sc-card-surface,#fff);}
.sf-sheet-body .sf-wiz{background:none;border-radius:0;box-shadow:none;padding:0;}
/* r280: dark mode readability for wizard text/inputs inside the sheet */
html[data-theme="dark"] .sf-sheet-body .sf-wiz-title,
html[data-theme="dark"] .sf-sheet-body .sf-label,
html[data-theme="dark"] .sf-sheet-body .sf-subhead{color:#d7e6f2;}
html[data-theme="dark"] .sf-sheet-body .sf-input,
html[data-theme="dark"] .sf-sheet-body .sf-input-nb,
html[data-theme="dark"] .sf-sheet-body select.sf-input{background:#0d1b2a;color:#e8f1f8;border-color:#2a4a66;}
html[data-theme="dark"] .sf-sheet-body .sf-enddate-display{background:#0d1b2a;color:#b4cdda;}
html[data-theme="dark"] .sf-sheet-body .sf-period-wrap,
html[data-theme="dark"] .sf-sheet-body .sf-flex-wrap{background:#0d1b2a;border-color:#2a4a66;}
html[data-theme="dark"] .sf-sheet-close{background:#2a4a66;color:#e8f1f8;}

/* r281: wizard popup card fully opaque — solid background, no transparency.
   The dimmed overlay behind the card stays dimmed; the CARD itself is solid.
   !important overrides the app's --sc-card-surface variable, which carries
   an alpha value (frosted-glass effect) in the main stylesheet. */
.sf-sheet{
  background:#ffffff !important;
  opacity:1 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-theme="dark"] .sf-sheet{
  background:#0d1b2a !important;
}

/* r284: emoji picker -- mobile bottom sheet / desktop popover (in document.body) */
.sf-emoji-backdrop{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(10,15,25,.35);z-index:9998;}
.sf-emoji-pop.sf-open{position:fixed;z-index:9999;background:#fff;border:1.5px solid #d5d5d5;box-shadow:0 8px 32px rgba(0,0,0,.25);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.sf-emoji-pop.sf-open .sf-emoji-grid-all{max-height:none !important;overflow:visible !important;}
.sf-emoji-pop.sf-open .sf-emoji-opt{min-width:40px;min-height:40px;}
.sf-emoji-handle{display:none;width:40px;height:4px;border-radius:2px;background:#d5d5d5;margin:8px auto 4px;flex:none;}
@media (max-width:768px){
  .sf-emoji-pop.sf-open{left:0 !important;right:0 !important;top:auto !important;bottom:0 !important;width:100% !important;max-width:100% !important;max-height:50vh !important;max-height:50dvh !important;border-radius:16px 16px 0 0 !important;border-left:none !important;border-right:none !important;border-bottom:none !important;padding:4px 12px calc(12px + env(safe-area-inset-bottom)) !important;}
  .sf-emoji-pop.sf-open .sf-emoji-handle{display:block;}
  .sf-emoji-pop.sf-open .sf-emoji-grid-all{grid-template-columns:repeat(8,1fr) !important;}
}
@media (min-width:769px){
  .sf-emoji-pop.sf-open{border-radius:12px !important;padding:8px !important;padding-top:calc(8px + env(safe-area-inset-top)) !important;width:min(320px,90vw) !important;max-height:50vh !important;}
}

/* r285: single-card expandable contract card — one outer container, 3 flat sections, no gaps */
.sf-card{background:#fff;border-radius:16px;overflow:hidden;margin-bottom:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);}
.sf-card-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;cursor:pointer;}
.sf-card.open .sf-card-head{border-bottom:1px solid #eee;}
.sf-card-head-text{flex:1;min-width:0;}
.sf-card-title{font-weight:700;font-size:15px;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sf-card-sub{font-size:12px;color:#888;margin-top:3px;}
.sf-card-chev{transition:transform .18s ease;flex:none;color:#888;margin-left:8px;}
.sf-card.open .sf-card-chev{transform:rotate(180deg);}
.sf-card-mid{padding:18px 16px;color:#fff;position:relative;}
.sf-mid-completed{background:#0B8B6A;}
.sf-mid-normal{background:#0066cc;}
.sf-mid-overrun{background:#ff9800;}
.sf-mid-mlc{background:#e53935;}
.sf-card-mid .sf-goals-btn{top:14px;right:14px;}
.sf-cm-ship{font-size:13px;font-weight:600;opacity:.9;}
.sf-cm-status{font-size:30px;font-weight:800;line-height:1.15;margin-top:2px;}
.sf-cm-sub{font-size:13px;opacity:.85;}
.sf-cm-badge{display:inline-block;margin-top:10px;background:rgba(255,255,255,.22);border-radius:12px;padding:5px 12px;font-size:12px;font-weight:600;}
.sf-cm-end{font-size:12px;margin-top:8px;opacity:.9;}
.sf-cm-bar{height:8px;background:rgba(255,255,255,.25);border-radius:4px;overflow:hidden;margin-top:10px;}
.sf-cm-bar>div{height:100%;background:#fff;border-radius:4px;}
.sf-cm-earn{display:flex;justify-content:space-between;margin-top:12px;}
.sf-card-body{background:#fff;}
.sf-card-body .sf-tabs{margin-top:0;border-radius:0;}
.sf-card-body .sf-tab-body{margin-bottom:0;border-radius:0;padding:14px 16px;}
.sf-card-body .sf-detail-actions{margin-bottom:0;padding:2px 16px 16px;}
/* r285 dark mode */
html[data-theme="dark"] .sf-card{background:#0d1b2a;}
html[data-theme="dark"] .sf-card-title{color:#e8f1f8;}
html[data-theme="dark"] .sf-card-sub{color:#8fa9bd;}
html[data-theme="dark"] .sf-card.open .sf-card-head{border-bottom-color:#1e3a52;}
html[data-theme="dark"] .sf-card-body{background:#0d1b2a;}
html[data-theme="dark"] .sf-card-body .sf-tabs{background:#0d1b2a;}
html[data-theme="dark"] .sf-card-body .sf-tab{color:#8fa9bd;}
html[data-theme="dark"] .sf-card-body .sf-tab.active{color:#4da3ff;border-bottom-color:#4da3ff;}
html[data-theme="dark"] .sf-card-body .sf-tab-body{background:#0d1b2a;}
html[data-theme="dark"] .sf-card-body .sf-k{color:#8fa9bd;}
html[data-theme="dark"] .sf-card-body .sf-v{color:#e8f1f8;}
html[data-theme="dark"] .sf-card-body .sf-row{border-bottom-color:#1e3a52;}
html[data-theme="dark"] .sf-card-body .sf-subhead{color:#d7e6f2;}
html[data-theme="dark"] .sf-card-body .sf-empty-sub{color:#8fa9bd;}
html[data-theme="dark"] .sf-card-body .sf-port{border-bottom-color:#1e3a52;}
html[data-theme="dark"] .sf-card-body .sf-port-name{color:#e8f1f8;}
html[data-theme="dark"] .sf-card-body .sf-port-d{color:#8fa9bd;}

/* r286: detail page + goal progress sheet + goal-icon ripple */
.sf-detail-top{margin:2px 0 10px;}
.sf-back-link{display:inline-flex;align-items:center;gap:2px;background:none;border:none;color:#0066cc;font-size:15px;font-weight:600;padding:6px 4px;cursor:pointer;}
.sf-goal-row{padding:12px 0;border-bottom:1px solid #f0f0f0;}
.sf-goal-row:last-child{border-bottom:none;}
.sf-goal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.sf-goal-name{font-size:15px;font-weight:600;color:#1a1a1a;}
.sf-goal-pct{font-size:14px;font-weight:700;color:#0B8B6A;}
.sf-goal-bar{height:10px;background:#eef1f4;border-radius:5px;overflow:hidden;}
.sf-goal-bar>div{height:100%;background:#0B8B6A;border-radius:5px;}
.sf-goal-amounts{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#888;}
.sf-goal-total{margin-top:14px;padding-top:12px;border-top:1px solid #eee;}
.sf-goals-btn{overflow:hidden;}
.sf-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:sf-ripple .55s ease-out;pointer-events:none;}
@keyframes sf-ripple{to{transform:scale(2.8);opacity:0;}}
html[data-theme="dark"] .sf-back-link{color:#4da3ff;}
html[data-theme="dark"] .sf-goal-name{color:#e8f1f8;}
html[data-theme="dark"] .sf-goal-row{border-bottom-color:#1e3a52;}
html[data-theme="dark"] .sf-goal-bar{background:#1e3a52;}
html[data-theme="dark"] .sf-goal-amounts{color:#8fa9bd;}
html[data-theme="dark"] .sf-goal-total{border-top-color:#1e3a52;}

/* r287: compact contracts list */
.sf-list .sf-card{border-radius:12px;margin-bottom:10px;}
.sf-card-sub{color:#8A8A8A;}
.sf-list .sf-card-chev{color:#8A8A8A;}
.sf-card.open .sf-card-chev.sf-chev-up{transform:none;}
/* r287: teal per spec */
.sf-mid-completed{background:#0E8A6E;}
/* r287: 3D flip for goal progress — middle section only, header + bottom stay */
.sf-flip{perspective:1200px;position:relative;}
.sf-flip-inner{position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .6s ease-in-out;}
.sf-flip-inner.flipped{transform:rotateY(180deg);}
.sf-flip-front{backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.sf-flip-back{position:absolute;top:0;left:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);overflow-y:auto;}
.sf-flip-back-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sf-flip-back-head span{font-weight:700;font-size:15px;color:#1a1a1a;}
.sf-flip-close{width:28px;height:28px;padding:0;border:none;border-radius:50%;background:#f0f2f5;color:#555;cursor:pointer;display:flex;align-items:center;justify-content:center;}
html[data-theme="dark"] .sf-flip-back{background:#0d1b2a;}
html[data-theme="dark"] .sf-flip-back-head span{color:#e8f1f8;}
html[data-theme="dark"] .sf-flip-close{background:#1e3a52;color:#d7e6f2;}

/* r288: compact 68px list items */
.sf-list .sf-card{border-radius:12px;margin-bottom:8px;}
.sf-list .sf-card-head{height:68px;padding:12px 16px;box-sizing:border-box;}
.sf-list .sf-card-title{font-size:14px;}
.sf-list .sf-card-sub{font-size:11px;color:#8A8A8A;margin-top:2px;}
.sf-list .sf-card-chev{width:14px;height:14px;color:#9CA3AF;flex:none;}
html[data-theme="dark"] .sf-list .sf-card-sub{color:#8fa9bd;}
html[data-theme="dark"] .sf-list .sf-card-chev{color:#8fa9bd;}
/* r288: detail page scrollable with iOS momentum */
.sf-detail-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:calc(24px + env(safe-area-inset-bottom));}

/* r289 BUGFIX 1: legacy .sf-card rule (line 9) set padding:18px which the r285
   rule never reset -> cards rendered 68px head + 36px padding = ~104px+.
   Kill it so list items are exactly 68px and the detail card stays flat. */
.sf-card{padding:0 !important;}
.sf-list .sf-card-head{height:68px !important;min-height:68px;max-height:68px;padding:12px 16px;box-sizing:border-box;}
/* r289 BUGFIX 2: goal icon was obscured by div.sf-cm-ship inside the 3D flip
   context, so taps never reached the button. Front face becomes the positioning
   context, button sits above everything, ship label lets taps pass through. */
.sf-flip-front{position:relative;}
.sf-card-mid .sf-goals-btn{z-index:10;pointer-events:auto;}
.sf-cm-ship{pointer-events:none;}

/* r290: expanded accordion card keeps the 16px outer radius (collapsed list
   rows stay 12px). Flat stacked sections, no inner rounded corners. */
.sf-list .sf-card.open{border-radius:16px;}

/* r291: dashboard uses exact my-contracts-final.html inline structure.
   Flip mechanics, 68px rows, and r289 tap fixes below are untouched. */
.sf-flip-front{color:#fff;}
.sf-flip-back{color:#fff;}
/* legacy mid-state classes no longer used for backgrounds (inline gradients),
   kept harmlessly in case of stale markup */