:root{
    --bg:#f3f5f7;--card:#fff;--ink:#1b2630;--muted:#65727f;--line:#d9e0e6;
    --accent:#176b4d;--accent2:#0f5138;--warn:#9a5b00;--bad:#a12c2c;--good:#16704a;
    --shadow:0 8px 24px rgba(20,35,50,.08)
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
  header{background:linear-gradient(135deg,#0f5138,#1f7a58);color:#fff;padding:22px 18px}
  header .wrap{max-width:1220px;margin:auto}
  h1{margin:0 0 6px;font-size:clamp(24px,3vw,38px)}
  header p{margin:0;opacity:.9}
  main{max-width:1220px;margin:22px auto;padding:0 14px 40px}
  .notice{background:#fff8e7;border:1px solid #f0cf84;border-left:5px solid #d89400;padding:12px 14px;border-radius:10px;margin-bottom:16px}
  .grid{display:grid;gap:16px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media(max-width:820px){.grid.two,.grid.three{grid-template-columns:1fr}}
  section{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
  section h2{font-size:20px;margin:0 0 14px}
  section h3{font-size:16px;margin:14px 0 8px}
  label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
  input,select,textarea,button{font:inherit}
  input,select,textarea{width:100%;border:1px solid #bfc9d1;border-radius:8px;padding:9px 10px;background:#fff;color:var(--ink)}
  textarea{min-height:92px;resize:vertical}
  input:focus,select:focus,textarea:focus{outline:3px solid rgba(23,107,77,.14);border-color:var(--accent)}
  .field{margin-bottom:12px}
  .hint{font-size:12px;color:var(--muted);margin-top:5px}
  .modes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .mode-btn,.secondary,.danger,.primary{border:0;border-radius:9px;padding:10px 13px;cursor:pointer;font-weight:750}
  .mode-btn{background:#edf1f4;color:#24313b}
  .mode-btn.active{background:var(--accent);color:#fff}
  .primary{background:var(--accent);color:#fff}
  .primary:hover{background:var(--accent2)}
  .secondary{background:#e8edf1;color:#26343f}
  .danger{background:#f7e8e8;color:var(--bad)}
  button:disabled{opacity:.45;cursor:not-allowed}
  .hidden{display:none!important}
  .handbox{border:1px solid var(--line);border-radius:11px;padding:12px;background:#fbfcfd}
  .handbox strong{display:block;margin-bottom:8px}
  .handline{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.75;word-break:break-word}
  .red{color:#c62020}.black{color:#161d24}
  .deck{display:grid;grid-template-columns:repeat(13,minmax(34px,1fr));gap:5px;margin-top:12px}
  @media(max-width:760px){.deck{grid-template-columns:repeat(7,minmax(38px,1fr))}}
  .card-btn{border:1px solid #c8d0d7;border-radius:7px;background:#fff;padding:8px 2px;cursor:pointer;font-weight:800}
  .card-btn:hover{transform:translateY(-1px)}
  .card-btn.declarer{background:#dff3e9;border-color:#64af8d}
  .card-btn.dummy{background:#e5edff;border-color:#7897da}
  .active-hand{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
  .pill{display:inline-block;border-radius:99px;padding:5px 9px;font-size:12px;font-weight:800;background:#edf1f4}
  .pill.good{background:#dff4e8;color:#0f633e}.pill.bad{background:#f7dfdf;color:#8c2222}.pill.warn{background:#fff0ce;color:#8a5600}
  .errors{margin-top:10px;padding:10px;border-radius:8px;background:#fff2f2;border:1px solid #e6b8b8;color:#7a2222}
  .errors ul{margin:5px 0 0;padding-left:18px}
  table{width:100%;border-collapse:collapse}
  th,td{border-bottom:1px solid var(--line);padding:8px;vertical-align:top;text-align:left}
  th{font-size:12px;color:#4d5b67;background:#f7f9fa}
  .auction-scroll{overflow-x:auto}
  .compact input,.compact select{padding:7px 8px;min-width:84px}
  .meaning{display:grid;grid-template-columns:110px 100px 100px 170px 1fr;gap:8px;align-items:end;margin-top:8px;padding:10px;background:#f6f8fa;border-radius:8px}
  @media(max-width:900px){.meaning{grid-template-columns:1fr 1fr}.meaning .wide{grid-column:1/-1}}
  .progress{height:12px;border-radius:99px;background:#e8edf1;overflow:hidden}
  .progress>div{height:100%;background:linear-gradient(90deg,#d49a00,#1c8c60);width:0}
  .result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  @media(max-width:760px){.result-grid{grid-template-columns:1fr}}
  .metric{border:1px solid var(--line);border-radius:11px;padding:14px;background:#fbfcfd}
  .metric .value{font-size:30px;font-weight:850;margin-top:5px}
  .barrow{display:grid;grid-template-columns:60px 1fr 70px;gap:8px;align-items:center;margin:7px 0}
  .bar{height:12px;background:#e8edf1;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:#2f7a5d}
  .footer-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  details{border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fafbfc;margin-top:9px}
  summary{cursor:pointer;font-weight:800}
  .small{font-size:12px;color:var(--muted)}
  .checkboxline{display:flex;gap:9px;align-items:center}.checkboxline input{width:auto}

  .opponent-card{border:1px solid var(--line);border-radius:11px;padding:14px;background:#fbfcfd}
  .opponent-card h3{margin-top:0}
  .auction-diagram th,.auction-diagram td{text-align:center;min-width:120px}
  .auction-diagram td{height:48px;font-weight:850;font-size:17px}
  .auction-diagram .empty{background:#fafbfc;color:#a5afb8}
  .call-grid{display:grid;grid-template-columns:repeat(8,minmax(64px,1fr));gap:7px;margin-top:12px}
  @media(max-width:860px){.call-grid{grid-template-columns:repeat(5,minmax(58px,1fr))}}
  @media(max-width:520px){.call-grid{grid-template-columns:repeat(3,minmax(70px,1fr))}}
  .call-tile{border:1px solid #bdc8d1;background:#fff;border-radius:9px;padding:10px 5px;font-weight:850;cursor:pointer}
  .call-tile:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
  .call-tile:disabled{background:#eef1f3;color:#a0a9b1;border-color:#dce2e6;opacity:.72;cursor:not-allowed}
  .call-tile.pass{background:#edf4f0}.call-tile.double{background:#fff3d9}.call-tile.redouble{background:#f7e7e7}
  .call-tile .red{font-weight:900}
  .meaning-card{border:1px solid var(--line);border-radius:10px;padding:12px;background:#f7f9fa;margin-top:10px}
  .meaning-card h4{margin:0 0 10px}
  .meaning-fields{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr));gap:8px;align-items:end}
  @media(max-width:900px){.meaning-fields{grid-template-columns:1fr 1fr}.meaning-fields .wide{grid-column:1/-1}}
  .chance-current{background:#eef8f3;font-weight:800}
.dds-status{margin:14px 0 10px;padding:10px 12px;border-radius:9px;border:1px solid var(--line);font-weight:650}
.dds-status.good{background:#edf8f2;color:var(--good);border-color:#b9dec9}
.dds-status.warn{background:#fff8e8;color:var(--warn);border-color:#ead4a1}
.dds-status.bad{background:#fff0f0;color:var(--bad);border-color:#e3b6b6}
.analysis-progress{margin:12px 0}.analysis-progress-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:.92rem;color:var(--muted)}
#analysisProgressBar{width:0}.app-footer{margin:18px 0 8px;padding:12px 4px;color:var(--muted);font-size:.82rem;text-align:center}
.card-result{font-size:1.12rem;font-weight:800}.solver-note{margin-top:8px}


.retry-dds{margin:8px 0 12px}.dds-error-details{margin-top:8px;padding:10px 12px;border:1px solid #efb0b0;background:#fff5f5;border-radius:8px;white-space:pre-wrap;overflow-wrap:anywhere}
.sevenba-back-link {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 10000;
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 14px;
  color: #4a2f24;
  font-weight: 700;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(111, 78, 55, .25);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}
.sevenba-back-link:hover,
.sevenba-back-link:focus-visible {
  color: #fff;
  background: #6f4e37;
}
.sevenba-back-link:focus-visible {
  outline: 3px solid rgba(212, 126, 48, .55);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .sevenba-back-link {
    top: auto;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
}