/* PenCerita Launch UI Layer — final spacing, responsive and theme consistency */
:root{
  --launch-bg:#f4f8fc;
  --launch-surface:#fff;
  --launch-surface-soft:#f8fbff;
  --launch-border:#dfe8f3;
  --launch-text:#15253c;
  --launch-muted:#708198;
  --launch-brand:#2f80ed;
  --launch-brand-soft:#edf5ff;
  --launch-success:#2d8b67;
  --launch-warning:#a87620;
  --launch-danger:#b04b57;
  --launch-radius:18px;
  --launch-shadow:0 10px 28px rgba(32,72,116,.06);
}

/* Global rhythm */
.main-content{padding-top:28px!important}
.page-heading{margin-bottom:22px!important}
.panel,.card,.hero,.ck-card{overflow:visible}
.panel + .panel,.card + .card{margin-top:16px}
.section-head + .panel{margin-top:12px}
.section-head p,.page-heading p{line-height:1.7}

/* Forms: every form receives the same breathing room */
.field,.wallet-field,.form-group{gap:8px!important}
.field label,.wallet-field label,.form-group label,
label{display:block;line-height:1.35}
input:not([type="checkbox"]):not([type="radio"]),
select,textarea,
.search-field,.searchbar input,.filter input,.filter select{
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--launch-border);
  background:var(--launch-surface);
  color:var(--launch-text);
  padding:10px 12px;
  box-shadow:none;
}
textarea{min-height:120px;line-height:1.55;resize:vertical}
input:focus,select:focus,textarea:focus,.search-field:focus-within{
  border-color:#b9d5f7;
  box-shadow:0 0 0 4px rgba(47,128,237,.08);
  outline:0;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--launch-brand)}
.form-grid{gap:18px!important}

/* Tables */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:12px 14px;border-bottom:1px solid var(--launch-border);vertical-align:middle}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#6d8097;background:var(--launch-surface-soft);text-align:left}
tbody tr:last-child td{border-bottom:0}
.table-wrap,.admin-table-wrap,.responsive-table{overflow:auto;border:1px solid var(--launch-border);border-radius:15px;background:var(--launch-surface)}

/* Cards and action groups */
.actions,.creator-book-actions,.chapter-actions{gap:8px!important}
.btn{min-height:42px;border-radius:12px}
.btn + .btn{margin-left:0}
.badge,.status-pill,.status-chip{white-space:nowrap}

/* Avoid compressed columns */
.grid-2,.settings-columns,.creator-dashboard-grid,.reader-layout,.admin-live-grid{gap:18px!important}
.story-grid,.creator-book-grid,.method-grid,.package-grid{gap:16px!important}

/* Empty states */
.empty-inline,.wallet-empty{padding:28px 18px!important;line-height:1.65}

/* Reader */
.reader-layout{align-items:start}
.reader-aside{position:sticky;top:92px}
.comments-section,.comment-thread,.inline-comments{margin-top:18px}

/* Creator */
.creator-content .panel{min-width:0}
.creator-book-card,.chapter-manager .panel{overflow:hidden}
.creator-book-copy,.chapter-main{min-width:0}
.creator-book-copy h3,.chapter-main h3{overflow-wrap:anywhere}

/* Admin */
.admin-app .panel{min-width:0}
.admin-app .filter-bar,.admin-app .searchbar{flex-wrap:wrap}
.admin-app .filter-bar > *, .admin-app .searchbar > *{min-width:0}

