/* ==========================================================================
   หัดเขียน.com — Warm Editorial  |  Stylesheet (ไม่ต้อง build, ใช้ได้เลย)
   สารบัญ: 1 Tokens · 2 Base · 3 Layout/Header/Nav · 4 Components
           5 Home · 6 Reader · 7 Authors · 8 Write · 9 Utilities
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  --primary:#97431a; --primary-container:#b75a30; --primary-fixed:#ffdbcd; --on-primary-fixed:#360f00; --on-primary:#fff;
  --secondary:#45664e; --secondary-container:#c4e9cb; --on-secondary-container:#496a52; --secondary-fixed:#c7ecce; --on-secondary-fixed:#01210f; --on-secondary:#fff;
  --tertiary:#7d5315; --tertiary-container:#996c2c; --tertiary-fixed:#ffddb6; --on-tertiary-fixed:#2a1800; --on-tertiary:#fff;
  --surface:#fff8f3; --surface-low:#faf2ec; --surface-container:#f4ede6; --surface-high:#eee7e0; --surface-highest:#e8e1db; --surface-lowest:#fff;
  --on-surface:#1e1b17; --on-surface-variant:#55433b; --outline:#89726a; --outline-variant:#dcc1b7;
  --inverse-surface:#33302c; --inverse-on-surface:#f7efe9;

  --font-headline:'Noto Serif Thai','Noto Serif',Georgia,serif;
  --font-body:'Noto Sans Thai','Noto Sans','Sarabun',sans-serif;
  --font-label:'Plus Jakarta Sans','Noto Sans Thai',sans-serif;

  --maxw:42.5rem;
  --header-h:4rem;
  --radius:1rem;
}

/* 2. BASE ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;font-family:var(--font-body);font-size:16px;line-height:1.6;
  background:var(--surface);color:var(--on-surface);
  overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-headline);margin:0;line-height:1.35}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--primary-fixed);color:var(--on-primary-fixed)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;
  display:inline-block;vertical-align:middle;letter-spacing:normal;white-space:nowrap;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}
.ms.fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
/* กันเลย์เอาต์เพี้ยนถ้าฟอนต์ไอคอนยังโหลดไม่เสร็จ/โหลดไม่ได้ */
.ms{width:1em;height:1em;overflow:hidden}
.ms.s14{font-size:14px}.ms.s16{font-size:16px}.ms.s18{font-size:18px}.ms.s20{font-size:20px}.ms.s22{font-size:22px}.ms.s28{font-size:28px}.ms.s32{font-size:32px}

.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.no-scrollbar::-webkit-scrollbar{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 3. LAYOUT / HEADER / BOTTOM NAV ----------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1rem}
main.page{padding-top:var(--header-h);padding-bottom:6rem;min-height:100vh}
main.page > .wrap{padding-top:1rem}

