/* ============================================================
   ကြည့်ကောင်း — Minimalist warm cream / coffee theme
   Design philosophy: grown-up, quiet, generous whitespace,
   paper background, ink text, one warm accent.
   ============================================================ */

:root{
  /* warm paper palette */
  --paper:        #f5efe3;  /* page background */
  --paper-2:      #efe7d6;  /* soft card surfaces */
  --paper-3:      #e7dcc3;  /* chips / subtle borders */
  --ink:          #2b2218;  /* primary text */
  --ink-soft:     #6b5b48;  /* secondary */
  --ink-muted:    #99886f;  /* tertiary */
  --rule:         #d9cdb2;  /* hairlines */
  --accent:       #8b5a2b;  /* coffee brown */
  --accent-deep:  #5b3a1a;
  --danger:       #a23a2a;

  /* type */
  --serif: "Noto Serif Myanmar","Padauk","Pyidaungsu",Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Myanmar","Padauk","Pyidaungsu",sans-serif;

  --radius: 4px;
  --shadow: none;
  --st: env(safe-area-inset-top,0px);
  --sb: env(safe-area-inset-bottom,0px);
}
html.dark{
  --paper:        #120f0a;
  --paper-2:      #1c1813;
  --paper-3:      #27221a;
  --ink:          #ece4d3;
  --ink-soft:     #b4a78d;
  --ink-muted:    #7a6d56;
  --rule:         #332c21;
  --accent:       #d4a373;
  --accent-deep:  #b78754;
  --shadow: 0 0 0 1px var(--rule);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
body{min-height:100dvh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none !important}

/* ---------------- HEADER ---------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:28px;
  padding:calc(var(--st) + 18px) 6vw 14px;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:.02em}
.brand-mark{color:var(--accent);font-size:10px;line-height:1;transform:translateY(-1px)}
.nav-links{display:flex;gap:22px;margin-left:20px;flex:1;overflow-x:auto;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  font-size:13px;color:var(--ink-soft);letter-spacing:.04em;
  text-transform:lowercase;padding-bottom:2px;border-bottom:1px solid transparent;
  white-space:nowrap;transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--accent)}
.icon-btn{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft);transition:all .2s;font-size:18px;
}
.icon-btn:hover{color:var(--ink);background:var(--paper-2)}

/* ---------------- MAIN ---------------- */
main#app{flex:1;padding:0 6vw 60px;max-width:1280px;margin:0 auto;width:100%}

/* Hero / featured */
.feature{
  margin:40px 0 56px;
  display:grid;grid-template-columns:1fr;gap:28px;
}
@media(min-width:860px){
  .feature{grid-template-columns:1.3fr 1fr;gap:48px;align-items:center}
}
.feature-art{
  position:relative;aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;
  background:var(--paper-2);
  box-shadow:0 1px 0 var(--rule), 0 20px 40px -20px rgba(0,0,0,.15);
}
.feature-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.feature-art .play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.25));
}
.feature-art .play-circle{
  width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);color:#2b2218;
  display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;
  transition:transform .2s;box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.feature-art:hover .play-circle{transform:scale(1.06)}
.feature-meta{display:flex;flex-direction:column;gap:14px}
.feature-eyebrow{
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);font-weight:600;
}
.feature-title{
  font-family:var(--serif);font-size:clamp(28px,4.5vw,44px);line-height:1.2;font-weight:700;margin:0;
}
.feature-sub{color:var(--ink-soft);font-size:15px;max-width:54ch;margin:0}
.feature-cta{
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  padding:12px 22px;border:1px solid var(--ink);color:var(--ink);
  border-radius:var(--radius);font-size:14px;letter-spacing:.04em;align-self:flex-start;
  transition:all .2s;
}
.feature-cta:hover{background:var(--ink);color:var(--paper)}

