/* =========================================================
   BUNHENG168 PREMIUM UI 2026
   Visual/UX layer only. Existing OCR, conversion and result logic untouched.
   Loaded last so it safely overrides older theme layers.
   ========================================================= */
:root{
  --p-bg:#f4f7fb;
  --p-surface:#ffffff;
  --p-surface-2:#f8fafc;
  --p-text:#0f172a;
  --p-muted:#64748b;
  --p-border:#e2e8f0;
  --p-primary:#4f46e5;
  --p-primary-2:#6366f1;
  --p-primary-soft:#eef2ff;
  --p-success:#16a34a;
  --p-danger:#dc2626;
  --p-warning:#d97706;
  --p-radius:18px;
  --p-radius-sm:12px;
  --p-shadow:0 12px 36px rgba(15,23,42,.07);
  --p-shadow-hover:0 16px 44px rgba(15,23,42,.11);
}

*{box-sizing:border-box}
html{background:var(--p-bg);scroll-behavior:smooth}
body{
  margin:0!important;
  color:var(--p-text)!important;
  background:
    radial-gradient(circle at 15% -10%,rgba(99,102,241,.11),transparent 34%),
    radial-gradient(circle at 100% 0,rgba(59,130,246,.07),transparent 28%),
    var(--p-bg)!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans Khmer",sans-serif!important;
  -webkit-font-smoothing:antialiased;
}

.app{max-width:1440px!important;margin:0 auto!important;padding:20px!important}

/* Hero header */
.app>header{
  position:relative!important;
  overflow:hidden!important;
  margin:0 0 14px!important;
  padding:24px 26px!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,#111827 0%,#312e81 58%,#4f46e5 100%)!important;
  box-shadow:0 18px 45px rgba(49,46,129,.22)!important;
}
.app>header:before{
  content:"";position:absolute;right:-55px;top:-85px;width:230px;height:230px;border-radius:50%;
  background:rgba(255,255,255,.10);filter:blur(1px)
}
.app>header:after{
  content:"PREMIUM"!important;display:block!important;position:absolute!important;right:24px!important;bottom:20px!important;
  width:auto!important;height:auto!important;border-radius:999px!important;padding:7px 11px!important;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;font-size:10px!important;font-weight:900!important;letter-spacing:1.5px!important;
}
.app>header h1{position:relative;z-index:2;margin:0!important;color:#fff!important;font-size:clamp(24px,3vw,35px)!important;line-height:1.25!important;letter-spacing:-.4px!important}
.app>header p{position:relative;z-index:2;margin:7px 0 0!important;color:#c7d2fe!important;font-size:13px!important;line-height:1.55!important;max-width:720px}

/* Shared premium cards */
.toolbar,.pro-toolbar,.panel,.v4-quickbar,
.pro-modal-card,.auto-result-modal-card,.v4-missing-times{
  border:1px solid var(--p-border)!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--p-shadow)!important;
}
.toolbar,.pro-toolbar,.panel,.v4-quickbar{border-radius:var(--p-radius)!important}

/* Main controls */
.toolbar{
  display:grid!important;
  grid-template-columns:170px minmax(250px,1fr) 145px 145px minmax(300px,auto)!important;
  grid-template-areas:"upload paste day time date" "scan reset status status status"!important;
  gap:10px!important;padding:14px!important;margin-bottom:12px!important;align-items:center!important;
}
.toolbar .upload-btn{grid-area:upload}.toolbar #pasteZone{grid-area:paste}.toolbar #daySelect{grid-area:day}.toolbar #timeSelect{grid-area:time}.toolbar .date-control{grid-area:date}.toolbar #scanBtn{grid-area:scan}.toolbar #resetBtn{grid-area:reset}.toolbar #status{grid-area:status}

button,.upload-btn,select,input,textarea{font:inherit}
button,.upload-btn,.mode-select,.date-control input{
  min-height:44px!important;border-radius:12px!important;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease!important;
}
button,.upload-btn{font-weight:800!important}
button:not(:disabled):hover,.upload-btn:hover{transform:translateY(-1px)}
button:not(:disabled):active,.upload-btn:active{transform:translateY(0)}

.upload-btn,#scanBtn,.v4-primary-tool{
  border:1px solid var(--p-primary)!important;
  background:linear-gradient(135deg,var(--p-primary),var(--p-primary-2))!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(79,70,229,.20)!important;
}
.light,#resetBtn,.pro-actions button,.v4-actions button{
  background:#fff!important;color:#334155!important;border:1px solid #dbe2ea!important;box-shadow:none!important;
}
.light:hover,#resetBtn:hover,.pro-actions button:hover,.v4-actions button:hover{border-color:#c7d2fe!important;background:#f8faff!important}