.site-header{position:fixed;inset:0 0 auto 0;z-index:40;background:rgba(255,248,243,.9);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--surface-container);box-shadow:0 1px 8px rgba(43,40,36,.04)}
.header-inner{max-width:var(--maxw);margin:0 auto;height:var(--header-h);padding:0 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.header-left{display:flex;align-items:center;gap:.5rem;min-width:0}
.back-btn{width:2.5rem;height:2.5rem;margin-left:-.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.15s}
.back-btn:hover{background:var(--surface-container)}
.brand{display:flex;align-items:center;gap:.5rem;min-width:0;transition:opacity .15s}
.brand:hover{opacity:.9}
.brand img{width:2rem;height:2rem;object-fit:contain;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-title{font-family:var(--font-headline);font-size:1.125rem;font-weight:600;color:var(--primary);letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{font-size:.75rem;color:var(--on-surface-variant);margin-top:-.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.persona-btn{display:flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:999px;
  background:var(--surface-container);border:1px solid rgba(220,193,183,.3);transition:background .15s}
.persona-btn:hover{background:var(--surface-high)}
.persona-name{font-size:.75rem;font-weight:500;color:var(--on-surface-variant);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none}
@media (min-width:640px){.persona-name{display:inline}}
.persona-btn .ms{color:var(--outline)}
.avatar-sm{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--primary);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.avatar-sm img{width:100%;height:100%;object-fit:cover}

.bottom-nav{position:fixed;inset:auto 0 0 0;z-index:40;background:rgba(255,248,243,.9);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-top:1px solid var(--surface-container);box-shadow:0 -2px 12px rgba(43,40,36,.05);
  padding-bottom:env(safe-area-inset-bottom,0)}
.bottom-nav-inner{display:flex;align-items:center;justify-content:space-around;height:4rem;max-width:var(--maxw);margin:0 auto;padding:0 .5rem}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;width:4rem;height:100%;
  color:var(--on-surface-variant);transition:.15s}
.tab:hover{color:var(--on-surface)}
.tab:active{transform:scale(.95)}
.tab span.label{font-size:11px;font-weight:500;margin-top:2px}
.tab[aria-current="page"]{color:var(--primary);font-weight:600;transform:scale(1.05)}
.tab[aria-current="page"] .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* 4. COMPONENTS ------------------------------------------------------------ */
/* ปุ่ม */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.5rem 1.1rem;border-radius:999px;
  font-size:.75rem;font-weight:500;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn:active{transform:scale(.96)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-container)}
.btn-secondary{background:var(--secondary);color:var(--on-secondary)}
.btn-ghost{background:var(--surface-high);color:var(--on-surface);border:1px solid rgba(220,193,183,.3)}
.btn-ghost:hover{background:var(--surface-highest)}
.btn-lg{padding:.75rem 1.25rem;font-size:.8125rem;font-weight:600}

/* Pills / chips */
.pill-row{display:flex;gap:.5rem;overflow-x:auto;margin:0 -1rem;padding:.25rem 1rem}
.pill{flex-shrink:0;display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;border-radius:999px;
  font-size:.75rem;font-weight:500;background:var(--surface-container);color:var(--on-surface);transition:.15s}
.pill:hover{background:var(--surface-high)}
.pill.active{background:var(--primary);color:var(--on-primary);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pill-cat{padding:.25rem .75rem;background:var(--surface-low);color:var(--on-surface-variant)}
.pill-cat:hover{background:var(--surface-container)}
.pill-cat.active{background:var(--surface-highest);color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pill-author{padding:.375rem .75rem;text-align:left}
.pill-author .dot{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}
.pill-author small{display:block;font-size:10px;line-height:1.2;color:var(--on-surface-variant)}
.pill-author.active small{color:var(--primary-fixed)}
.pill-author b{font-weight:500;line-height:1.2;display:block}
.c-mokkram{background:var(--tertiary-container);color:var(--on-tertiary)}
.c-nachan{background:var(--secondary);color:var(--on-secondary)}
.c-keng{background:var(--primary-container);color:var(--on-primary)}

.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .625rem;border-radius:999px;font-size:11px;font-weight:600;flex-shrink:0}
.badge-primary{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.badge-secondary{background:var(--secondary-fixed);color:var(--on-secondary-fixed)}
.badge-neutral{background:var(--surface-highest);color:var(--on-surface-variant)}

/* Cheer (ส่งใจ) button */
.cheer{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:500;
  background:var(--surface-highest);color:var(--on-surface-variant);transition:.15s}
.cheer:hover{color:var(--primary)}
.cheer:active{transform:scale(.95)}
.cheer .ms{font-size:16px}
.cheer.on{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.cheer.on .ms{color:var(--primary);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Toast */
.toast{position:fixed;left:50%;bottom:5rem;transform:translate(-50%,8px);z-index:60;display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;background:var(--inverse-surface);color:var(--inverse-on-surface);font-size:.875rem;
  box-shadow:0 10px 25px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:92vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .ms{color:var(--primary-fixed);font-size:18px}

/* Modal เลือกนามปากกา */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:none;align-items:center;justify-content:center;padding:1rem}
.modal.open{display:flex;animation:fade .2s}
.modal-card{width:100%;max-width:24rem;border-radius:1.25rem;background:var(--surface);padding:1.25rem;
  box-shadow:0 25px 50px rgba(0,0,0,.25);border:1px solid var(--surface-high);display:flex;flex-direction:column;gap:1rem;animation:pop .2s}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.25rem;border-bottom:1px solid var(--surface-container)}
.modal-head h3{font-size:1rem;font-weight:600}
.modal-head p{font-size:.75rem;color:var(--on-surface-variant)}
.icon-btn{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--outline)}
.icon-btn:hover{background:var(--surface-container)}
.persona-list{display:flex;flex-direction:column;gap:.5rem}
.persona-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;border-radius:.75rem;background:var(--surface-low);text-align:left;transition:.15s}
.persona-item:hover{background:var(--surface-container)}
.persona-item.selected{background:var(--primary-fixed);color:var(--on-primary-fixed);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.persona-item img{width:2.5rem;height:2.5rem;border-radius:50%;object-fit:cover;flex-shrink:0}
.persona-item .info{flex:1;min-width:0;display:flex;flex-direction:column}
.persona-item b{font-size:.875rem;font-weight:600}
.persona-item small{font-size:.75rem;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page .wrap{animation:rise .35s ease both}

/* 5. HOME ------------------------------------------------------------------ */
.welcome{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface-container);padding:1.25rem;
  border:1px solid rgba(220,193,183,.3);box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:1rem}
.welcome::after{content:"";position:absolute;right:-2rem;bottom:-2rem;width:8rem;height:8rem;border-radius:50%;background:rgba(255,219,205,.2);filter:blur(12px);pointer-events:none}
.welcome-top{display:flex;gap:.75rem;align-items:flex-start;position:relative;z-index:1}
.welcome h1{font-size:1.25rem;font-weight:600;color:var(--primary);letter-spacing:-.01em}
.welcome p{font-size:.8125rem;color:var(--on-surface-variant);margin-top:.375rem;line-height:1.7}
.welcome-foot{position:relative;z-index:1;margin-top:1rem;padding-top:.75rem;border-top:1px solid rgba(220,193,183,.2);
  display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:var(--on-surface-variant)}
.welcome-foot .chip{display:flex;align-items:center;gap:.25rem;background:rgba(255,248,243,.8);padding:.25rem .625rem;border-radius:999px}
.welcome-foot > span{display:flex;align-items:center;gap:.375rem}

.section-label{display:flex;align-items:center;justify-content:space-between;margin:.25rem .25rem .5rem;font-size:.75rem}
.section-label b{font-weight:600;letter-spacing:.02em}
.section-label span{color:var(--primary);font-weight:500}
.filters{margin-bottom:.75rem}
.filters.cats{margin-bottom:1rem}

.feed{display:flex;flex-direction:column;gap:1rem}
.card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);background:var(--surface-container);padding:1rem;
  border:1px solid rgba(220,193,183,.2);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .2s,transform .1s}
.card:hover{box-shadow:0 6px 16px rgba(43,40,36,.1)}
.card:active{transform:scale(.995)}
@media (min-width:640px){.card{padding:1.25rem}}
.card[hidden]{display:none}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;gap:.5rem}
.byline{display:flex;align-items:center;gap:.5rem;min-width:0}
.byline .dot{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.75rem;flex-shrink:0}
.byline div{display:flex;flex-direction:column;min-width:0}
.byline b{font-size:.75rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.byline small{font-size:10px;color:var(--on-surface-variant);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-media{border-radius:.75rem;overflow:hidden;margin:.5rem 0;background:var(--surface-high);position:relative}
.card-media img{width:100%;height:11rem;object-fit:cover;transition:transform .5s}
@media (min-width:640px){.card-media img{height:13rem}}
.card:hover .card-media img{transform:scale(1.02)}
.card-media .time{position:absolute;right:.5rem;bottom:.5rem;display:flex;align-items:center;gap:.25rem;padding:.125rem .625rem;border-radius:999px;
  background:rgba(51,48,44,.8);color:var(--inverse-on-surface);font-size:11px}
.card-media.diy{display:grid;grid-template-columns:2fr 1fr;gap:.5rem;background:none}
.card-media.diy > div{overflow:hidden;background:var(--surface-high)}
.card-media.diy img{height:8rem}
@media (min-width:640px){.card-media.diy img{height:9rem}}
.poem-prev{margin:.5rem 0;padding:.75rem 1rem;border-radius:.75rem;background:var(--surface-low);border-left:3px solid var(--primary)}
.poem-prev p{font-family:var(--font-headline);font-style:italic;text-align:center;line-height:2;font-size:.875rem}
.poem-prev .orn{text-align:center;margin-top:.25rem;font-size:11px;letter-spacing:.2em;opacity:.6;color:var(--on-surface-variant)}
.it-box{margin:.5rem 0;padding:.75rem;border-radius:.75rem;background:var(--surface-high);display:flex;align-items:center;gap:.75rem}
.it-box .ico{width:3rem;height:3rem;border-radius:.75rem;background:var(--surface-lowest);display:flex;align-items:center;justify-content:center;color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.08);flex-shrink:0}
.it-box small{display:block;font-size:.75rem;color:var(--primary);font-weight:600}
.it-box span{font-size:.8125rem;font-weight:500}
.card h2{font-size:1rem;font-weight:600;margin-top:.25rem;line-height:1.45;transition:color .15s}
@media (min-width:640px){.card h2{font-size:1.125rem}}
.card:hover h2{color:var(--primary)}
.card h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius);z-index:1} /* ทั้งการ์ดคลิกได้ */
.excerpt{font-size:.8125rem;color:var(--on-surface-variant);margin-top:.375rem;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:.75rem;padding-top:.5rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(238,231,224,.6)}
.card-foot .tag{display:flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:500;color:var(--secondary)}
.card-foot .cheer{position:relative;z-index:2}

.empty{padding:2rem;border-radius:var(--radius);background:var(--surface-container);text-align:center;display:none;flex-direction:column;align-items:center;gap:.5rem}
.empty.show{display:flex}
.empty .ms{color:var(--outline)}
.empty b{font-family:var(--font-headline);font-weight:500}
.empty small{font-size:.75rem;color:var(--on-surface-variant)}
.feed-end{margin:2rem 0 1.5rem;padding:1.5rem 1rem;border-radius:var(--radius);background:var(--surface-low);border:1px solid rgba(220,193,183,.2);
  display:flex;flex-direction:column;align-items:center;text-align:center}
.feed-end .ico{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--surface-high);display:flex;align-items:center;justify-content:center;color:var(--outline);margin-bottom:.5rem}
.feed-end h3{font-size:1rem;font-weight:600}
.feed-end p{font-size:.75rem;color:var(--on-surface-variant);margin-top:.25rem;max-width:20rem;line-height:1.7}
.feed-end .btn{margin-top:.75rem;padding:.625rem 1.25rem}

/* 6. READER ---------------------------------------------------------------- */
.reader{--r-bg:var(--surface);--r-fg:var(--on-surface);--r-paper:var(--surface-container);--r-paper-line:rgba(220,193,183,.3);
  background:var(--r-bg);color:var(--r-fg);transition:background .3s,color .3s;min-height:100vh}