/* Wallet / top up — specifically fixes tight groups in the screenshot */
body[data-view="reader/wallet"] .wallet-page{gap:18px!important}
body[data-view="reader/wallet"] .wallet-panel{padding:22px!important}
body[data-view="reader/wallet"] .wallet-section-head{margin-bottom:16px!important}
body[data-view="reader/wallet"] .wallet-section-head h2,
body[data-view="reader/wallet"] .wallet-section-head h3{margin:4px 0 0!important;line-height:1.2}
body[data-view="reader/wallet"] .wallet-checkout-options{padding:16px!important;border-radius:16px!important;margin-bottom:16px!important;gap:14px!important}
body[data-view="reader/wallet"] .wallet-payment-methods{gap:14px!important}
body[data-view="reader/wallet"] .wallet-field-help{margin-top:4px!important;line-height:1.5}
body[data-view="reader/wallet"] .wallet-voucher-panel,
body[data-view="reader/wallet"] .wallet-topup-panel{margin-top:0!important}
body[data-view="reader/wallet"] .wallet-voucher-form{gap:12px!important;align-items:end}
body[data-view="reader/wallet"] .wallet-package-grid{margin-top:16px!important;gap:12px!important}
body[data-view="reader/wallet"] .wallet-package-card{min-width:0;padding:16px!important}
body[data-view="reader/wallet"] .wallet-package-card .btn{margin-top:12px!important}
body[data-view="reader/wallet"] .ipaymu-modal-card{gap:12px!important}
body[data-view="reader/wallet"] .ipaymu-modal-card .ipaymu-summary-grid,
body[data-view="reader/wallet"] .ipaymu-modal-card .ipaymu-payment-meta{margin-top:12px!important}
body[data-view="reader/wallet"] .ipaymu-instruction-details{margin-top:12px!important}

/* Daily missions: all visible missions, capped only by total reward */
body[data-view="reader/missions"] .mission-note{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 16px!important;flex-wrap:wrap;padding:14px 16px!important}
body[data-view="reader/missions"] .mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body[data-view="reader/missions"] .mission-card{min-width:0}
body[data-view="reader/missions"] .mission-card h2{overflow-wrap:anywhere}

/* Responsive: the page remains comfortably readable without giant cards */
@media(max-width:1100px){
  .main-content{padding-left:18px!important;padding-right:18px!important}
  .story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body[data-view="reader/missions"] .mission-grid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .page-heading h1{font-size:32px!important}
  .form-grid,.grid-2,.settings-columns,.creator-dashboard-grid,.reader-layout,.admin-live-grid{grid-template-columns:1fr!important}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reader-aside{position:static;grid-template-columns:1fr!important}
  .filter-bar,.searchbar{flex-direction:column;align-items:stretch}
  .wallet-payment-methods{grid-template-columns:1fr!important}
  body[data-view="reader/wallet"] .wallet-voucher-form{grid-template-columns:1fr!important;align-items:stretch}
}
@media(max-width:560px){
  .main-content{padding:20px 12px 78px!important}
  .page-heading{margin-bottom:18px!important}
  .page-heading h1{font-size:28px!important}
  .panel{padding:16px!important;border-radius:16px!important}
  .story-grid,.method-grid,.package-grid{grid-template-columns:1fr!important}
  .btn{width:auto;min-width:0}
  .actions{align-items:stretch}
  .actions .btn{flex:1 1 auto}
  body[data-view="reader/wallet"] .wallet-panel{padding:16px!important}
  body[data-view="reader/wallet"] .wallet-package-card{padding:14px!important}
  body[data-view="reader/wallet"] .ipaymu-modal{width:calc(100vw - 12px)!important}
  body[data-view="reader/wallet"] .ipaymu-modal-card{max-height:calc(100dvh - 12px)!important;padding:16px!important}
  body[data-view="reader/wallet"] .ipaymu-qr-frame{width:min(100%,300px)!important;height:min(300px,42dvh)!important;min-height:230px!important}
}

