/* ============================================================
   PORTAIL COMICS — style.css
   ============================================================ */
:root {
  --bg1:#0d0d15;--bg2:#13131e;--bg3:#1b1b28;--bg4:#23233a;
  --acc:#e8962a;--acc2:#c07818;--acc3:#f0aa44;
  --txt1:#e8e8f2;--txt2:#9898b0;--txt3:#55556a;
  --brd:rgba(255,255,255,.07);--brd2:rgba(255,255,255,.12);
  --shadow:0 4px 24px rgba(0,0,0,.5);
  --rad:12px;--rad-sm:8px;--rad-xs:6px;
  --cw:155px;--ch:237px;--hdr:60px;--nav:48px;--trans:.18s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{background:var(--bg1);color:var(--txt1);font-family:system-ui,-apple-system,sans-serif;min-height:100vh;overflow-x:hidden}
img{display:block;max-width:100%}a{color:var(--acc);text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit;background:none}ul{list-style:none}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:3px}

/* LANDING */
.landing-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}
.landing-bg{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(232,150,42,.12) 0%,transparent 70%)}
.landing-content{position:relative;z-index:1;text-align:center;padding:2rem}
.landing-icon{font-size:4rem;margin-bottom:1.5rem}
.landing-title{font-size:clamp(2.2rem,6vw,4rem);font-weight:900;letter-spacing:-.02em;background:linear-gradient(135deg,var(--txt1) 0%,var(--acc) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.75rem}
.landing-subtitle{color:var(--txt2);font-size:1.1rem;margin-bottom:3rem}
.btn-enter{display:inline-flex;align-items:center;gap:.6rem;background:var(--acc);color:#fff;font-size:1.1rem;font-weight:700;padding:.9rem 3rem;border-radius:50px;letter-spacing:.08em;transition:transform var(--trans),box-shadow var(--trans),background var(--trans);box-shadow:0 4px 32px rgba(232,150,42,.35)}
.btn-enter:hover{background:var(--acc3);transform:translateY(-2px);box-shadow:0 8px 40px rgba(232,150,42,.5)}
.landing-stats{margin-top:3rem;display:flex;gap:2rem;justify-content:center;color:var(--txt3);font-size:.85rem}
.landing-stat b{color:var(--txt2);font-weight:600}

/* AUTH MODAL */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.auth-card{background:var(--bg3);border:1px solid var(--brd2);border-radius:var(--rad);padding:2.5rem;width:min(360px,92vw);text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.7);animation:slideUp .25s ease}
.auth-card h2{font-size:1.4rem;margin-bottom:.4rem}
.auth-card p{color:var(--txt2);font-size:.9rem;margin-bottom:1.75rem}
.auth-input{width:100%;padding:.85rem 1.1rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);background:var(--bg4);font-size:1.4rem;letter-spacing:.3em;text-align:center;outline:none;transition:border-color var(--trans);color:var(--txt1)}
.auth-input:focus{border-color:var(--acc)}
.auth-error{color:#f87171;font-size:.85rem;min-height:1.2em;margin:.6rem 0}
.btn-primary{width:100%;padding:.85rem;border-radius:var(--rad-sm);background:var(--acc);color:#fff;font-size:1rem;font-weight:700;transition:background var(--trans),transform var(--trans);margin-top:.25rem}
.btn-primary:hover{background:var(--acc3);transform:translateY(-1px)}
.btn-secondary{padding:.6rem 1.2rem;border-radius:var(--rad-sm);font-size:.875rem;font-weight:600;border:1.5px solid var(--brd2);color:var(--txt2);transition:border-color var(--trans),color var(--trans)}
.btn-secondary:hover{border-color:var(--acc);color:var(--acc)}

/* APP LAYOUT */
.app-header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hdr);background:var(--bg2);border-bottom:1px solid var(--brd);display:flex;align-items:center;gap:1rem;padding:0 1.25rem}
.app-logo{font-size:1.15rem;font-weight:800;white-space:nowrap;flex-shrink:0}
.app-logo span{color:var(--acc)}
.search-wrap{flex:1;max-width:460px;position:relative;display:flex;align-items:center}
.search-input{width:100%;padding:.55rem .55rem .55rem 2.4rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);background:var(--bg4);color:var(--txt1);font-size:.9rem;outline:none;transition:border-color var(--trans)}
.search-input:focus{border-color:var(--acc)}
.search-icon{position:absolute;left:.7rem;color:var(--txt3);pointer-events:none}
.search-clear{position:absolute;right:.7rem;color:var(--txt3);font-size:.8rem;cursor:pointer;display:none}
.search-clear.vis{display:block}
.hdr-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;flex-shrink:0}
.icon-btn{width:36px;height:36px;border-radius:var(--rad-sm);display:flex;align-items:center;justify-content:center;color:var(--txt2);transition:background var(--trans),color var(--trans);font-size:1.1rem}
.icon-btn:hover{background:var(--bg4);color:var(--txt1)}