.reader[data-theme="sepia"]{--r-bg:#f5eedb;--r-fg:#2b241e;--r-paper:#ece4d0;--r-paper-line:#ded4bd}
.reader[data-theme="night"]{--r-bg:#23201d;--r-fg:#f7efe9;--r-paper:#2d2925;--r-paper-line:#3d3731}
body.reader-body{transition:background .3s}
.read-toolbar{position:sticky;top:var(--header-h);z-index:30;padding:.5rem 1rem;background:rgba(255,248,243,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--surface-container)}
.read-toolbar-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.375rem .75rem;border-radius:999px;background:var(--surface-container);border:1px solid rgba(220,193,183,.3);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tool-group{display:flex;align-items:center;gap:.25rem}
.size-btn{width:1.75rem;height:1.75rem;border-radius:50%;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition:.15s}
.size-btn:hover{background:var(--surface-high)}
.tool-group .lbl{font-size:11px;color:var(--outline);padding:0 .125rem}
.swatch{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--outline-variant);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.swatch i{display:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--primary)}
.swatch.active i{display:block}
.swatch[data-theme="warm"]{background:#faf7f2}
.swatch[data-theme="sepia"]{background:#f2e7d5;border-color:#d6c7b0}.swatch[data-theme="sepia"] i{background:var(--tertiary)}
.swatch[data-theme="night"]{background:#2b2824;border-color:#443e38}.swatch[data-theme="night"] i{background:#eae3d6}
.bm-btn{display:flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border-radius:999px;font-size:.75rem;font-weight:500;color:var(--on-surface-variant);transition:.15s}
.bm-btn:hover{color:var(--primary)}
.bm-btn.on .ms{color:var(--primary);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.bm-btn .t{display:none}
@media (min-width:420px){.bm-btn .t{display:inline}}

.article{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1rem 0;display:flex;flex-direction:column;gap:1.5rem}
.art-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:.125rem .625rem;border-radius:999px;font-size:.75rem;font-weight:500}
.chip-green{background:var(--secondary-container);color:var(--on-secondary-container)}
.chip-line{background:var(--surface-container);color:var(--outline);border:1px solid rgba(220,193,183,.3)}
.art-meta .rt{margin-left:auto;display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--outline);font-family:var(--font-label)}
.art-title{font-size:1.375rem;font-weight:700;letter-spacing:-.01em;line-height:1.5;margin-top:.75rem}
@media (min-width:640px){.art-title{font-size:1.625rem}}
@media (min-width:768px){.art-title{font-size:1.875rem}}
.art-byline{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.25rem 0;margin-top:.75rem;
  border-top:1px solid rgba(220,193,183,.2);border-bottom:1px solid rgba(220,193,183,.2)}
.duet{display:flex;flex-shrink:0}
.duet .dot{width:2.25rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.duet .dot + .dot{margin-left:-.5rem;border:2px solid var(--surface)}
.art-byline .who{display:flex;align-items:center;gap:.75rem;min-width:0}
.art-byline .who > div:last-child{display:flex;flex-direction:column;min-width:0}
.art-byline .nm{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap}
.art-byline .nm b{font-size:.8125rem;font-weight:600}
.art-byline .nm .badge{font-size:10px;padding:0 .5rem;background:var(--secondary-fixed);color:var(--on-secondary-fixed);font-weight:500}
.art-byline small{font-size:11px;color:var(--outline)}
.share-btn{width:2.25rem;height:2.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--outline);flex-shrink:0;transition:.15s}
.share-btn:hover{color:var(--on-surface);background:var(--surface-container)}

.prose{display:flex;flex-direction:column;gap:1.25rem;font-size:1rem;line-height:2}
.reader[data-size="0"] .prose{font-size:.875rem;line-height:1.75}
.reader[data-size="2"] .prose{font-size:1.125rem;line-height:2.05}
.prose p{text-align:justify}
.prose .drop{float:left;font-family:var(--font-headline);font-size:3rem;line-height:1;padding:.25rem .75rem 0 0;color:var(--primary);font-weight:700;user-select:none}
.prose em{font-family:var(--font-headline)}
.prose strong{font-weight:600;color:var(--primary)}
.reader[data-theme="night"] .prose strong{color:var(--primary-fixed)}
.clearfix::after{content:"";display:block;clear:both}
.prose figure{margin:0}
.fig-hero{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0}
.fig-hero .img{overflow:hidden;border-radius:var(--radius);background:var(--surface-high);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.fig-hero img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;margin:0 auto}
.fig-hero:not(.full) .img{max-width:100%;width:fit-content;margin:0 auto}
.fig-hero.full .img{border-radius:0}
figcaption{font-size:.75rem;color:var(--outline);font-style:italic}
.fig-hero figcaption{text-align:center;padding:0 .5rem}
.fig-side{width:46%;max-width:240px;display:flex;flex-direction:column;gap:.375rem;margin-bottom:.5rem}
.fig-side.left{float:left;margin-right:1rem}
.fig-side.right{float:right;margin-left:1rem}
.fig-side .img{overflow:hidden;border-radius:.75rem;background:var(--surface-high)}
.fig-side img{display:block;width:100%;height:auto}
.fig-side figcaption{font-size:11px;line-height:1.4}
.fig-side.right figcaption{text-align:right}
.orn-sep{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.5rem 0;opacity:.6}
.orn-sep i{width:2.5rem;height:1px;background:var(--outline-variant)}
.orn-sep .ms{color:var(--primary);font-size:16px}
.p-gap > p + p{margin-top:.75rem}

.poem{margin:1.5rem 0;border-radius:var(--radius);padding:1.25rem;background:var(--surface-low);border:1px solid rgba(220,193,183,.3);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.reader[data-theme="night"] .poem{background:#26231f}
.poem-paper{border-radius:.75rem;padding:1.25rem;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--r-paper);border:1px solid var(--r-paper-line)}
.poem-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--primary);font-size:.75rem;font-weight:600;letter-spacing:.12em}
.poem .q{color:rgba(151,67,26,.3);font-size:40px;margin-bottom:-.5rem}
.poem blockquote{margin:0;max-width:32rem;padding:.5rem 0;font-family:var(--font-headline);font-size:1rem;line-height:2.2;letter-spacing:.02em}
@media (min-width:640px){.poem blockquote{font-size:1.125rem}}
.poem blockquote p{text-align:center}
.poem .orn{display:flex;gap:.5rem;margin:.5rem 0;color:var(--outline);opacity:.4}
.poem cite{display:inline-flex;align-items:center;gap:.5rem;margin-top:.25rem;padding:.25rem .75rem;border-radius:999px;background:var(--surface);
  color:var(--secondary);font-size:.75rem;font-weight:500;font-style:normal;border:1px solid rgba(220,193,183,.2)}
.poem cite::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--primary)}

.takeaway{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border-radius:.75rem;background:var(--surface-high);border:1px solid rgba(220,193,183,.3);color:var(--on-surface)}
.takeaway .ico{width:2rem;height:2rem;border-radius:50%;background:var(--tertiary-fixed);color:var(--on-tertiary-fixed);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.125rem}
.takeaway b{display:block;font-size:.75rem;font-weight:600;color:var(--tertiary);font-family:var(--font-body)}
.takeaway p{font-size:.8125rem;color:var(--on-surface-variant);margin-top:.125rem;line-height:1.7;text-align:left}

.art-footer{display:flex;flex-direction:column;gap:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(220,193,183,.2)}
.cheer-bar{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-radius:var(--radius);
  background:var(--surface-container);border:1px solid rgba(220,193,183,.3);color:var(--on-surface)}