/* Dark mode contract */
html[data-theme="dark"]{
  --launch-bg:#09111d;
  --launch-surface:#101d2d;
  --launch-surface-soft:#122238;
  --launch-border:#263a53;
  --launch-text:#eff5fb;
  --launch-muted:#97a9bd;
  --launch-brand-soft:#153554;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .ck-card,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .admin-table-wrap,
html[data-theme="dark"] .responsive-table{
  background:var(--launch-surface)!important;
  border-color:var(--launch-border)!important;
  box-shadow:none!important;
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .search-field,
html[data-theme="dark"] .searchbar input,
html[data-theme="dark"] .filter input,
html[data-theme="dark"] .filter select{
  background:#0b1727!important;
  color:var(--launch-text)!important;
  border-color:var(--launch-border)!important;
}
html[data-theme="dark"] th{background:#122238!important;color:#aab9ca!important}
html[data-theme="dark"] td{border-color:var(--launch-border)!important}
html[data-theme="dark"] .wallet-checkout-options,
html[data-theme="dark"] .ipaymu-qr-box,
html[data-theme="dark"] .ipaymu-instruction-details{
  background:#0d1a2a!important;border-color:var(--launch-border)!important
}
html[data-theme="dark"] .wallet-package-price,
html[data-theme="dark"] .wallet-package-name,
html[data-theme="dark"] .wallet-package-coins strong,
html[data-theme="dark"] .wallet-section-head h2,
html[data-theme="dark"] .wallet-section-head h3{color:var(--launch-text)!important}
html[data-theme="dark"] .wallet-field-help,
html[data-theme="dark"] .wallet-subtitle,
html[data-theme="dark"] .ipaymu-subtitle,
html[data-theme="dark"] .ipaymu-note{color:var(--launch-muted)!important}

/* Prevent accidental horizontal overflow across the whole product */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,iframe{max-width:100%}
button,.btn,input,select,textarea{max-width:100%}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* SEARCH FRAME FIX — single field, no nested/double frame */
.topbar .global-search{height:42px!important;display:flex!important;align-items:center!important;padding:0 12px!important;border:1px solid var(--ck-line,#dce6f2)!important;border-radius:13px!important;background:var(--ck-input,#f6f9fd)!important;box-shadow:none!important;overflow:hidden!important;gap:8px!important}
.topbar .global-search>span{display:grid!important;place-items:center!important;flex:0 0 auto!important;width:18px!important;height:18px!important}
.topbar .global-search input{height:100%!important;width:100%!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;outline:0!important;background:transparent!important;box-shadow:none!important}
body[data-view="reader/search"] .search-hero-panel{gap:10px!important}
body[data-view="reader/search"] .search-hero-field input{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:760px){.topbar .global-search{width:auto!important;max-width:none!important;flex:1 1 auto!important}.search-hero-panel{grid-template-columns:1fr!important;gap:10px!important}.search-hero-panel select,.search-hero-panel .btn{width:100%!important}.search-toolbar{flex-direction:column!important;gap:12px!important}.search-chips{justify-content:flex-start!important}}

/* Verified badge image — use the supplied Pencerita verification mark */
.verified,.verified-badge,.lb-verified,.creator-profile-verified,.creator-profile__verified{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:url('/assets/brand-verified.png') center/contain no-repeat!important;color:transparent!important;font-size:0!important;vertical-align:middle!important;flex:0 0 auto!important;border:0!important}
.verified,.verified-badge{width:18px!important;height:18px!important}
.lb-verified{width:19px!important;height:19px!important}
.creator-profile-verified{width:23px!important;height:23px!important}
.creator-profile__verified{width:20px!important;height:20px!important}

/* Home story shelves: explain horizontal scrolling without adding another card */
body[data-view="reader/home"] .home-section:has(.story-grid) .section-head{flex-wrap:wrap}
body[data-view="reader/home"] .home-section:has(.story-grid) .section-head::after{content:'Geser ke samping untuk melihat lebih banyak →';font-size:11px;font-weight:700;color:var(--ck-muted,#70849d);margin-left:auto;white-space:nowrap}
@media(max-width:760px){body[data-view="reader/home"] .home-section:has(.story-grid) .section-head::after{width:100%;margin-left:0;margin-top:2px}}
html[lang="en"] body[data-view="reader/home"] .home-section:has(.story-grid) .section-head::after{content:'Swipe sideways to see more →'}