/* =========================================================
   Khmer Lottery PRO V5 — Clean UI
   Final visual override only. OCR/conversion logic untouched.
   ========================================================= */

:root{
  --clean-bg:#f5f7fb;
  --clean-card:#ffffff;
  --clean-text:#172033;
  --clean-muted:#667085;
  --clean-border:#e3e8f1;
  --clean-primary:#4f46e5;
  --clean-primary-hover:#4338ca;
  --clean-soft:#eef2ff;
  --clean-radius:16px;
  --clean-shadow:0 8px 26px rgba(26,38,68,.07);
}

html,body{background:var(--clean-bg)!important}
body{font-family:Arial,"Noto Sans Khmer",sans-serif!important;color:var(--clean-text)!important}
.app{max-width:1360px!important;padding:18px!important}

/* Header */
.app>header{
  padding:20px 22px!important;
  margin:0 0 14px!important;
  border:1px solid var(--clean-border)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--clean-shadow)!important;
}
.app>header:after{display:none!important}
.app>header h1{
  margin:0!important;
  font-size:clamp(22px,2.4vw,31px)!important;
  line-height:1.3!important;
  color:#111827!important;
}
.app>header p{
  margin:6px 0 0!important;
  color:var(--clean-muted)!important;
  font-size:13px!important;
}

/* Main controls: predictable two-row desktop layout */
.toolbar{
  display:grid!important;
  grid-template-columns:170px minmax(270px,1fr) 145px 145px minmax(330px,auto)!important;
  grid-template-areas:
    "upload paste day time date"
    "scan reset status status status"!important;
  gap:10px!important;
  padding:14px!important;
  margin:0 0 10px!important;
  align-items:center!important;
  border:1px solid var(--clean-border)!important;
  border-radius:var(--clean-radius)!important;
  background:#fff!important;
  box-shadow:var(--clean-shadow)!important;
}
.toolbar .upload-btn{grid-area:upload}
#pasteZone{grid-area:paste}
#daySelect{grid-area:day}
#timeSelect{grid-area:time}
.date-control{grid-area:date}
#scanBtn{grid-area:scan}
#resetBtn{grid-area:reset}
#status{grid-area:status}

.toolbar .upload-btn,
.toolbar button,
.toolbar select,
.date-control input{
  min-height:42px!important;
  border-radius:10px!important;
}
.upload-btn,#scanBtn{
  background:var(--clean-primary)!important;
  color:#fff!important;
  border:1px solid var(--clean-primary)!important;
  box-shadow:none!important;
}
.upload-btn:hover,#scanBtn:not(:disabled):hover{background:var(--clean-primary-hover)!important}
#resetBtn,.light{
  background:#fff!important;
  color:#344054!important;
  border:1px solid #d8dee9!important;
}
.mode-select{
  width:100%!important;
  min-width:0!important;
  padding:0 34px 0 12px!important;
}
.paste-zone{
  min-width:0!important;
  min-height:58px!important;
  padding:8px 14px!important;
  border:1.5px dashed #c7cfdd!important;
  border-radius:12px!important;
  background:#fafbfe!important;
}
.paste-zone b{font-size:13px!important}
.paste-zone small{font-size:11px!important;color:#7b8495!important}
.date-control{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(150px,1fr) auto!important;
  gap:7px!important;
  align-items:end!important;
}
.date-control label{
  grid-column:1/-1!important;
  font-size:10px!important;
  letter-spacing:.35px!important;
  color:#7b8495!important;
}
.date-control input{
  width:100%!important;
  border:1px solid #d8dee9!important;
  background:#fff!important;
}
#todayCambodiaBtn{white-space:nowrap!important}
#status{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 13px!important;
  border:1px solid #e6eaf0!important;
  border-radius:10px!important;
  background:#f8fafc!important;
  color:#475467!important;
  font-size:12px!important;
  font-weight:700!important;
}

/* Primary quick actions */
.v4-quickbar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:10px!important;
  align-items:center!important;
  padding:10px!important;
  margin:0 0 10px!important;
  border:1px solid var(--clean-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 4px 16px rgba(26,38,68,.045)!important;
}
.v4-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  justify-content:flex-start!important;
}
.v4-actions button,.v4-import{
  min-height:36px!important;
  padding:7px 11px!important;
  border-radius:9px!important;
  font-size:12px!important;
  font-weight:700!important;
  background:#fff!important;
  color:#344054!important;
  border:1px solid #dce2eb!important;
  box-shadow:none!important;
}
.v4-actions .v5-main{
  background:var(--clean-soft)!important;
  color:#3730a3!important;
  border-color:#c7d2fe!important;
}
.v4-actions button:hover,.v4-import:hover{
  background:#f8fafc!important;
  border-color:#c5cedb!important;
  transform:none!important;
}
.v4-quality{
  min-width:145px!important;
  padding:8px 10px!important;
  border-radius:9px!important;
  font-size:11px!important;
  text-align:center!important;
  background:#f8fafc!important;
  border:1px solid #e7ebf1!important;
  color:#667085!important;
}