@media (min-width:640px){.cheer-bar{flex-direction:row}}
.cheer-bar .l{display:flex;align-items:center;gap:.75rem}
.cheer-bar .ico{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--primary-fixed);color:var(--on-primary-fixed);display:flex;align-items:center;justify-content:center}
.cheer-bar b{display:block;font-family:var(--font-headline);font-size:.9375rem;font-weight:600}
.cheer-bar small{font-size:.75rem;color:var(--outline)}
.cheer-big{display:inline-flex;align-items:center;gap:.625rem;padding:.625rem 1.5rem;border-radius:999px;font-size:.8125rem;font-weight:600;
  background:var(--primary);color:var(--on-primary);box-shadow:0 1px 3px rgba(0,0,0,.12);transition:.15s}
.cheer-big:hover{background:var(--primary-container)}
.cheer-big:active{transform:scale(.95)}
.cheer-big.on{background:var(--secondary);color:var(--on-secondary)}
.cheer-big.on .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.cheer-big .n{padding:.125rem .5rem;border-radius:999px;background:rgba(0,0,0,.15);font-size:.75rem;font-weight:700;font-family:ui-monospace,monospace}
.quick{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:0 .25rem;color:var(--on-surface)}
.quick .l{display:flex;gap:.25rem}
.quick button{display:flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:999px;font-size:.75rem;color:var(--on-surface-variant);transition:.15s}
.quick button:hover{background:var(--surface-container)}
.quick .cnt{font-size:.75rem;color:var(--outline);font-family:var(--font-label)}