/* TABS */
.tabs-bar{position:fixed;top:var(--hdr);left:0;right:0;z-index:99;height:var(--nav);background:var(--bg2);border-bottom:1px solid var(--brd);display:flex;align-items:center;padding:0 1rem;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.tabs-bar::-webkit-scrollbar{display:none}
.tab-btn{flex-shrink:0;padding:.4rem .9rem;border-radius:var(--rad-sm);font-size:.82rem;font-weight:600;color:var(--txt2);transition:background var(--trans),color var(--trans);white-space:nowrap}
.tab-btn:hover{background:var(--bg4);color:var(--txt1)}
.tab-btn.active{background:var(--acc);color:#fff}

/* BODY */
.app-body{padding-top:calc(var(--hdr) + var(--nav));min-height:100vh}
.page{display:none}.page.active{display:block}

/* FORMAT NAV */
.format-nav{display:flex;gap:.5rem;padding:1rem 1.25rem .5rem;position:sticky;top:calc(var(--hdr)+var(--nav));z-index:50;background:var(--bg1);border-bottom:1px solid var(--brd);flex-wrap:wrap}
.fmt-anchor{padding:.35rem .85rem;border-radius:50px;font-size:.8rem;font-weight:700;border:1.5px solid var(--brd2);color:var(--txt2);transition:all var(--trans)}
.fmt-anchor[data-fmt="tpb"]:hover,.fmt-anchor[data-fmt="tpb"].cur{background:#2563eb22;border-color:#3b82f6;color:#60a5fa}
.fmt-anchor[data-fmt="omnibus"]:hover,.fmt-anchor[data-fmt="omnibus"].cur{background:#7c3aed22;border-color:#8b5cf6;color:#a78bfa}
.fmt-anchor[data-fmt="issue"]:hover,.fmt-anchor[data-fmt="issue"].cur{background:#05966922;border-color:#10b981;color:#34d399}
.fmt-anchor[data-fmt="kiosque"]:hover,.fmt-anchor[data-fmt="kiosque"].cur{background:#b4530022;border-color:#f97316;color:#fb923c}

/* SECTIONS */
.format-section{padding:1.5rem 1.25rem 2.5rem}
.section-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-title{font-size:1.35rem;font-weight:800;display:flex;align-items:center;gap:.5rem}
.fmt-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.fmt-dot-tpb{background:#3b82f6}.fmt-dot-omnibus{background:#8b5cf6}.fmt-dot-issue{background:#10b981}.fmt-dot-kiosque{background:#f97316}
.section-count{font-size:.8rem;color:var(--txt3);background:var(--bg3);border-radius:50px;padding:.15rem .6rem}
.section-tools{display:flex;gap:.5rem;align-items:center;margin-left:auto;flex-wrap:wrap}
.arc-toggle{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--txt2);cursor:pointer;padding:.35rem .75rem;border-radius:50px;border:1.5px solid var(--brd2);transition:all var(--trans)}
.arc-toggle input{accent-color:var(--acc)}
.arc-toggle:hover{border-color:var(--acc);color:var(--txt1)}
.universe-pills{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem}
.uni-pill{padding:.3rem .75rem;border-radius:50px;font-size:.78rem;font-weight:600;border:1.5px solid var(--brd2);color:var(--txt3);cursor:pointer;transition:all var(--trans)}
.uni-pill:hover{border-color:var(--acc);color:var(--acc)}
.uni-pill.active{background:var(--acc);border-color:var(--acc);color:#fff}

/* CARDS */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cw),1fr));gap:1rem}
.comic-card{background:var(--bg3);border-radius:var(--rad);overflow:hidden;border:1px solid var(--brd);cursor:pointer;position:relative;transition:transform var(--trans),box-shadow var(--trans),border-color var(--trans)}
.comic-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 36px rgba(0,0,0,.5);border-color:var(--brd2)}
.card-cover{width:100%;aspect-ratio:300/459;object-fit:cover;background:var(--bg4)}
.card-cover-placeholder{width:100%;aspect-ratio:300/459;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--txt3)}
.card-body{padding:.6rem .7rem .75rem}
.card-series{font-size:.72rem;color:var(--acc);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.15rem}
.card-title{font-size:.78rem;color:var(--txt1);font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.card-meta{font-size:.7rem;color:var(--txt3);margin-top:.2rem}
.card-stars{display:flex;gap:2px;margin-top:.3rem}
.star{font-size:.75rem;color:var(--txt3);cursor:pointer;transition:color var(--trans)}
.star.on{color:#facc15}

/* ARC GROUPS */
.arc-group{margin-bottom:2rem}
.arc-group-header{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;background:var(--bg3);border-radius:var(--rad-sm);margin-bottom:.75rem;border-left:3px solid var(--acc)}
.arc-group-name{font-size:.9rem;font-weight:700}
.arc-group-count{font-size:.75rem;color:var(--txt3)}

/* LOAD MORE */
.load-more-wrap{text-align:center;margin-top:1.5rem}
.btn-load-more{padding:.6rem 1.75rem;border-radius:50px;border:1.5px solid var(--brd2);color:var(--txt2);font-size:.85rem;font-weight:600;transition:all var(--trans)}
.btn-load-more:hover{border-color:var(--acc);color:var(--acc)}

/* EMPTY / LOADING */
.empty-state{text-align:center;padding:4rem 1rem;color:var(--txt3)}
.empty-state .empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.5}
.empty-state p{font-size:.9rem}
.spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--brd2);border-top-color:var(--acc);border-radius:50%;animation:spin .7s linear infinite}
.loading-wrap{display:flex;align-items:center;justify-content:center;padding:3rem;gap:1rem;color:var(--txt3)}