/* Advanced tools are tucked behind the Tools button.
   Existing #v4More already toggles body.v4-show-tools. */
.pro-toolbar{
  display:none!important;
  padding:10px!important;
  margin:0 0 10px!important;
  border:1px solid var(--clean-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 4px 16px rgba(26,38,68,.045)!important;
}
body.v4-show-tools .pro-toolbar{display:block!important}
.pro-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:7px!important;
}
.pro-actions button{
  width:auto!important;
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:8px!important;
  font-size:11px!important;
  background:#fff!important;
  color:#475467!important;
  border:1px solid #dfe4eb!important;
}
.zoom-text{
  min-width:48px!important;
  padding:7px 4px!important;
  font-size:12px!important;
}

/* Workspace */
.layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.panel{
  padding:15px!important;
  border:1px solid var(--clean-border)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:var(--clean-shadow)!important;
}
.panel>h2,.result-head h2{
  font-size:16px!important;
  color:#202939!important;
}
.result-head{
  min-height:42px!important;
  padding:0 0 10px!important;
  margin:0 0 12px!important;
  border-bottom:1px solid #edf0f4!important;
}
.preview-box{
  height:390px!important;
  margin-top:12px!important;
  border:1.5px dashed #ccd3df!important;
  border-radius:13px!important;
  background:#f9fafc!important;
}
.ticket,.night-exact-card,.time130-card,.compact-result-card,.only430-card,.manual-result-preview{
  box-shadow:0 8px 22px rgba(17,24,39,.10)!important;
}

/* Inputs/editors */
.num-input,
.editor-grid input,
.editor-grid-3 input,
.editor-grid-4 input,
.night-input-grid input,
.night-list-inputs input,
.t130-editor-grid input{
  border:1px solid #d8dee9!important;
  border-radius:9px!important;
  background:#fff!important;
}
.abcdh-editor,.night-fields,.time130-editor,.sat-info,.v4-missing-times{
  border:1px solid #e5e9f0!important;
  border-radius:12px!important;
  background:#fafbfc!important;
}

/* Cleaner modals */
.pro-modal{background:rgba(15,23,42,.42)!important;backdrop-filter:blur(3px)!important}
.pro-modal-card{
  border-radius:17px!important;
  border:1px solid #e5e9f0!important;
  box-shadow:0 22px 60px rgba(15,23,42,.22)!important;
}
.pro-modal-head{border-bottom:1px solid #edf0f4!important}

/* Phone/tablet */
@media(max-width:1080px){
  .toolbar{
    grid-template-columns:150px 1fr 1fr!important;
    grid-template-areas:
      "upload paste paste"
      "day time date"
      "scan reset status"!important;
  }
  .date-control{grid-template-columns:1fr auto!important}
  .layout{grid-template-columns:1fr!important}
  .preview-box{height:340px!important}
}

@media(max-width:720px){
  .app{padding:8px!important}
  .app>header{padding:15px!important;border-radius:14px!important}
  .toolbar{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:
      "upload upload"
      "paste paste"
      "day time"
      "date date"
      "scan reset"
      "status status"!important;
    padding:10px!important;
  }
  .date-control{grid-template-columns:1fr auto!important}
  .v4-quickbar{grid-template-columns:1fr!important}
  .v4-quality{text-align:left!important;min-width:0!important}
  .v4-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .v4-actions button,.v4-import{width:100%!important;justify-content:center!important;text-align:center!important}
  .pro-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .pro-actions button{width:100%!important}
  .preview-box{height:290px!important}
  .panel{padding:11px!important;border-radius:14px!important}
}

@media(max-width:420px){
  .toolbar{
    grid-template-columns:1fr!important;
    grid-template-areas:
      "upload"
      "paste"
      "day"
      "time"
      "date"
      "scan"
      "reset"
      "status"!important;
  }
  .date-control{grid-template-columns:1fr!important}
  .date-control label,.date-control input,#todayCambodiaBtn{grid-column:1!important;width:100%!important}
  .v4-actions,.pro-actions{grid-template-columns:1fr 1fr!important}
  .preview-box{height:250px!important}
}