/* Section head */
.section{margin:52px 0 28px}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;
  padding-bottom:8px;border-bottom:1px solid var(--rule);
}
.section-head h2{
  font-family:var(--serif);font-weight:700;font-size:22px;margin:0;letter-spacing:.01em;
}
.section-head .count{color:var(--ink-muted);font-size:12px;margin-left:10px;font-family:var(--sans);font-weight:400}
.section-head a{font-size:12px;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.section-head a:hover{color:var(--accent)}

/* Filter row */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 32px}
.chip{
  padding:8px 16px;border:1px solid var(--rule);border-radius:999px;
  font-size:13px;color:var(--ink-soft);background:transparent;
  transition:all .15s;
}
.chip:hover{color:var(--ink);border-color:var(--ink-soft)}
.chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* Card grid */
.card-grid{
  display:grid;gap:24px 20px;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
@media(min-width:600px){.card-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:32px 24px}}
@media(min-width:1000px){.card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

.card{cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:opacity .2s}
.card:hover .card-art img{transform:scale(1.02)}
.card:hover .card-title{color:var(--accent)}
.card-art{
  position:relative;aspect-ratio:16/10;width:100%;overflow:hidden;
  background:var(--paper-2);border-radius:var(--radius);
  border:1px solid var(--rule);
}
.card-art img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card-art .card-play{
  position:absolute;bottom:10px;right:10px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:12px;padding-left:2px;
  opacity:0;transform:translateY(4px);transition:all .2s;
}
.card:hover .card-play{opacity:1;transform:translateY(0)}
.card-badge{
  position:absolute;top:10px;left:10px;
  background:var(--paper);color:var(--ink);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  padding:3px 8px;border-radius:2px;font-weight:600;border:1px solid var(--rule);
}
.card-title{font-size:14px;line-height:1.4;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
.card-meta{font-size:11px;color:var(--ink-muted);letter-spacing:.05em;text-transform:uppercase}

/* Empty */
.empty{text-align:center;padding:80px 20px;color:var(--ink-muted);font-size:15px;grid-column:1/-1}
.loader{display:flex;justify-content:center;padding:60px 0;color:var(--ink-muted)}
.spinner{width:24px;height:24px;border:1px solid var(--rule);border-top-color:var(--accent);border-radius:50%;animation:s .9s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}

/* Footer */
.site-footer{
  padding:24px 6vw calc(var(--sb) + 20px);
  border-top:1px solid var(--rule);color:var(--ink-muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;
}

/* ---------------- PLAYER (fullscreen single video) ---------------- */
.player-overlay{
  position:fixed;inset:0;z-index:200;background:#0a0806;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(var(--st) + 24px) 24px calc(var(--sb) + 24px);
  animation:fade .25s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.player-close{
  position:absolute;top:calc(var(--st) + 16px);right:22px;
  width:44px;height:44px;border-radius:50%;color:#d8cdb6;font-size:28px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.player-close:hover{color:#fff;background:rgba(255,255,255,.08)}
.player-frame{
  width:100%;max-width:min(1400px, 96vw);aspect-ratio:16/9;
  background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6);border-radius:2px;overflow:hidden;
}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-info{max-width:min(1400px,96vw);width:100%;margin-top:18px;color:#d8cdb6}
.player-info h2{margin:0 0 6px;font-family:var(--serif);font-size:clamp(18px,2vw,22px);font-weight:600;color:#fff}
.player-meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8e8068}
.player-fallback{display:inline-block;margin-top:10px;padding:8px 14px;border:1px solid #5a5244;border-radius:2px;color:#d4c8af;font-size:12px;letter-spacing:.06em}
.player-fallback:hover{background:#241e15;color:#fff;border-color:#d4c8af}

.player-bigopen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(10,8,6,.88);backdrop-filter:blur(4px);gap:18px;text-align:center;padding:20px;
}
.pbo-msg{color:#d8cdb6;font-size:14px;max-width:40ch}
.pbo-btn{
  display:inline-block;padding:14px 28px;background:#fff;color:#111;border-radius:2px;
  font-size:15px;font-weight:600;letter-spacing:.03em;text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.pbo-btn:hover{background:#ffd666;color:#111}

/* ---------------- ADMIN PANEL ---------------- */
.admin-wrap{max-width:880px;margin:40px auto;padding:0 20px}
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.admin-head h1{font-family:var(--serif);font-size:28px;margin:0}
.form-card{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;margin-bottom:28px}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.form-row label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.form-row input,.form-row select,.form-row textarea{
  font-family:var(--sans);font-size:15px;padding:12px 14px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);
  color:var(--ink);width:100%;transition:border-color .15s;
}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--accent)}
.form-row-check{display:flex;align-items:center;gap:10px;margin:10px 0 20px;font-size:14px;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--radius);font-size:13px;letter-spacing:.05em;font-weight:500;transition:all .15s;border:1px solid var(--ink);background:var(--ink);color:var(--paper)}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper-3)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:#fff}
.btn:disabled{opacity:.5;cursor:not-allowed}

.preview-box{display:flex;gap:16px;align-items:center;margin-top:12px;padding:12px;background:var(--paper);border-radius:var(--radius);border:1px solid var(--rule)}
.preview-box img{width:120px;aspect-ratio:16/10;object-fit:cover;border-radius:2px}
.preview-box .pt{font-size:14px;font-weight:500}

.admin-list{display:flex;flex-direction:column;gap:2px}
.admin-row{
  display:grid;grid-template-columns:80px 1fr auto;gap:14px;align-items:center;
  padding:12px;border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:8px;background:var(--paper);
}
.admin-row img{width:80px;aspect-ratio:16/10;object-fit:cover;border-radius:2px}
.admin-row .t{font-size:14px;font-weight:500;margin-bottom:4px}
.admin-row .m{font-size:11px;color:var(--ink-muted);letter-spacing:.08em;text-transform:uppercase;display:flex;gap:10px}
.admin-row .acts{display:flex;gap:6px}
.admin-row button{padding:6px 10px;font-size:12px;border-radius:var(--radius);border:1px solid var(--rule);color:var(--ink-soft);transition:all .15s}
.admin-row button:hover{color:var(--ink);border-color:var(--ink-soft)}
.admin-row button.del{color:var(--danger);border-color:var(--danger)}
.admin-row button.del:hover{background:var(--danger);color:#fff}

.login-card{max-width:400px;margin:10vh auto 0;padding:40px 32px;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);text-align:center}
.login-card h2{font-family:var(--serif);margin:0 0 6px;font-size:22px}
.login-card p{color:var(--ink-soft);font-size:13px;margin:0 0 22px}