.sdk-wrap{max-width:820px;padding:14px;border:1px solid #ddd;border-radius:14px}
.sdk-header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.sdk-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sdk-controls label{font-size:13px;display:flex;gap:8px;align-items:center}
.sdk-controls select{padding:8px 10px;border:1px solid #ccc;border-radius:10px;background:#fff}

/* Buttons: blue bg + white text */
.sdk-wrap .sdk-controls button{
  padding:8px 12px;border-radius:10px;border:1px solid #0b4f8a;
  background:#0b4f8a;color:#fff;cursor:pointer;
}
.sdk-wrap .sdk-controls button:hover{filter:brightness(1.06)}
.sdk-wrap .sdk-controls button:active{filter:brightness(0.98)}
.sdk-note[aria-pressed="true"]{outline:2px solid rgba(0,0,0,.2);outline-offset:2px}

.sdk-timer{font-variant-numeric:tabular-nums;font-weight:700;border:1px solid #eee;border-radius:12px;padding:8px 12px;background:#fafafa}
.sdk-status{min-height:26px;margin:10px 0 12px;font-size:14px}

/* GRID */
.sdk-grid{
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  gap:0;
  max-width:560px;
  border-radius:12px;
  overflow:hidden;
  border:3px solid #9c9c9c;
  background:#fff;
}
.sdk-cell-wrap{
  position:relative;
  border:1px solid #e1e1e1;
  aspect-ratio:1/1;
  background:#fff;
}
.sdk-cell-wrap.b-left{border-left-width:3px;border-left-color:#9c9c9c}
.sdk-cell-wrap.b-right{border-right-width:3px;border-right-color:#9c9c9c}
.sdk-cell-wrap.b-top{border-top-width:3px;border-top-color:#9c9c9c}
.sdk-cell-wrap.b-bottom{border-bottom-width:3px;border-bottom-color:#9c9c9c}

.sdk-cell{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; outline:none;
  text-align:center;
  font-size:20px;
  background:transparent;
  z-index:2;
}
.sdk-cell:focus{outline:2px solid rgba(0,0,0,.18);outline-offset:-2px}

.sdk-cell.is-fixed{font-weight:700}
.sdk-cell.is-hint{font-weight:700}
.sdk-cell-wrap.is-bad{background:#ffe5e5}
.sdk-cell-wrap.is-ok{background:#f1fff1}

.sdk-notes{
  position:absolute; inset:0;
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding:4px;
  font-size:10px;
  line-height:12px;
  letter-spacing:1px;
  opacity:.75;
  z-index:1;
  pointer-events:none;
  white-space:normal;
}
.sdk-notes.has-notes{opacity:.9}

.sdk-footer{margin-top:14px}
.sdk-top-wrap h4{margin:10px 0 8px;font-size:16px}
.sdk-top{margin:0;padding-left:18px}
.sdk-top li{margin:4px 0}
.sdk-mine{font-size:13px;opacity:.95}
/* === Robust conflict highlight overlay (survives theme overrides) === */
.sdk-cell-wrap{position:relative}
.sdk-cell-wrap.is-bad{
  border-color:#d62828 !important;
  box-shadow: inset 0 0 0 2px rgba(214,40,40,.55) !important;
}
.sdk-cell-wrap.is-bad::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(214,40,40,.18) !important;
  pointer-events:none;
}
.sdk-cell-wrap.is-ok{
  border-color:#2a9d8f !important;
  box-shadow: inset 0 0 0 2px rgba(42,157,143,.35) !important;
}
.sdk-cell-wrap.is-ok::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(42,157,143,.12) !important;
  pointer-events:none;
}
/* keep fixed/hint readable above overlay */
.sdk-cell{position:absolute; inset:0; z-index:3}
.sdk-notes{z-index:2}