.comments{display:flex;flex-direction:column;gap:.75rem;padding-top:.5rem;color:var(--on-surface)}
.comments-head{display:flex;align-items:center;justify-content:space-between}
.comments-head .l{display:flex;align-items:center;gap:.5rem}
.comments-head h3{font-size:.9375rem;font-weight:600}
.comments-head .n{padding:0 .5rem;border-radius:999px;background:var(--surface-highest);color:var(--outline);font-size:.75rem;font-weight:600}
.comments-head .r{font-size:.75rem;color:var(--outline)}
.comment-form{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-radius:var(--radius);background:var(--surface-container);border:1px solid rgba(220,193,183,.3)}
.comment-form textarea{width:100%;resize:none;border:0;border-radius:.75rem;padding:.75rem;background:var(--surface-lowest);font-size:.8125rem;color:var(--on-surface)}
.comment-form textarea::placeholder{color:rgba(137,114,106,.7)}
.comment-form textarea:focus{outline:1px solid rgba(151,67,26,.4)}
.comment-form .row{display:flex;align-items:center;justify-content:space-between;padding-top:.25rem}
.comment-form .row small{font-size:11px;color:var(--outline);font-style:italic}
.comment-list{display:flex;flex-direction:column;gap:.625rem;margin-top:.5rem}
.comment{padding:.875rem;border-radius:.75rem;background:var(--surface-low);border:1px solid rgba(220,193,183,.2);display:flex;flex-direction:column;gap:.25rem}
.comment .top{display:flex;align-items:center;justify-content:space-between}
.comment .who{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600}
.comment .av{width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.comment .time{font-size:11px;color:var(--outline)}
.comment p{font-size:.8125rem;color:var(--on-surface-variant);padding-left:2rem;line-height:1.7}
.av-green{background:var(--secondary-fixed);color:var(--on-secondary-fixed)}
.av-amber{background:var(--tertiary-fixed);color:var(--on-tertiary-fixed)}
.av-rose{background:var(--primary-fixed);color:var(--on-primary-fixed)}

/* โหมดกลางคืน: ปรับสีข้อความรองให้อ่านชัดบนพื้นเข้ม */
.reader[data-theme="night"] :is(.quick button,.quick .cnt,.comments-head .r,.art-byline small,.art-meta .rt,figcaption){color:#c9bcb2}
.reader[data-theme="night"] .chip-line{background:#2d2925;color:#c9bcb2;border-color:#3d3731}
.reader[data-theme="night"] .quick button:hover{background:#2d2925}
.reader[data-theme="night"] .share-btn{color:#c9bcb2}
.reader[data-theme="night"] .share-btn:hover{background:#2d2925;color:#f7efe9}

/* 7. AUTHORS --------------------------------------------------------------- */
.page-head .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.tag-pill{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:999px;background:var(--secondary-container);color:var(--on-secondary-container);font-size:.75rem;font-weight:500}
.page-head .top > span:last-child{font-size:.75rem;color:var(--on-surface-variant);display:flex;align-items:center;gap:.375rem}
.page-head .top i{width:.5rem;height:.5rem;border-radius:50%;background:var(--secondary);display:inline-block}
.page-head h1{font-size:1.375rem;font-weight:700;letter-spacing:-.01em}
.page-head p{font-size:.8125rem;color:var(--on-surface-variant);margin-top:.25rem;line-height:1.7}
.author-cards{display:flex;gap:.75rem;overflow-x:auto;margin:1rem -1rem 0;padding:.25rem 1rem .75rem}
.author-card{flex-shrink:0;width:275px;border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;justify-content:space-between;
  background:var(--surface-low);border:1px solid rgba(220,193,183,.2);opacity:.9;cursor:pointer;transition:all .3s}
@media (min-width:640px){.author-card{width:290px}}
.author-card:hover{opacity:1;background:var(--surface-container)}
.author-card.active{background:var(--surface-container);opacity:1;border-color:rgba(151,67,26,.3);box-shadow:0 0 0 1px rgba(151,67,26,.2),0 4px 10px rgba(43,40,36,.1);transform:scale(1.01)}
.author-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.75rem}
.av-wrap{position:relative}
.av-wrap img{width:3.25rem;height:3.25rem;border-radius:50%;object-fit:cover;border:2px solid var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.av-wrap .role-ico{position:absolute;right:-.25rem;bottom:-.25rem;width:1.25rem;height:1.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.av-wrap .role-ico .ms{font-size:13px}
.author-card .meta{display:flex;flex-direction:column;align-items:flex-end}
.author-card .meta small{font-size:11px;color:var(--on-surface-variant);margin-top:.375rem;display:flex;align-items:center;gap:.25rem;font-family:var(--font-label)}
.author-card .meta small .ms{color:var(--primary);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.author-card h2{font-size:1rem;font-weight:700}
.author-card .role{font-size:.75rem;color:var(--secondary);font-weight:500;margin-top:.125rem}
.author-card .quote{margin:.5rem 0 .75rem;padding:.625rem;border-radius:.75rem;background:rgba(250,242,236,.8);border:1px solid rgba(220,193,183,.15)}
.author-card .quote p{font-family:var(--font-headline);font-style:italic;font-size:.75rem;color:var(--on-surface-variant);line-height:1.7}
.tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.75rem}
.tags span{padding:.125rem .5rem;border-radius:.375rem;background:var(--surface-high);color:var(--on-surface-variant);font-size:10px;font-weight:500}
.author-card .foot{display:flex;align-items:center;justify-content:space-between;padding-top:.5rem;border-top:1px solid rgba(220,193,183,.2);font-size:.75rem}
.author-card .foot .l{display:flex;align-items:center;gap:.25rem;color:var(--outline);font-family:var(--font-label)}
.author-card .foot .r{display:inline-flex;align-items:center;gap:.125rem;color:var(--primary);font-weight:600}

.spotlight{margin:1rem 0;padding:1rem;border-radius:var(--radius);background:var(--surface-container);border:1px solid rgba(220,193,183,.2);box-shadow:0 1px 2px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:.75rem}
.spotlight .r1,.spotlight .r2{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.spotlight .r1 > div{display:flex;align-items:center;gap:.5rem}
.spotlight h3{font-family:var(--font-body);font-size:.875rem;font-weight:600}
.spotlight .dotp{width:.625rem;height:.625rem;border-radius:50%;background:var(--primary);animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.4}}
.spotlight .count{font-size:.75rem;color:var(--secondary);background:rgba(199,236,206,.5);padding:.125rem .625rem;border-radius:999px;font-weight:500;white-space:nowrap}
.spotlight .r2{padding-top:.5rem;border-top:1px solid var(--surface-high);font-size:.75rem;color:var(--on-surface-variant)}
.spotlight .r2 > span{display:flex;align-items:center;gap:.375rem}
.cheer-author{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem 1rem;border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--surface-high);color:var(--on-surface-variant);transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.cheer-author:hover{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.cheer-author:active{transform:scale(.95)}
.cheer-author .ms{color:var(--primary);font-size:16px}
.cheer-author.on{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.cheer-author.on .ms{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}
.cheer-author b{color:var(--primary);font-family:ui-monospace,monospace;margin-left:.125rem}

.series-head{display:flex;align-items:center;justify-content:space-between;padding:0 .25rem}
.series-head .l{display:flex;align-items:center;gap:.375rem}
.series-head h2{font-size:1rem;font-weight:700}
.series-head .r{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--on-surface-variant)}
.series-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}
.series[hidden]{display:none}
.series{border-radius:var(--radius);overflow:hidden;background:var(--surface-container);border:1px solid rgba(220,193,183,.2);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:box-shadow .2s;display:flex;flex-direction:column}
.series:hover{box-shadow:0 6px 16px rgba(43,40,36,.1)}
.series-cover{position:relative;height:11rem;overflow:hidden;background:var(--surface-high)}
@media (min-width:640px){.series-cover{height:13rem}}
.series-cover img{width:100%;height:100%;object-fit:cover}
.series-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(51,48,44,.85),rgba(51,48,44,.3) 50%,transparent)}
.series-cover .tg{position:absolute;top:.75rem;left:.75rem;z-index:1;padding:.25rem .625rem;border-radius:999px;background:rgba(255,248,243,.9);color:var(--primary);font-size:.75rem;font-weight:600;display:flex;align-items:center;gap:.25rem}
.series-cover .bt{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;z-index:1;display:flex;align-items:center;justify-content:space-between;color:var(--inverse-on-surface);font-size:.75rem}
.series-cover .bt span{display:flex;align-items:center;gap:.25rem;background:rgba(51,48,44,.6);padding:.125rem .625rem;border-radius:999px}
.series-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
@media (min-width:640px){.series-body{padding:1.25rem}}
.series-body h3{font-size:1rem;font-weight:700}
.series-body > p{font-size:.8125rem;color:var(--on-surface-variant);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chapters{display:flex;flex-direction:column;gap:.375rem;margin-top:.5rem;padding-top:.25rem}
.chapter{display:flex;align-items:center;justify-content:space-between;padding:.5rem;border-radius:.75rem;background:var(--surface-low);transition:background .15s}
.chapter:hover{background:var(--surface-high)}
.chapter .l{display:flex;align-items:center;gap:.625rem;min-width:0}
.chapter .no{width:1.25rem;height:1.25rem;border-radius:50%;background:var(--primary-fixed);color:var(--on-primary-fixed);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chapter .t{font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.chapter:hover .t{color:var(--primary)}
.chapter .ms{color:var(--outline);transition:transform .15s}
.chapter:hover .ms{transform:translateX(2px)}
.series-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--surface-high);font-size:.75rem;color:var(--on-surface-variant)}
.series-foot span{display:flex;align-items:center;gap:.25rem}
.series-foot span .ms{color:var(--secondary);font-size:15px}
.series-foot a{display:flex;align-items:center;gap:.125rem;font-weight:600;color:var(--primary)}
.series-foot a:hover{text-decoration:underline}
.invite{margin-top:1.5rem;display:flex;align-items:flex-start;gap:.75rem;padding:1.25rem;border-radius:var(--radius);background:var(--surface-high);border:1px solid rgba(220,193,183,.3)}
.invite .ico{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--primary-fixed);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.invite h4{font-size:.9375rem;font-weight:600}
.invite p{font-size:.8125rem;color:var(--on-surface-variant);line-height:1.7;margin:.375rem 0 .5rem}
.invite .btn{padding:.5rem 1rem}

/* 8. WRITE ----------------------------------------------------------------- */
.autosave{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem;margin-bottom:1rem;border-radius:var(--radius);background:var(--surface-container);border:1px solid rgba(220,193,183,.3);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.autosave .l{display:flex;align-items:center;gap:.5rem;min-width:0;font-size:.75rem;color:var(--on-surface-variant)}
.autosave .l i{width:.625rem;height:.625rem;border-radius:50%;background:var(--secondary);animation:pulse 2s infinite;flex-shrink:0}
.autosave .r{display:flex;gap:.5rem;flex-shrink:0}
.btn-white{background:var(--surface);color:var(--on-surface);border:1px solid rgba(220,193,183,.3)}
.btn-white:hover{background:var(--surface-container)}
.form{display:flex;flex-direction:column;gap:1.25rem}
.field-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.field-head label{font-size:.75rem;font-weight:600;color:var(--on-surface-variant);letter-spacing:.05em}
.field-head span{font-size:11px;color:var(--outline)}
.field-head .t{color:var(--tertiary);font-weight:500}
.persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.persona-opt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:.625rem;border-radius:var(--radius);
  background:var(--surface-container);color:var(--on-surface-variant);border:1px solid rgba(220,193,183,.2);transition:.15s}
.persona-opt:hover{background:var(--surface-high)}
.persona-opt:active{transform:scale(.95)}
.persona-opt.selected{background:var(--primary-fixed);color:var(--on-primary-fixed);border-color:rgba(151,67,26,.3);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.persona-opt .ic{position:relative;width:2.5rem;height:2.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:.25rem}
.persona-opt .ck{display:none;position:absolute;right:-.25rem;bottom:-.25rem;width:1rem;height:1rem;border-radius:50%;background:var(--primary);color:#fff;align-items:center;justify-content:center}
.persona-opt .ck .ms{font-size:10px}
.persona-opt.selected .ck{display:flex}
.persona-opt b{font-size:.75rem;font-weight:700;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.persona-opt small{font-size:10px;opacity:.8;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill-sec{padding:.375rem .75rem;background:var(--surface-container);color:var(--on-surface-variant)}
.pill-sec.active{background:var(--secondary);color:var(--on-secondary);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.title-input{width:100%;background:transparent;border:0;padding:.25rem 0;font-family:var(--font-headline);font-size:1.375rem;font-weight:700;line-height:1.4;color:var(--on-surface)}
@media (min-width:640px){.title-input{font-size:1.625rem}}
.title-input::placeholder{color:var(--outline-variant)}
.title-input:focus{outline:0}
.title-bar{height:2px;width:4rem;background:var(--primary-fixed);border-radius:999px;margin-top:.375rem}
.editor-tools{position:sticky;top:var(--header-h);z-index:30;margin:0 -1rem;padding:.5rem 1rem;background:rgba(255,248,243,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.editor-tools-in{display:flex;flex-direction:column;gap:.5rem;padding:.625rem;border-radius:var(--radius);background:var(--surface-container);border:1px solid rgba(220,193,183,.3);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tools-r1{display:flex;align-items:center;justify-content:space-between;gap:.25rem;overflow-x:auto;padding-bottom:.125rem}
.tools-r1 .g{display:flex;gap:.25rem}
.fmt{width:2rem;height:2rem;border-radius:.5rem;background:var(--surface-low);display:flex;align-items:center;justify-content:center;transition:.15s}
.fmt:hover{background:var(--surface-high)}
.fmt:active{transform:scale(.9)}
.fmt .ms{font-size:18px}
.poem-toggle{display:flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:.75rem;font-size:.75rem;font-weight:500;background:var(--surface-high);color:var(--on-surface-variant);transition:.15s;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.poem-toggle:hover{background:var(--tertiary-fixed)}
.poem-toggle.on{background:var(--tertiary-container);color:var(--on-tertiary)}
.tools-r2{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.375rem .625rem;border-radius:.75rem;background:var(--surface-low);border:1px solid rgba(220,193,183,.15);font-size:.75rem;overflow-x:auto}
.tools-r2 .l{display:flex;align-items:center;gap:.375rem;font-weight:500;white-space:nowrap}
.tools-r2 .l .ms{color:var(--primary)}
.tools-r2 .g{display:flex;gap:.25rem}
.align-btn{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border-radius:.375rem;font-size:11px;font-weight:500;background:var(--surface-container);color:var(--on-surface-variant);white-space:nowrap;transition:.15s}
.align-btn .ms{font-size:14px}
.align-btn.active{background:var(--surface-highest);color:var(--on-surface);font-weight:700;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.canvas{display:flex;flex-direction:column;min-height:420px;padding:1rem;border-radius:var(--radius);background:var(--surface-lowest);border:1px solid rgba(220,193,183,.3);box-shadow:0 1px 2px rgba(0,0,0,.05)}
@media (min-width:640px){.canvas{padding:1.5rem}}
.canvas-head{display:flex;align-items:center;justify-content:space-between;padding:.375rem .75rem;margin-bottom:.75rem;border-radius:.75rem;background:var(--surface-low);border:1px solid rgba(220,193,183,.15);font-size:.75rem}
.canvas-head .l{display:flex;align-items:center;gap:.5rem;color:var(--on-surface-variant);font-weight:500}
.canvas-head .l .ms{color:var(--tertiary)}
.canvas-head .wc{color:var(--outline);font-family:var(--font-label)}
.canvas textarea{width:100%;background:transparent;border:0;resize:none;font-size:.875rem;line-height:1.9;color:var(--on-surface);font-family:var(--font-body)}
.canvas textarea:focus{outline:0}
.canvas textarea.p2{margin-top:.5rem}
.img-block{margin:.75rem 0;padding:.5rem;border-radius:var(--radius);background:var(--surface-container);border:1px solid rgba(220,193,183,.2);width:100%;transition:all .2s}
@media (min-width:640px){
  .img-block[data-align="float-left"]{width:50%;float:left;margin-right:.75rem;margin-bottom:.5rem}
  .img-block[data-align="float-right"]{width:50%;float:right;margin-left:.75rem;margin-bottom:.5rem}
}
.img-box{position:relative;width:100%;height:11rem;border-radius:.75rem;overflow:hidden;background:var(--surface-high)}
@media (min-width:640px){.img-box{height:14rem}}
.img-box img{width:100%;height:100%;object-fit:cover}
.img-box::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(51,48,44,.6),transparent 55%)}
.img-box .cap{position:absolute;left:.75rem;right:.75rem;bottom:.5rem;z-index:1;display:flex;align-items:center;justify-content:space-between;font-size:.75rem;color:#fff8f3}
.img-box .cap em{font-style:normal;background:rgba(51,48,44,.8);padding:.125rem .5rem;border-radius:999px;font-size:10px}
.img-sub{display:flex;align-items:center;justify-content:space-between;margin-top:.375rem;padding:0 .25rem}
.img-sub input{flex:1;min-width:0;margin-right:.5rem;background:transparent;border:0;color:var(--on-surface-variant);font-style:italic;font-size:11px}
.img-sub input:focus{outline:0}
.img-sub button{display:flex;align-items:center;gap:.25rem;color:var(--primary);font-size:.75rem;font-weight:500;flex-shrink:0}
.img-sub button:hover{text-decoration:underline}
.poem-edit{margin:1rem 0;padding:1rem;border-radius:var(--radius);background:var(--surface-low);border:1px solid rgba(220,193,183,.3);display:flex;flex-direction:column;align-items:center;text-align:center;clear:both}
.poem-edit[hidden]{display:none}
.poem-edit .ms{color:var(--primary);font-size:22px;margin-bottom:.25rem}
.canvas .poem-edit textarea{font-family:var(--font-headline);font-style:italic;text-align:center;line-height:2.1}
.poem-edit span.by{font-size:.75rem;color:var(--secondary);font-weight:500;margin-top:.25rem}
.canvas .hint{font-size:.75rem;color:var(--outline);font-style:italic;margin-top:.5rem;clear:both}
.settings{display:flex;flex-direction:column;gap:1rem;padding:1rem;border-radius:var(--radius);background:var(--surface-container);border:1px solid rgba(220,193,183,.3)}
.settings > .h{display:flex;align-items:center;gap:.5rem}
.settings > .h .ms{color:var(--primary)}
.settings h3{font-size:.9375rem;font-weight:600}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem;border-radius:.75rem;background:var(--surface-lowest);border:1px solid rgba(220,193,183,.2);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.setting-row .l{display:flex;align-items:flex-start;gap:.75rem}
.setting-row .ico{width:2rem;height:2rem;border-radius:50%;background:var(--primary-fixed);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:.125rem}
.setting-row b{display:block;font-size:.8125rem;font-weight:600}
.setting-row small{font-size:11px;color:var(--on-surface-variant)}
.switch{position:relative;display:inline-block;width:2.75rem;height:1.5rem;flex-shrink:0;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--surface-highest);transition:.2s}
.switch span::after{content:"";position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked + span{background:var(--primary)}
.switch input:checked + span::after{transform:translateX(1.25rem)}
.switch input:focus-visible + span{outline:2px solid var(--primary);outline-offset:2px}
.tag-label{font-size:.75rem;font-weight:500;color:var(--on-surface-variant);display:block;margin-bottom:.5rem}
.tag-box{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;padding:.625rem;min-height:44px;border-radius:.75rem;background:var(--surface-lowest);border:1px solid rgba(220,193,183,.2)}
.tag-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;border-radius:999px;background:var(--primary-fixed);color:var(--on-primary-fixed);font-size:.75rem;font-weight:500}
.tag-chip button{display:flex}
.tag-chip button:hover{color:#c0392b}
.tag-chip .ms{font-size:14px}
.tag-box input{flex:1;min-width:130px;background:transparent;border:0;padding:.25rem .5rem;font-size:.75rem}
.tag-box input:focus{outline:0}
.tip{display:flex;align-items:flex-start;gap:.625rem;padding:.875rem;border-radius:.75rem;background:var(--secondary-container);color:var(--on-secondary-container);border:1px solid rgba(199,236,206,.4)}
.tip .ms{color:var(--secondary);flex-shrink:0;margin-top:.125rem}
.tip b{display:block;font-size:.75rem;font-weight:600;color:var(--secondary)}
.tip p{font-size:.75rem;line-height:1.7;margin-top:.125rem;color:var(--on-secondary-fixed)}
.submit-row{display:flex;gap:.75rem;padding-top:.5rem}
.submit-row .btn{flex:1;padding:.75rem;font-size:.8125rem;font-weight:600}
.submit-row .btn .ms{font-size:20px}

/* 9. UTILITIES ------------------------------------------------------------- */
.hide{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* 10. WEBAPP (ส่วนที่เพิ่มตอนทำเป็น PHP) ---------------------------------- */
.muted{color:var(--on-surface-variant);font-size:.8125rem}
.persona-btn{text-decoration:none}
.av-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--primary-fixed);color:var(--on-primary-fixed);font-weight:700;font-size:.875rem}
.avatar-sm .av-initial{width:2rem;height:2rem}
.av-sm{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover}
.av-ph{background:var(--surface-high)}

/* ฟอร์ม / การ์ดเข้าสู่ระบบ */
.auth-card{display:flex;flex-direction:column;gap:.875rem;max-width:26rem;margin:1.5rem auto;padding:1.25rem;border-radius:var(--radius);background:var(--surface-lowest);
  border:1px solid rgba(220,193,183,.4);box-shadow:0 1px 3px rgba(0,0,0,.05)}
.auth-card h1,.auth-card h2{font-size:1.25rem}
.fld{display:flex;flex-direction:column;gap:.25rem;font-size:.8125rem}
.fld>span{font-weight:600;color:var(--on-surface-variant)}
.fld input,.fld textarea,.fld select,.guest-name-input,.inline-form input{width:100%;padding:.625rem .75rem;border-radius:.75rem;border:1px solid var(--outline-variant);background:var(--surface);color:var(--on-surface)}
.fld input[type=file]{padding:.4rem;background:transparent}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid rgba(151,67,26,.35);border-color:var(--primary)}
.form-error{padding:.75rem 1rem;border-radius:.75rem;background:#ffdad6;color:#93000a;font-size:.8125rem;margin:.75rem 0}
.btn-danger{background:#ba1a1a;color:#fff}
.btn-danger:hover{background:#93000a}
.check-line{display:flex;align-items:center;gap:.5rem;font-size:.75rem;margin-top:.5rem;color:var(--on-surface-variant)}
.inline-form{display:inline-flex;gap:.375rem;align-items:center;margin:0}
.inline-form input{padding:.4rem .6rem}

/* โหมดผู้ชม */
.mode-note{display:flex;align-items:flex-start;gap:.5rem;margin:.5rem 0 .75rem;padding:.625rem .875rem;border-radius:.75rem;font-size:.75rem;line-height:1.5}
.mode-note .ms{flex-shrink:0;margin-top:.05rem}
.mode-note a{text-decoration:underline;font-weight:600}
.mode-guest{background:var(--surface-container);color:var(--on-surface-variant)}
.mode-member{background:var(--secondary-container);color:var(--on-secondary-container)}
.as-user{display:flex;align-items:center;gap:.375rem;font-size:.75rem;color:var(--on-surface-variant)}
.as-user .ms{color:var(--secondary)}
.guest-name-input{font-size:.8125rem;background:var(--surface-lowest)}

/* แผงเจ้าของบทความ */
.owner-panel{margin:.5rem 0 1rem;padding:.875rem;border-radius:var(--radius);background:var(--primary-fixed);color:var(--on-primary-fixed);
  border:1px solid rgba(151,67,26,.25);display:flex;flex-direction:column;gap:.625rem}
.op-head{display:flex;align-items:center;gap:.5rem;font-size:.875rem;flex-wrap:wrap}
.op-head .ms{color:var(--primary)}
.op-stats{display:flex;gap:1rem;flex-wrap:wrap;font-size:.75rem}
.op-stats span{display:inline-flex;align-items:center;gap:.25rem}
.op-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.op-actions .btn{padding:.4rem .9rem;font-size:.75rem}

.c-del{margin-left:.375rem;color:var(--outline);vertical-align:middle}
.c-del:hover{color:#ba1a1a}
.comment .badge{margin-left:.375rem}
.tag-list{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:1rem}
.tag-list span{padding:.15rem .6rem;border-radius:999px;font-size:.75rem;background:var(--surface-container);color:var(--on-surface-variant)}
.fig-hero.full{margin-left:-1rem;margin-right:-1rem}
.fig-hero.full .img{border-radius:0}

/* Turnstile */
.ts-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts-box{min-height:0;display:flex;justify-content:center}

/* หน้าเขียน */
.tool-hint{font-size:.6875rem;color:var(--outline);padding:.25rem .25rem 0}
.img-box.empty{min-height:7rem;display:flex;align-items:center;justify-content:center;background:var(--surface-high);border-radius:.75rem}
.img-empty{display:flex;flex-direction:column;align-items:center;gap:.25rem;color:var(--outline);font-size:.75rem;padding:1rem}
.img-box img[hidden],.img-empty[hidden],.poem-edit[hidden]{display:none}
.settings select,.settings textarea,.settings input[type=text],.settings input[type=number]{width:100%;padding:.55rem .75rem;border-radius:.75rem;border:1px solid var(--outline-variant);background:var(--surface-lowest)}
#write-form textarea{width:100%}

/* บัญชี / แอดมิน */
details.pen,details.pw{margin:.5rem 0;border-radius:var(--radius);background:var(--surface-low);border:1px solid rgba(220,193,183,.4);padding:.25rem .75rem}
details.pen>summary,details.pw>summary{cursor:pointer;padding:.625rem 0;font-weight:600;font-size:.875rem}
.user-list{display:flex;flex-direction:column;gap:.5rem}
.user-row{display:flex;flex-direction:column;gap:.5rem;padding:.75rem;border-radius:var(--radius);background:var(--surface-lowest);border:1px solid rgba(220,193,183,.4);font-size:.875rem}
.user-row small{color:var(--on-surface-variant)}
.user-row .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.menu-links{display:flex;flex-direction:column;gap:.25rem;margin-top:.5rem}
.menu-links a,.menu-links button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.625rem .75rem;border-radius:.75rem;background:var(--surface-low);font-size:.875rem;text-align:left}
.menu-links a:hover,.menu-links button:hover{background:var(--surface-container)}
.menu-links form{margin:0}
.persona-item{text-decoration:none;color:inherit}
.pager{display:flex;align-items:center;justify-content:space-between;margin:1rem 0;font-size:.8125rem;color:var(--on-surface-variant)}
.pager a{padding:.4rem .9rem;border-radius:999px;background:var(--surface-container);font-weight:600}
.spotlight .bio{font-size:.8125rem;color:var(--on-surface-variant);padding:.25rem 0 .5rem}
a.pill{text-decoration:none}

/* โหมดอ่านกลางคืน/ซีเปีย สำหรับกล่องใหม่ */
.reader[data-theme="night"] :is(.mode-guest,.tag-list span){background:#2d2925;color:#c9bcb2}
.reader[data-theme="night"] .mode-member{background:#2c3a31;color:#c4e9cb}
.reader[data-theme="night"] .comment-form :is(.guest-name-input,textarea){background:#23201d;color:#f7efe9;border-color:#3d3731}
.reader[data-theme="sepia"] .tag-list span{background:#ece4d0}
.owner-panel,.mode-note{margin-left:1rem;margin-right:1rem}
.cat-form{display:flex;flex-direction:column;gap:.5rem}
.cat-form input[type=text],.cat-form input[type=number]{padding:.5rem .7rem;border-radius:.75rem;border:1px solid var(--outline-variant);background:var(--surface)}

/* ===== v2: บล็อกเนื้อหา (quote / code / poem copy) ===== */
.poem-copy,.code-copy{display:inline-flex;align-items:center;gap:.375rem;margin-top:.75rem;padding:.35rem .8rem;border-radius:999px;background:var(--surface);border:1px solid var(--outline-variant);font-size:.75rem;color:var(--on-surface-variant);cursor:pointer}
.poem-copy:hover,.code-copy:hover{background:var(--surface-container)}
.quote-block{margin:1.25rem 0;padding:1rem 1.25rem 1rem 1.5rem;border-left:4px solid var(--tertiary);background:var(--tertiary-fixed);border-radius:0 var(--radius) var(--radius) 0;color:var(--on-tertiary-fixed);position:relative}
.quote-block::before{content:"\201C";position:absolute;right:.75rem;top:-.25rem;font-family:var(--font-headline);font-size:4rem;line-height:1;color:rgba(125,83,21,.25)}
.quote-block blockquote{margin:0;font-family:var(--font-headline);font-size:1.0625rem;line-height:1.9}
.quote-block blockquote p{text-align:left}
.quote-block figcaption{margin-top:.5rem;font-style:normal;font-size:.8125rem;color:var(--tertiary);font-weight:600;text-align:right}
.reader[data-theme="night"] .quote-block{background:#2f2616;color:#f1dfc2;border-color:#c99a52}
.reader[data-theme="sepia"] .quote-block{background:#efe0bd}
.code-block{margin:1.25rem 0;border-radius:.75rem;overflow:hidden;background:#1f1d1a;color:#f2e9e1;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:.4rem .75rem;background:#2b2825;font-size:.75rem}
.code-lang{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e5b894;text-transform:lowercase;letter-spacing:.04em}
.code-head .code-copy{margin:0;background:transparent;border-color:#4a443f;color:#d8cdc4}
.code-head .code-copy:hover{background:#3a3633}
.code-block pre{margin:0;padding:1rem;overflow-x:auto;font-size:.8125rem;line-height:1.65;tab-size:2}
.code-block code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;white-space:pre}

/* ===== v2: หน้าเขียน — ตัวแก้ไขบล็อก ===== */
.blocks{display:flex;flex-direction:column;gap:.75rem;margin:.75rem 0 1rem}
.blocks.is-empty::before{content:"ยังไม่มีเนื้อหา — กดปุ่มด้านบนเพื่อเพิ่มข้อความ บทกวี คำคม โค้ด หรือรูปภาพ";display:block;padding:1.25rem;text-align:center;font-size:.8125rem;color:var(--outline);border:1px dashed var(--outline-variant);border-radius:var(--radius)}
.blk{border-radius:var(--radius);background:var(--surface-lowest);border:1px solid rgba(220,193,183,.5);overflow:hidden}
.blk-head{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;font-size:.75rem;background:var(--surface-low);color:var(--on-surface-variant)}
.blk-head .ms{font-size:16px}
.blk-head b{font-weight:600}
.blk-act{margin-left:auto;display:flex;gap:.125rem}
.blk-act button{width:1.75rem;height:1.75rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.5rem;color:var(--on-surface-variant)}
.blk-act button:hover:not(:disabled){background:var(--surface-high)}
.blk-act button:disabled{opacity:.3;cursor:default}
.blk-act button[data-del]:hover{background:#ffdad6;color:#93000a}
.blk-act .ms{font-size:18px}
.blk-body{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.blk-body textarea,.blk-body input[type=text]{width:100%;padding:.55rem .75rem;border-radius:.75rem;border:1px solid var(--outline-variant);background:var(--surface);font:inherit;font-size:.9375rem}
.blk-ta{resize:vertical;line-height:1.9;min-height:5rem}
.blk-ta.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;font-size:.8125rem!important;background:#1f1d1a!important;color:#f2e9e1;line-height:1.6;white-space:pre;overflow-x:auto}
.poem-ta{text-align:center;font-family:var(--font-headline)!important;font-style:italic}
.blk-poem{border-left:4px solid var(--primary)}
.blk-quote{border-left:4px solid var(--tertiary)}
.blk-code{border-left:4px solid #4a443f}
.blk-image{border-left:4px solid var(--secondary)}
.blk-text{border-left:4px solid transparent}
.blk-img{display:flex;align-items:center;justify-content:center;min-height:7rem;border-radius:.75rem;background:var(--surface-high);overflow:hidden}
.blk-img img{display:block;max-width:100%;max-height:22rem;width:auto;height:auto}
.blk-img img[hidden]{display:none}
.blk-body .img-sub{margin:0;padding:0}
.blk-body .img-sub input{margin-right:.5rem}
.align-row{display:flex;gap:.375rem;flex-wrap:wrap}
.align-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem .65rem;border-radius:999px;font-size:.75rem;background:var(--surface-container);color:var(--on-surface-variant);border:1px solid transparent}
.align-btn .ms{font-size:16px}
.align-btn.active{background:var(--primary-fixed);color:var(--on-primary-fixed);border-color:var(--primary)}
.add-row{display:flex;gap:.375rem;flex-wrap:wrap}
.add-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .8rem;border-radius:999px;background:var(--surface-container);font-size:.8125rem;font-weight:500}
.add-btn .ms{font-size:18px;color:var(--primary)}
.add-btn:hover:not(:disabled){background:var(--primary-fixed)}
.add-btn:disabled{opacity:.4;cursor:not-allowed}
.insert-count{margin-left:auto;font-size:.75rem;font-weight:600;padding:.2rem .65rem;border-radius:999px;background:var(--surface-container);color:var(--on-surface-variant);align-self:center}
.insert-count.full{background:#ffdad6;color:#93000a}
.tool-hint{font-size:11px;color:var(--outline);margin-top:.375rem}
.cover-box{margin:.75rem 0}
.cover-preview{display:flex;align-items:center;justify-content:center;min-height:7rem;border-radius:.75rem;background:var(--surface-high);overflow:hidden}
.cover-preview img{display:block;max-width:100%;max-height:18rem;width:auto;height:auto}
.cover-preview img[hidden]{display:none}

/* ===== v2: หน้ารวมงานของนักเขียน ===== */
.author-hero{display:flex;gap:1rem;align-items:flex-start;margin:1rem 0 0;padding:1.25rem;border-radius:var(--radius);background:var(--surface-low);border:1px solid rgba(220,193,183,.4)}
.author-hero .av-wrap{position:relative;flex-shrink:0;width:4.5rem;height:4.5rem}
.author-hero .av-wrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--surface-high)}
.author-hero .role-ico{position:absolute;right:-.25rem;bottom:-.25rem;width:1.5rem;height:1.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid var(--surface-low)}
.author-hero .role-ico .ms{font-size:14px}
.ah-body{min-width:0;flex:1}
.ah-body h1{font-size:1.375rem}
.ah-body .role{font-size:.8125rem;color:var(--on-surface-variant)}
.ah-body .quote{margin:.5rem 0 0;font-family:var(--font-headline);font-style:italic;font-size:.875rem;color:var(--secondary)}
.ah-stats{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.5rem;font-size:.75rem;color:var(--on-surface-variant)}
.ah-stats>span{display:inline-flex;align-items:center;gap:.25rem}
.author-hero .bio{margin:.5rem 0 0;font-size:.8125rem;line-height:1.8;color:var(--on-surface-variant)}
.author-hero .tags{display:flex;gap:.375rem;flex-wrap:wrap;margin-top:.5rem}
.author-hero .tags span{font-size:11px;padding:.1rem .6rem;border-radius:999px;background:var(--surface-container)}

/* ===== v2: หน้าจัดการงานเขียน ===== */
.manage-bar{display:flex;flex-direction:column;gap:.5rem;margin:.5rem 0 1rem}
.mb-right{display:flex;gap:.5rem;flex-wrap:wrap}
.manage-row{flex-direction:column}
.manage-row .mr-title{font-weight:600;font-size:.9375rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.manage-row .mr-title a{text-decoration:none;color:var(--on-surface)}
.manage-row .mr-title a:hover{color:var(--primary)}
.manage-row small{display:block}
.mr-stats{display:flex!important;align-items:center;gap:.5rem;margin-top:.25rem}
.mr-stats .ms{font-size:14px;vertical-align:-2px}
.mr-warn{color:#93000a!important;margin-top:.25rem}
.badge-danger{background:#ffdad6;color:#93000a}
.badge-warn{background:var(--tertiary-fixed);color:var(--on-tertiary-fixed)}
.op-warn{padding:.75rem 1rem;border-radius:.75rem;background:#ffdad6;color:#93000a;font-size:.8125rem;margin:.5rem 1rem}
@media (min-width:640px){
  .manage-bar{flex-direction:row;align-items:center;justify-content:space-between}
  .manage-row{flex-direction:row;align-items:center;justify-content:space-between}
  .manage-row .acts{justify-content:flex-end;flex-shrink:0}
}