/* TABS CONTENT */
.az-nav{display:flex;flex-wrap:wrap;gap:.3rem;padding:1rem 1.25rem .5rem}
.az-btn{width:32px;height:32px;border-radius:var(--rad-xs);font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--brd);color:var(--txt3);transition:all var(--trans)}
.az-btn:hover{border-color:var(--acc);color:var(--acc)}
.az-btn.active{background:var(--acc);border-color:var(--acc);color:#fff}
.az-btn.empty{opacity:.3;pointer-events:none}

.series-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;padding:1rem 1.25rem}
.series-card{background:var(--bg3);border-radius:var(--rad);overflow:hidden;border:1px solid var(--brd);cursor:pointer;transition:transform var(--trans),border-color var(--trans)}
.series-card:hover{transform:translateY(-3px);border-color:var(--brd2)}
.series-cover{width:100%;aspect-ratio:300/459;object-fit:cover;background:var(--bg4)}
.series-info{padding:.6rem .7rem}
.series-name{font-size:.78rem;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.series-meta{font-size:.7rem;color:var(--txt3);margin-top:.15rem}

.people-search-wrap{padding:1rem 1.25rem .5rem}
.people-search{width:100%;max-width:360px;padding:.6rem 1rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);background:var(--bg3);outline:none;transition:border-color var(--trans)}
.people-search:focus{border-color:var(--acc)}
.people-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.5rem;padding:.5rem 1.25rem 1.5rem}
.person-item{display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;background:var(--bg3);border-radius:var(--rad-sm);border:1px solid var(--brd);cursor:pointer;transition:all var(--trans)}
.person-item:hover{border-color:var(--acc);background:var(--bg4)}
.person-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--acc);font-weight:700;flex-shrink:0}
.person-name{font-size:.85rem;font-weight:600}
.person-count{font-size:.72rem;color:var(--txt3);margin-top:.1rem}

