/* ===== Khmer Lottery PRO V5 — Modern UI ===== */
:root{
  --ui-bg:#f5f7fb;--ui-card:#ffffff;--ui-text:#172033;--ui-muted:#667085;
  --ui-border:#e4e8f0;--ui-primary:#4f46e5;--ui-primary-dark:#4338ca;
  --ui-soft:#eef2ff;--ui-success:#15803d;--ui-warn:#b45309;
  --ui-radius:18px;--ui-shadow:0 10px 30px rgba(25,35,58,.08);
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#f8faff 0,#f5f7fb 260px,#f5f7fb 100%);color:var(--ui-text)}
.app{max-width:1380px;padding:24px}

/* Header */
.app>header{position:relative;overflow:hidden;padding:24px 26px;margin-bottom:18px;border:1px solid #dfe4f3;border-radius:22px;background:linear-gradient(135deg,#ffffff 0%,#f2f4ff 100%);box-shadow:var(--ui-shadow)}
.app>header:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-55px;top:-95px;background:rgba(79,70,229,.10)}
.app>header h1{position:relative;z-index:1;font-size:clamp(22px,3vw,34px);line-height:1.25;letter-spacing:-.3px;color:#172033}
.app>header p{position:relative;z-index:1;margin-top:8px!important;margin-bottom:0!important;font-size:14px;color:var(--ui-muted)}
.v4-title-badge{background:var(--ui-primary)!important;padding:6px 9px!important;box-shadow:0 4px 12px rgba(79,70,229,.22)}

/* Main control toolbar */
.toolbar{display:grid!important;grid-template-columns:auto minmax(250px,1fr) 170px 170px minmax(300px,auto);gap:10px!important;align-items:center!important;padding:14px!important;margin-bottom:14px!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius)!important;background:rgba(255,255,255,.94)!important;box-shadow:var(--ui-shadow)!important;backdrop-filter:blur(10px)}
.toolbar .upload-btn,.toolbar button{min-height:42px}
.upload-btn,#scanBtn{background:var(--ui-primary)!important;color:#fff!important;box-shadow:0 6px 14px rgba(79,70,229,.18)}
.upload-btn:hover,#scanBtn:hover{background:var(--ui-primary-dark)!important;transform:translateY(-1px)}
.paste-zone{min-width:0!important;min-height:58px;display:flex;flex-direction:column;justify-content:center;border:1.5px dashed #aeb7c8!important;background:#fafbff;border-radius:13px!important;transition:.18s}
.paste-zone:hover,.paste-zone:focus{border-color:var(--ui-primary)!important;background:var(--ui-soft);box-shadow:0 0 0 3px rgba(79,70,229,.08)}
.mode-select{min-width:0!important;width:100%;min-height:42px}
.date-control{display:grid!important;grid-template-columns:1fr auto;gap:6px!important;align-items:end;min-width:300px}
.date-control label{grid-column:1/-1;color:var(--ui-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}
.date-control input{height:42px;border:1px solid #d7dce6;border-radius:10px;padding:0 10px;background:#fff}
#todayCambodiaBtn{height:42px;margin:0!important}
#resetBtn{background:#fff!important}
#status{grid-column:1/-1;display:flex;align-items:center;min-height:34px;padding:8px 11px;border-radius:10px;background:#f7f8fc;color:#475467;font-size:12px;font-weight:800;border:1px solid #eceff5}

/* Quick bar */
.v4-quickbar{grid-template-columns:170px 1fr auto!important;padding:12px 14px!important;border-radius:var(--ui-radius)!important;border-color:var(--ui-border)!important;box-shadow:0 7px 22px rgba(25,35,58,.055)!important;margin:0 0 14px!important}
.v4-brand b{font-size:16px!important;color:#202939}.v4-brand span{margin-top:3px}.v4-actions{justify-content:flex-start!important}
.v4-actions button,.v4-import{min-height:38px;border:1px solid #dde2eb!important;background:#fff!important;color:#344054!important;border-radius:10px!important}
.v4-actions button:hover,.v4-import:hover{border-color:#bfc7d7!important;background:#f8f9fc!important;transform:translateY(-1px)}
.v4-actions .v5-main{background:var(--ui-soft)!important;color:#3730a3!important;border-color:#c7d2fe!important}
.v4-quality,.v5-draft-badge{border:1px solid #e4e7ec!important;border-radius:10px!important}

/* Advanced toolbar */
.pro-toolbar{padding:10px!important;margin-bottom:14px;border:1px solid var(--ui-border);border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(25,35,58,.04)}
.pro-actions{gap:7px!important}.pro-actions button{min-height:36px!important;padding:8px 10px!important;font-size:12px!important;border:1px solid #e0e4ec!important;border-radius:9px!important;background:#fff!important;color:#344054!important}
.pro-actions button:hover{background:#f8f9fc!important;border-color:#c4cad6!important}
.zoom-text{min-width:52px;text-align:center;padding:8px 4px;font-weight:900;color:#475467}

/* Main workspace */
.layout{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;gap:18px!important;align-items:start!important}
.panel{border:1px solid var(--ui-border)!important;border-radius:20px!important;padding:18px!important;background:var(--ui-card)!important;box-shadow:var(--ui-shadow)!important}
.panel>h2,.result-head h2{margin:0!important;font-size:17px!important;color:#202939;letter-spacing:-.1px}
.result-head{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #eef0f4}
.result-head button{min-height:36px;background:#fff!important;color:#344054!important;border:1px solid #dfe3ea!important}
.preview-box{height:430px!important;margin-top:14px;border:1.5px dashed #c8cfdb!important;border-radius:16px!important;background:linear-gradient(135deg,#fbfcfe,#f6f8fc)!important}
.preview-box:empty:after{content:"រូបភាពនឹងបង្ហាញនៅទីនេះ";color:#98a2b3;font-size:13px}
.preview-box img{border-radius:10px}
.progress{padding:8px 0}.track{height:7px!important;background:#eef0f5!important}.track div{background:var(--ui-primary)!important}

/* Editors */
.abcdh-editor,.night-fields,.field-group{border-color:#edf0f5!important}
.abcdh-editor{margin-top:12px;padding:14px!important;border:1px solid #e7eaf0!important;border-radius:14px;background:#fafbfc}
.editor-title{font-size:14px!important;color:#344054}
.editor-grid{gap:9px!important}
.editor-grid label,.night-fields label{color:#667085!important;font-size:11px!important}
.num-input,.abcdh-editor input,.night-fields input{min-height:40px;border:1px solid #d9dee8!important;border-radius:10px!important;background:#fff!important;transition:.15s}
.num-input:focus,.abcdh-editor input:focus,.night-fields input:focus{outline:none;border-color:#818cf8!important;box-shadow:0 0 0 3px rgba(99,102,241,.11)}
.full,#applyABCDH,#applyEveningABCD,#apply430{min-height:42px;background:var(--ui-primary)!important;border-radius:11px!important}
.sat-info,.v4-missing-times{border-radius:12px!important;border-color:#e8ebf1!important;background:#fafbfc!important;color:#475467}

/* Result card stage */
.layout>.panel:nth-child(2){background:linear-gradient(180deg,#fff,#fbfcff)!important}
.layout>.panel:nth-child(2)>:not(.result-head){position:relative}
.ticket,.night-exact-card,.time130-card,.compact-result-card,.only430-card{box-shadow:0 13px 34px rgba(17,24,39,.14);border-color:#263043!important}
.v5-editable-result:hover{box-shadow:inset 0 0 0 1px #818cf8!important;background:#eef2ff!important}
.v5-editable-result:focus{box-shadow:inset 0 0 0 2px #6366f1!important;background:#eef2ff!important}

/* Dashboard / modals */
.pro-modal{background:rgba(15,23,42,.48)!important;backdrop-filter:blur(5px)}
.pro-modal-card{border:1px solid rgba(255,255,255,.5)!important;border-radius:20px!important;box-shadow:0 24px 70px rgba(15,23,42,.28)!important}
.pro-modal-head{padding-bottom:12px;border-bottom:1px solid #eef0f4}.pro-modal-head h3{margin:0;color:#202939}
.v5-control-item{border-radius:13px!important;box-shadow:0 4px 12px rgba(25,35,58,.04)}
.v5-control-item:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(25,35,58,.09)}
.v5-control-item.done{background:#f0fdf4!important}.v5-control-item.missing{background:#fffaf3!important}

/* Common controls */
button,.upload-btn,select,.v4-import{transition:transform .15s,box-shadow .15s,background .15s,border-color .15s}
button:active,.upload-btn:active,.v4-import:active{transform:translateY(0)!important}
select{border:1px solid #d9dee8!important;background-color:#fff!important;color:#344054!important}
button.light{background:#fff;color:#344054;border:1px solid #dfe3ea}

/* Dark mode */
body.pro-dark{--ui-bg:#0f172a;--ui-card:#151e2f;--ui-text:#f1f5f9;--ui-muted:#94a3b8;--ui-border:#2b374b;background:linear-gradient(180deg,#0b1220,#101827 260px,#101827)}
body.pro-dark .app>header{background:linear-gradient(135deg,#151e2f,#17213c);border-color:#2b374b}body.pro-dark .app>header h1,body.pro-dark .panel>h2,body.pro-dark .result-head h2,body.pro-dark .v4-brand b{color:#f1f5f9!important}
body.pro-dark .toolbar,body.pro-dark .panel,body.pro-dark .pro-toolbar,body.pro-dark .v4-quickbar,body.pro-dark .layout>.panel:nth-child(2){background:#151e2f!important;border-color:#2b374b!important}
body.pro-dark .paste-zone,body.pro-dark .preview-box,body.pro-dark .abcdh-editor,body.pro-dark .sat-info{background:#111a2a!important;border-color:#354158!important;color:#cbd5e1}
body.pro-dark #status{background:#111a2a;border-color:#2b374b;color:#cbd5e1}
body.pro-dark select,body.pro-dark input,body.pro-dark button.light,body.pro-dark .pro-actions button,body.pro-dark .v4-actions button,body.pro-dark .v4-import{background:#111a2a!important;color:#e5e7eb!important;border-color:#354158!important}
body.pro-dark .result-head,body.pro-dark .pro-modal-head{border-color:#2b374b}body.pro-dark .pro-modal-card{background:#151e2f!important;color:#e5e7eb}body.pro-dark .pro-modal-head h3{color:#f1f5f9}

/* Responsive */
@media(max-width:1120px){.toolbar{grid-template-columns:auto 1fr 1fr 1fr}.paste-zone{grid-column:span 3}.date-control{grid-column:span 2}.toolbar #scanBtn,.toolbar #resetBtn{align-self:end}.v4-quickbar{grid-template-columns:1fr!important}.v4-brand{text-align:left!important}.v4-actions{justify-content:flex-start!important}.v4-quality{text-align:left!important}}
@media(max-width:850px){.app{padding:12px!important}.app>header{padding:18px;margin-bottom:12px}.toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;padding:12px!important}.toolbar .upload-btn{grid-column:1/-1;text-align:center}.paste-zone{grid-column:1/-1!important;min-height:72px}.mode-select{width:100%}.date-control{grid-column:1/-1!important;min-width:0!important}.toolbar #scanBtn,.toolbar #resetBtn{width:100%}#status{grid-column:1/-1}.layout{grid-template-columns:1fr!important}.preview-box{height:330px!important}.panel{padding:14px!important;border-radius:16px!important}.v4-actions{display:grid!important;grid-template-columns:repeat(2,1fr)!important}.v4-actions>*{width:100%;justify-content:center}.pro-actions{display:grid!important;grid-template-columns:repeat(3,1fr)!important}.pro-actions button{width:100%}body.v4-sticky .layout>.panel:nth-child(2){position:static!important}}
@media(max-width:520px){.app{padding:8px!important}.app>header{border-radius:16px;padding:15px}.app>header h1{font-size:22px}.toolbar{grid-template-columns:1fr!important}.mode-select,.toolbar #scanBtn,.toolbar #resetBtn{grid-column:1/-1}.date-control{grid-template-columns:1fr!important}.date-control label,.date-control input,#todayCambodiaBtn{grid-column:1/-1!important;width:100%}.v4-actions{grid-template-columns:1fr 1fr!important}.pro-actions{grid-template-columns:1fr 1fr!important}.preview-box{height:270px!important}.v5-control-grid{grid-template-columns:1fr 1fr!important}.panel{padding:11px!important}.ticket,.night-exact-card{max-width:100%!important}}