.mcol-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

:root{
  --bg:#0b0f14;
  --card:#111826;
  --card2:#0f1623;
  --text:#e7eef8;
  --muted:#b8c4d6;
  --border:rgba(231,238,248,.14);
  --accent:#63d6a6;
  --warn:#ffcc66;
  --danger:#ff6b6b;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 16px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 15% 0%, rgba(99,214,166,.18), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(99,214,166,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.45;
}

a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 18px 54px;
}

header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom: 18px;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.brand .site{
  font-weight: 700;
  letter-spacing:.2px;
  font-size: 0.98rem;
  color: var(--muted);
  text-transform: uppercase;
}

.brand h1{
  margin:0;
  font-size: 1.7rem;
  letter-spacing:.2px;
}

.brand p{
  margin:0;
  color: var(--muted);
  max-width: 70ch;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
}

@media (min-width: 880px){
  .grid{
    grid-template-columns: 1.05fr .95fr;
  }
}

.panel{
  padding: 18px 18px 16px;
}

.panel + .panel{
  border-top: 1px solid var(--border);
}

@media (min-width: 880px){
  .panel + .panel{
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}

.sectionTitle{
  margin:0 0 10px;
  font-size: 1.05rem;
  letter-spacing:.2px;
}

label{
  display:block;
  font-weight: 650;
  margin: 10px 0 6px;
  color: var(--text);
}

input, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(231,238,248,.22);
  background: rgba(17,24,38,.55);
  color: var(--text);
  outline: none;
}

input:focus, select:focus{
  border-color: rgba(99,214,166,.7);
  box-shadow: 0 0 0 4px rgba(99,214,166,.12);
}

.row{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  align-items:flex-end;
}

.row > div{ flex: 1 1 220px; }
.row .btnWrap{ flex: 0 0 auto; }

button{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(99,214,166,.55);
  background: rgba(99,214,166,.10);
  color: var(--text);
  cursor:pointer;
  font-weight: 650;
}

button:hover{ background: rgba(99,214,166,.16); }
button:disabled{ opacity:.55; cursor:not-allowed; }

.note{
  margin-top: 10px;
  color: var(--muted);
  font-size: .95rem;
}

.err{
  display:none;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,107,107,.45);
  background: rgba(255,107,107,.08);
  color: var(--text);
  font-weight: 650;
}

.results{
  display:none;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(231,238,248,.18);
  background: rgba(17,24,38,.40);
}

.results .item{
  padding: 10px 0;
  border-bottom: 1px solid rgba(231,238,248,.12);
}

.results .item:last-child{ border-bottom:0; }

.k{
  color: var(--muted);
  font-weight: 650;
  margin:0 0 4px;
}

.v{
  margin:0;
  font-size: 1.03rem;
  letter-spacing:.15px;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .95rem;
  color: rgba(231,238,248,.92);
}

.rules{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  font-size: .95rem;
}

.rules li{ margin: 6px 0; }

.disclaimer{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,204,102,.30);
  background: rgba(255,204,102,.08);
  color: var(--text);
}

.disclaimer strong{ color: var(--warn); }

footer{
  margin-top: 14px;
  color: var(--muted);
  font-size: .92rem;
}

/* Dropdown date input layout */

#issueDateSafariWrap .safari-date-grid{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:nowrap;
}

#issueDateSafariWrap .safari-date-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 auto;
}

#issueDateSafariWrap select{
  width:auto;
  min-width:0;
  padding: 12px 12px;
}

#issueDateSafariWrap .safari-date-label{
  font-size:14px;
  opacity:0.85;
}