.publisher-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;padding:1rem 1.25rem}
.publisher-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rad-sm);padding:1rem 1.1rem;cursor:pointer;transition:all var(--trans)}
.publisher-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.publisher-name{font-size:.95rem;font-weight:700}
.publisher-info{display:flex;align-items:center;gap:.5rem;margin-top:.3rem}
.uni-badge{font-size:.68rem;font-weight:700;padding:.15rem .5rem;border-radius:50px;text-transform:uppercase;letter-spacing:.04em}
.uni-badge-marvel{background:#ef444420;color:#f87171}.uni-badge-dc{background:#3b82f620;color:#60a5fa}
.uni-badge-valiant{background:#f59e0b20;color:#fbbf24}.uni-badge-star_wars{background:#8b5cf620;color:#a78bfa}
.uni-badge-independent{background:#10b98120;color:#34d399}
.publisher-count{font-size:.75rem;color:var(--txt3)}

.year-nav{display:flex;flex-wrap:wrap;gap:.3rem;padding:1rem 1.25rem .75rem}
.year-btn{padding:.3rem .65rem;border-radius:var(--rad-xs);font-size:.78rem;font-weight:600;border:1.5px solid var(--brd);color:var(--txt3);transition:all var(--trans)}
.year-btn:hover{border-color:var(--acc);color:var(--acc)}.year-btn.active{background:var(--acc);border-color:var(--acc);color:#fff}
.year-btn.empty{opacity:.25;pointer-events:none}

.chars-subnav{display:flex;gap:.35rem;padding:1rem 1.25rem .5rem;border-bottom:1px solid var(--brd)}
.chars-tab{padding:.4rem 1.1rem;border-radius:var(--rad-sm);font-size:.85rem;font-weight:600;color:var(--txt2);transition:all var(--trans)}
.chars-tab.active{background:var(--acc);color:#fff}.chars-tab:hover:not(.active){background:var(--bg4);color:var(--txt1)}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1rem;padding:1rem 1.25rem}
.char-card{background:var(--bg3);border-radius:var(--rad);overflow:hidden;border:1px solid var(--brd);cursor:pointer;transition:transform var(--trans),border-color var(--trans)}
.char-card:hover{transform:translateY(-3px);border-color:var(--acc)}
.char-cover{width:100%;aspect-ratio:300/459;object-fit:cover;background:var(--bg4)}
.char-name{padding:.5rem .6rem;font-size:.78rem;font-weight:700}
.char-count{padding:0 .6rem .5rem;font-size:.7rem;color:var(--txt3)}

/* DETAIL MODAL */
.detail-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);padding:1rem;animation:fadeIn .15s ease}
.detail-modal{background:var(--bg3);border-radius:var(--rad);width:min(840px,96vw);max-height:90vh;overflow-y:auto;border:1px solid var(--brd2);box-shadow:0 32px 100px rgba(0,0,0,.8);animation:slideUp .2s ease;position:relative}
.detail-inner{display:grid;grid-template-columns:210px 1fr}
.detail-cover-col{background:var(--bg2);display:flex;flex-direction:column;align-items:center;padding:1.5rem 1.25rem;gap:1rem;border-right:1px solid var(--brd)}
.detail-cover{width:100%;border-radius:var(--rad-sm);box-shadow:var(--shadow);aspect-ratio:300/459;object-fit:cover}
.detail-cover-placeholder{width:100%;aspect-ratio:300/459;background:var(--bg4);border-radius:var(--rad-sm);display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--txt3)}
.detail-dropbox{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;background:var(--acc);color:#fff;border-radius:var(--rad-sm);font-size:.82rem;font-weight:700;width:100%;justify-content:center;transition:background var(--trans)}
.detail-dropbox:hover{background:var(--acc3)}
.detail-content-col{padding:1.5rem;overflow-y:auto}
.detail-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border-radius:50%;background:var(--bg4);color:var(--txt2);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all var(--trans);z-index:1;cursor:pointer}
.detail-close:hover{background:var(--txt3);color:var(--txt1)}
.detail-format-badge{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .65rem;border-radius:50px;margin-bottom:.75rem}
.badge-tpb{background:#2563eb22;color:#60a5fa}.badge-omnibus{background:#7c3aed22;color:#a78bfa}
.badge-issue{background:#05966922;color:#34d399}.badge-kiosque{background:#b4530022;color:#fb923c}
.detail-series{font-size:.85rem;color:var(--acc);font-weight:600;margin-bottom:.3rem}
.detail-title{font-size:1.3rem;font-weight:800;line-height:1.25;margin-bottom:.2rem}
.detail-issue-num{font-size:.9rem;color:var(--txt2);margin-bottom:.75rem}
.detail-fields{display:flex;flex-direction:column;gap:.6rem}
.detail-field{display:flex;flex-direction:column;gap:.1rem}
.detail-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--txt3);font-weight:700}
.detail-value{font-size:.875rem;color:var(--txt1);line-height:1.4}
.detail-desc{font-size:.85rem;color:var(--txt2);line-height:1.55;padding:.75rem;background:var(--bg4);border-radius:var(--rad-sm);border-left:3px solid var(--acc);margin-top:.25rem;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.detail-desc.expanded{-webkit-line-clamp:unset;display:block}
.detail-see-more{font-size:.78rem;color:var(--acc);cursor:pointer;margin-top:.3rem;display:none}
.detail-see-more.vis{display:inline}
.detail-info-ed{font-size:.82rem;color:var(--txt2);background:var(--bg4);border-radius:var(--rad-sm);padding:.65rem .85rem;border-left:3px solid #3b82f6;line-height:1.5}
.detail-chars{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.15rem}
.detail-char-tag{font-size:.72rem;padding:.2rem .55rem;background:var(--bg4);border-radius:50px;color:var(--txt2);border:1px solid var(--brd)}
.detail-stars{display:flex;align-items:center;gap:.3rem;margin-top:.5rem}
.detail-star{font-size:1.3rem;cursor:pointer;transition:all var(--trans);color:var(--txt3)}
.detail-star.on{color:#facc15}
.btn-avis{margin-top:.5rem;padding:.5rem 1rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);font-size:.82rem;color:var(--txt2);font-weight:600;transition:all var(--trans)}
.btn-avis:hover{border-color:var(--acc);color:var(--acc)}
.detail-divider{border:none;border-top:1px solid var(--brd);margin:.75rem 0}

/* THEME PANEL */
.theme-panel{position:fixed;right:1rem;top:calc(var(--hdr)+var(--nav)+1rem);z-index:300;background:var(--bg3);border:1px solid var(--brd2);border-radius:var(--rad);padding:1.25rem;width:260px;box-shadow:var(--shadow);display:none}
.theme-panel.open{display:block;animation:slideUp .2s ease}
.theme-panel h3{font-size:.95rem;font-weight:700;margin-bottom:1rem}
.theme-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;font-size:.82rem;color:var(--txt2)}
.theme-row input[type="color"]{width:36px;height:28px;border:none;border-radius:4px;background:none;cursor:pointer;padding:0}
.theme-reset{width:100%;padding:.55rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);color:var(--txt2);font-size:.82rem;font-weight:600;margin-top:.25rem;transition:all var(--trans)}
.theme-reset:hover{border-color:var(--acc);color:var(--acc)}

/* SEARCH */
.search-results{padding:1rem 1.25rem}
.search-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.search-count{font-size:.85rem;color:var(--txt2)}
.search-filters{display:flex;gap:.35rem;flex-wrap:wrap}
.sf-btn{padding:.3rem .7rem;border-radius:50px;font-size:.75rem;font-weight:600;border:1.5px solid var(--brd2);color:var(--txt3);transition:all var(--trans)}
.sf-btn:hover{border-color:var(--acc);color:var(--acc)}.sf-btn.active{background:var(--acc);border-color:var(--acc);color:#fff}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.82rem;color:var(--txt2);border-bottom:1px solid var(--brd)}
.bc-link{color:var(--acc);cursor:pointer}.bc-link:hover{text-decoration:underline}.bc-sep{color:var(--txt3)}
.back-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);color:var(--txt2);font-size:.82rem;font-weight:600;margin:.75rem 1.25rem .25rem;transition:all var(--trans)}
.back-btn:hover{border-color:var(--acc);color:var(--acc)}

/* AVIS MODAL */
.avis-modal{background:var(--bg3);border-radius:var(--rad);width:min(500px,96vw);max-height:70vh;display:flex;flex-direction:column;border:1px solid var(--brd2);box-shadow:0 32px 100px rgba(0,0,0,.8)}
.avis-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between}
.avis-header h3{font-size:1rem;font-weight:700}
.avis-list{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}
.avis-empty{text-align:center;color:var(--txt3);padding:2rem;font-size:.85rem}
.avis-item{background:var(--bg4);border-radius:var(--rad-sm);padding:.75rem 1rem}
.avis-author{font-size:.78rem;font-weight:700;color:var(--acc)}
.avis-date{font-size:.7rem;color:var(--txt3);margin-left:.5rem}
.avis-text{font-size:.85rem;color:var(--txt2);margin-top:.35rem;line-height:1.4}
.avis-form{padding:1rem 1.5rem;border-top:1px solid var(--brd);display:flex;gap:.5rem}
.avis-input{flex:1;padding:.6rem .85rem;border-radius:var(--rad-sm);border:1.5px solid var(--brd2);background:var(--bg4);font-size:.85rem;outline:none;transition:border-color var(--trans)}
.avis-input:focus{border-color:var(--acc)}
.avis-send{padding:.6rem 1rem;border-radius:var(--rad-sm);background:var(--acc);color:#fff;font-size:.85rem;font-weight:700;transition:background var(--trans)}
.avis-send:hover{background:var(--acc3)}

/* RECENT */
.recent-badge{position:absolute;top:.4rem;right:.4rem;background:var(--acc);color:#fff;font-size:.62rem;font-weight:800;padding:.1rem .4rem;border-radius:50px}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* MOBILE */
@media(max-width:768px){
  :root{--cw:130px;--ch:199px}
  .detail-inner{grid-template-columns:1fr}
  .detail-cover-col{flex-direction:row;padding:1rem;border-right:none;border-bottom:1px solid var(--brd);align-items:flex-start}
  .detail-cover,.detail-cover-placeholder{width:110px}
  .detail-content-col{padding:1rem}
  .detail-modal{max-height:95vh}
}
@media(max-width:520px){
  :root{--cw:120px;--ch:184px}
  .app-logo .logo-text{display:none}
  .cards-grid{gap:.6rem}
  .format-nav{gap:.3rem;padding:.6rem .75rem .4rem}
  .fmt-anchor{font-size:.72rem;padding:.28rem .6rem}
  .format-section{padding:1rem .75rem 2rem}
  .section-title{font-size:1.1rem}
  .people-list{grid-template-columns:1fr}
  .publisher-list{grid-template-columns:1fr}
  .detail-cover-col{flex-direction:column}
  .detail-cover,.detail-cover-placeholder{width:100%;max-width:180px;margin:0 auto}
}