.mode-select,.date-control input,.num-input,.night-input,.t130-input{
  color:#0f172a!important;background:#fff!important;border:1px solid #dbe2ea!important;box-shadow:0 1px 2px rgba(15,23,42,.02)!important;
}
.mode-select:focus,.date-control input:focus,.num-input:focus,.night-input:focus,.t130-input:focus{
  outline:none!important;border-color:#818cf8!important;box-shadow:0 0 0 4px rgba(99,102,241,.11)!important;
}

.paste-zone{
  min-width:0!important;min-height:60px!important;padding:10px 14px!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  border:1.5px dashed #a5b4fc!important;border-radius:14px!important;background:#f8faff!important;color:#3730a3!important;
}
.paste-zone:hover,.paste-zone:focus{background:#eef2ff!important;border-color:#6366f1!important;box-shadow:0 0 0 4px rgba(99,102,241,.08)!important}
.paste-zone small{color:#7c83a1!important}

#status{min-height:42px;padding:10px 12px!important;border-radius:12px!important;background:#f8fafc!important;border:1px solid #edf0f4!important;color:#475569!important;display:flex!important;align-items:center!important;overflow-wrap:anywhere}

/* Secondary tool strip */
.pro-toolbar,.v4-quickbar{padding:10px 12px!important;margin-bottom:12px!important}
.pro-actions,.v4-actions{gap:7px!important}
.pro-actions button,.v4-actions button{min-height:38px!important;padding:8px 11px!important;font-size:12px!important}
#v5SmartRecheck,#v5Control{background:var(--p-primary-soft)!important;border-color:#c7d2fe!important;color:#3730a3!important}
#v5Png{background:#f0fdf4!important;border-color:#bbf7d0!important;color:#166534!important}

/* Workspace */
.layout{grid-template-columns:minmax(0,.92fr) minmax(390px,1.08fr)!important;gap:14px!important;align-items:start!important}
.panel{padding:16px!important}
.panel:hover{box-shadow:var(--p-shadow-hover)!important}
.panel h2,.result-head h2{color:#111827!important;letter-spacing:-.2px!important}
.result-head{padding-bottom:10px!important;margin-bottom:10px!important;border-bottom:1px solid #edf0f4!important;gap:10px!important}

.preview-box{
  height:390px!important;border:1.5px dashed #cbd5e1!important;border-radius:16px!important;background:linear-gradient(180deg,#fbfdff,#f8fafc)!important;
}
.preview-box img{border-radius:10px!important}

/* Result ticket: preserve print/result geometry, refine outer presentation */
.ticket,.night-exact-card,.time130-card,.compact-result-card,.only430-card,.manual-result-preview{
  box-shadow:0 10px 28px rgba(15,23,42,.10)!important;
}
.result-zoomable{padding:8px 0 14px!important}
.v5-editable-result:hover{background:#fff7ed!important}
.v5-editable-result:focus{box-shadow:inset 0 0 0 2px #f59e0b!important}

/* Editors / form groups */
.field-group,.editor-card,.night-editor,.t130-editor,.manual-editor{
  border-color:#e8edf3!important;
}
.field-group label{color:#334155!important}
.num-input{font-size:17px!important}

/* Progress */
.track{height:9px!important;background:#eef2f7!important}
.track div{background:linear-gradient(90deg,#4f46e5,#818cf8)!important}

/* Modals */
.pro-modal{background:rgba(15,23,42,.55)!important;backdrop-filter:blur(7px)!important;padding:18px!important}
.pro-modal-card,.auto-result-modal-card{border-radius:22px!important;padding:18px!important;box-shadow:0 25px 70px rgba(15,23,42,.28)!important}
.pro-modal-head{padding-bottom:12px!important;margin-bottom:12px!important;border-bottom:1px solid #edf0f4!important}
.pro-modal-head h3{margin:0!important;color:#0f172a!important}

/* Auto Result */
.auto-result-status{border-radius:12px!important;background:#f8fafc!important;border-color:#e2e8f0!important}
.auto-result-scroll{border-radius:14px!important;border-color:#e2e8f0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important}
.auto-result-table thead th{background:#f8fafc!important;color:#334155!important}
.auto-pill{background:#f8fafc!important;border-color:#e2e8f0!important;color:#475569!important}
.auto-schedule button.active{background:var(--p-primary)!important;color:#fff!important;border-color:var(--p-primary)!important}

/* Control center */
.v5-control-item{border-radius:14px!important;box-shadow:0 2px 8px rgba(15,23,42,.04)!important}
.v5-control-item.done{background:#f0fdf4!important;border-color:#bbf7d0!important}
.v5-control-item.missing{background:#fffaf0!important;border-color:#fed7aa!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
*::-webkit-scrollbar-track{background:transparent}

/* Tablet */
@media(max-width:1050px){
  .toolbar{grid-template-columns:1fr 1fr!important;grid-template-areas:"upload paste" "day time" "date date" "scan reset" "status status"!important}
  .date-control{min-width:0!important}
  .layout{grid-template-columns:1fr!important}
  .preview-box{height:min(48vh,390px)!important}
}

/* Phone: app-like stacked UI */
@media(max-width:768px){
  body{background:#f6f8fc!important}
  .app{width:100%!important;max-width:100%!important;padding:8px!important;overflow-x:hidden!important}
  .app>header{border-radius:18px!important;padding:19px 17px 18px!important;margin-bottom:9px!important;box-shadow:0 12px 28px rgba(49,46,129,.20)!important}
  .app>header:after{right:14px!important;bottom:12px!important;font-size:8px!important;padding:5px 8px!important}
  .app>header h1{font-size:22px!important;padding-right:0!important;max-width:88%!important}
  .app>header p{font-size:12px!important;max-width:82%!important}

  .toolbar{display:flex!important;flex-direction:column!important;width:100%!important;gap:8px!important;padding:10px!important;margin-bottom:9px!important;border-radius:16px!important}
  .toolbar>*{width:100%!important;max-width:100%!important;min-width:0!important;grid-area:auto!important}
  .toolbar .upload-btn,#scanBtn,#resetBtn{min-height:48px!important}
  .paste-zone{min-height:82px!important;padding:12px!important}
  .date-control{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important}
  .date-control>*{width:100%!important;max-width:100%!important;grid-column:1!important}
  #status{font-size:12px!important;line-height:1.45!important}

  .pro-toolbar,.v4-quickbar{border-radius:16px!important;padding:9px!important;margin-bottom:9px!important}
  .pro-actions,.v4-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:7px!important}
  .pro-actions>* ,.v4-actions>*{width:100%!important;min-width:0!important;min-height:43px!important;justify-content:center!important;white-space:normal!important;line-height:1.25!important}

  .layout{display:block!important}
  .panel{width:100%!important;padding:10px!important;border-radius:16px!important;margin-bottom:9px!important;box-shadow:0 7px 22px rgba(15,23,42,.06)!important}
  .preview-box{height:min(48vh,310px)!important;border-radius:14px!important}
  .result-head{display:flex!important;align-items:center!important;flex-wrap:wrap!important}
  .result-head h2{flex:1 1 150px!important;font-size:18px!important}

  .result-zoomable{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;padding:5px 0 12px!important}
  .ticket,.night-exact-card,.time130-card,.compact-result-card,.only430-card,.manual-result-preview{max-width:100%!important;margin-left:auto!important;margin-right:auto!important;box-shadow:0 8px 20px rgba(15,23,42,.08)!important}

  .editor-grid,.editor-grid-3,.editor-grid-4,.night-input-grid,.night-grid-3,.night-grid-4,.t130-editor-grid{grid-template-columns:1fr!important}
  .num-input,.night-input,.t130-input{min-height:44px!important;font-size:16px!important}

  .pro-modal{padding:0!important;align-items:flex-end!important}
  .pro-modal-card,.auto-result-modal-card{width:100%!important;max-width:100%!important;max-height:94vh!important;margin:0!important;border-radius:22px 22px 0 0!important;padding:14px!important;overflow:auto!important}
  .pro-modal-head{position:sticky!important;top:-14px!important;z-index:20!important;background:#fff!important;padding:14px 0 10px!important}
  .auto-result-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .auto-result-actions button{width:100%!important}
  .auto-api-box{grid-template-columns:1fr!important}
  .auto-api-box button{width:100%!important}
  .auto-result-table{min-width:680px!important}

  .v5-control-grid{grid-template-columns:1fr 1fr!important}
  .v5-control-item{min-height:76px!important}
}

@media(max-width:390px){
  .app{padding:6px!important}
  .app>header h1{font-size:20px!important}
  .app>header p{font-size:11px!important}
  .pro-actions,.v4-actions{grid-template-columns:1fr!important}
  .v5-control-grid{grid-template-columns:1fr 1fr!important}
  .toolbar,.panel{border-radius:14px!important}
}

/* Respect dark-mode class where the old app enables it */
body.pro-dark{--p-bg:#0b1220;--p-surface:#111827;--p-surface-2:#182235;--p-text:#f8fafc;--p-muted:#94a3b8;--p-border:#2b3649;background:#0b1220!important;color:#f8fafc!important}
body.pro-dark .toolbar,body.pro-dark .pro-toolbar,body.pro-dark .panel,body.pro-dark .v4-quickbar,body.pro-dark .pro-modal-card{background:#111827!important;border-color:#2b3649!important}
body.pro-dark .mode-select,body.pro-dark input,body.pro-dark textarea,body.pro-dark .light{background:#182235!important;color:#f8fafc!important;border-color:#334155!important}