:root {
  --hnk-bg: #0a0f15;
  --hnk-surface: #111923;
  --hnk-surface-2: #151f2b;
  --hnk-line: #334250;
  --hnk-line-soft: #24313d;
  --hnk-text: #f3f6f8;
  --hnk-muted: #a9b5c1;
  --hnk-accent: #d9a441;
  --hnk-accent-strong: #e8b95a;
  --hnk-blue: #58baf0;
  --hnk-green: #67d49b;
  --hnk-radius: 10px;
}
/* UXP-SAFE variant of the patch stylesheet: no object-fit, no position:fixed,
   no vh units, no inset shorthand (see styles.css header for the host rules).
   Full-frame/no-crop is preserved via flex centering + max-width/max-height. */
.hnk-library-root { width:100%; color:var(--hnk-text); font-family: Arial, "Noto Sans Myanmar", sans-serif; box-sizing:border-box; }
.hnk-library-root *, .hnk-preview-modal * { box-sizing:border-box; }
.hnk-library-shell { width:100%; margin:0; padding:8px; border:1px solid var(--hnk-line-soft); border-radius:12px; background:var(--hnk-bg); }
.hnk-library-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin:0 0 8px; }
.hnk-library-head h2 { margin:0 0 2px; font-size:14px; line-height:1.25; }
.hnk-library-head p { margin:0; color:var(--hnk-muted); font-size:10px; line-height:1.35; }
.hnk-library-count { flex:0 0 auto; padding:4px 7px; border:1px solid #2e6080; border-radius:7px; color:#cceeff; background:#0d2636; font-size:9px; font-weight:700; white-space:nowrap; }
.hnk-library-controls { display:block; margin:0 0 8px; padding:7px; border:1px solid var(--hnk-line-soft); border-radius:9px; background:#101821; }
.hnk-library-search, .hnk-library-select { width:100%; height:31px; margin:0 0 6px; padding:0 9px; border:1px solid var(--line-2, #3a3a46); border-radius:7px; background:var(--field, #26262f); color:var(--hnk-text); font-size:11px; outline:none; }
.hnk-library-search:focus, .hnk-library-select:focus { border-color:var(--hnk-accent); }
.hnk-library-filter-row { display:flex; flex-wrap:wrap; gap:5px; }
.hnk-library-filter { min-height:27px; padding:4px 8px; border:1px solid #42505e; border-radius:7px; background:#151e28; color:#dce4eb; font-size:9px; font-weight:700; }
.hnk-library-filter.active { border-color:var(--hnk-accent); background:var(--hnk-accent); color:#15100b; }
.hnk-library-list { display:flex; flex-wrap:wrap; gap:7px; width:100%; }
.hnk-lib-card { width:100%; overflow:hidden; border:1px solid #3b4a58; border-radius:11px; background:linear-gradient(180deg,#151e28,#111821); box-shadow:0 5px 14px rgba(0,0,0,.18); }
.hnk-lib-main { display:flex; align-items:stretch; min-height:132px; padding:7px; gap:8px; }
.hnk-lib-media { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 102px; width:102px; min-height:118px; padding:0; overflow:hidden; border:1px solid #506170; border-radius:8px; background:#071018; cursor:pointer; }
.hnk-lib-media img { display:block; width:auto; height:auto; max-width:100%; max-height:132px; background:#071018; }
/* Ratio overlay misrenders inside a UXP <button> (oversized, mispositioned);
   the same ratio already shows as a chip on every card, so hide the overlay. */
.hnk-lib-ratio { display:none; }
.hnk-lib-info { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; }
.hnk-lib-title-row { display:flex; align-items:flex-start; gap:5px; }
.hnk-lib-title { min-width:0; flex:1 1 auto; margin:0; font-size:11px; line-height:1.25; font-weight:800; color:#fff; }
.hnk-lib-fav { flex:0 0 25px; width:25px; height:25px; padding:0; border:1px solid var(--line-2, #3a3a46); border-radius:6px; background:#0d141c; color:#9fb0bf; font-size:13px; }
.hnk-lib-fav.active { color:#ffbd65; border-color:#a36d2d; background:#2a1e11; }
.hnk-lib-purpose { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:3px 0 5px; color:#bdc8d2; font-size:9px; line-height:1.35; }
.hnk-lib-chips { display:flex; flex-wrap:wrap; gap:4px; margin:auto 0 6px; }
.hnk-lib-chip { padding:2px 5px; border:1px solid #43515e; border-radius:999px; color:#c8d2da; background:#1a242e; font-size:8px; white-space:nowrap; }
.hnk-lib-chip.protect { border-color:#2f6855; color:#bdebd7; background:#10261e; }
.hnk-lib-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; }
.hnk-lib-btn { min-height:29px; padding:5px 8px; border:1px solid var(--line-2, #3a3a46); border-radius:7px; background:#17212b; color:#eff4f7; font-size:9px; font-weight:800; }
.hnk-lib-btn.secondary { flex:0 0 auto; }
/* min-width:0 let UXP collapse the button to a sliver; a real minimum plus
   flex-wrap makes it grow beside Guideline or take its own full-width row. */
.hnk-lib-btn.primary { min-width:130px; flex:1 1 auto; border-color:var(--hnk-accent); background:var(--hnk-accent); color:#18100a; }
.hnk-lib-btn:focus, .hnk-lib-media:focus, .hnk-lib-fav:focus { outline:2px solid #ffd1a4; outline-offset:1px; }
.hnk-lib-guide { display:none; padding:8px 9px 9px; border-top:1px solid var(--hnk-line-soft); background:#0c131b; }
.hnk-lib-guide.open { display:block; }
.hnk-lib-guide-grid { display:block; }
.hnk-lib-guide-item { margin:0 0 6px; padding:6px 7px; border-left:2px solid #3d657e; border-radius:0 6px 6px 0; background:#111b24; }
.hnk-lib-guide-item:last-child { margin-bottom:0; }
.hnk-lib-guide-label { display:block; margin-bottom:2px; color:#ffbd7d; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.hnk-lib-guide-text { margin:0; color:#c8d2da; font-size:9px; line-height:1.42; }
.hnk-library-empty { width:100%; padding:22px 12px; border:1px dashed #4b5b68; border-radius:9px; color:var(--hnk-muted); text-align:center; font-size:10px; }
.hnk-library-more { width:100%; min-height:34px; margin-top:8px; border:1px solid #4a5967; border-radius:8px; background:#151f29; color:#f1f5f8; font-size:10px; font-weight:800; }
.hnk-library-more[hidden] { display:none; }
.hnk-library-toast { position:absolute; left:50%; bottom:56px; z-index:4000; transform:translateX(-50%); max-width:calc(100% - 24px); padding:8px 11px; border:1px solid #5a6a77; border-radius:8px; background:#101820; color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.45); font-size:10px; }
.hnk-library-toast[hidden] { display:none; }
.hnk-preview-modal { position:absolute; left:0; right:0; top:0; bottom:0; z-index:4500; display:none; align-items:center; justify-content:center; padding:14px; background:rgba(0,0,0,.82); }
.hnk-preview-modal.open { display:flex; }
.hnk-preview-dialog { width:100%; max-width:520px; max-height:560px; overflow:auto; padding:9px; border:1px solid #556676; border-radius:12px; background:#0d141c; }
.hnk-preview-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.hnk-preview-title { min-width:0; margin:0; font-size:11px; line-height:1.3; }
.hnk-preview-close { width:30px; height:28px; border:1px solid #52616e; border-radius:7px; background:#17212b; color:#fff; }
.hnk-preview-image-wrap { display:flex; align-items:center; justify-content:center; width:100%; min-height:180px; max-height:440px; overflow:hidden; border:1px solid #354452; border-radius:9px; background:#050b10; }
.hnk-preview-image { display:block; width:auto; height:auto; max-width:100%; max-height:440px; }
.hnk-preview-meta { margin:7px 1px 0; color:#aebbc6; font-size:9px; line-height:1.4; }
@media (min-width:680px) {
  .hnk-lib-card { width:calc(50% - 4px); }
  .hnk-library-controls { display:flex; flex-wrap:wrap; gap:6px; }
  .hnk-library-search { flex:1 1 260px; margin:0; }
  .hnk-library-select { flex:0 0 190px; margin:0; }
  .hnk-library-filter-row { flex:1 0 100%; }
}
@media (max-width:335px) {
  .hnk-library-shell { padding:6px; }
  .hnk-lib-main { min-height:122px; padding:6px; gap:6px; }
  .hnk-lib-media { flex-basis:88px; width:88px; min-height:108px; }
  .hnk-lib-media img { min-height:108px; max-height:122px; }
  .hnk-lib-title { font-size:10px; }
  .hnk-lib-purpose { font-size:8.5px; }
  .hnk-lib-chip:nth-child(n+4) { display:none; }
  .hnk-lib-btn { padding-left:6px; padding-right:6px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
