/* =========================================================
   AVAL ARAN — READ + FLIPBOOK READER
   ========================================================= */

:root{
    --maroon:#62083a;
    --maroon-dark:#2d0419;
    --maroon-soft:#7d1550;
    --gold:#d6a43a;
    --gold-soft:#e9c777;

    --ink:#0c0c0f;
    --stage:#141418;
    --panel:#16161b;
    --line:rgba(255,255,255,.09);
    --line-strong:rgba(255,255,255,.16);

    --text:#f3f3f6;
    --muted:#9a9aa6;

    --ease:cubic-bezier(.22,.61,.36,1);
    --radius:9px;
}

*{box-sizing:border-box}

html,body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

body{
    font-family:"Inter","Noto Sans Tamil",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    background:var(--ink);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button{font-family:inherit}

:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
}

.reader-app{
    width:100%;
    height:100%;
    display:grid;
    grid-template-rows:58px minmax(0,1fr) 46px;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.reader-toolbar{
    position:relative;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:0 14px;
    background:linear-gradient(100deg,var(--maroon-dark) 0%,var(--maroon) 55%,var(--maroon-soft) 100%);
    box-shadow:0 1px 0 rgba(255,255,255,.06),0 8px 26px rgba(0,0,0,.45);
}

.reader-toolbar::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-soft) 50%,var(--gold) 78%,transparent);
}

.toolbar-left,
.toolbar-actions{
    display:flex;
    align-items:center;
}

.toolbar-left{
    gap:12px;
    min-width:0;
}

.reader-brand{
    flex:0 0 auto;
    width:76px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:7px;
    background:#fff;
    box-shadow:0 3px 10px rgba(0,0,0,.28);
    transition:transform .2s var(--ease);
}

.reader-brand:hover{transform:translateY(-1px)}

.reader-brand img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.issue-heading{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.issue-heading strong{
    max-width:380px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13.5px;
    font-weight:650;
    letter-spacing:.1px;
}

.issue-heading span{
    color:rgba(255,255,255,.66);
    font-size:10.5px;
    letter-spacing:.3px;
}

.preview-badge{
    flex:0 0 auto;
    padding:5px 9px;
    border-radius:999px;
    background:var(--gold);
    color:#2a1900;
    font-size:9px;
    font-weight:800;
    letter-spacing:.6px;
}

.toolbar-actions{gap:7px}

.tool-group{
    display:flex;
    align-items:center;
    gap:2px;
    padding:3px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:11px;
    background:rgba(0,0,0,.22);
}

.tool-button{
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 11px;
    border:1px solid transparent;
    border-radius:7px;
    background:transparent;
    color:rgba(255,255,255,.9);
    text-decoration:none;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;
    cursor:pointer;
    transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}

.tool-button:hover{
    background:rgba(255,255,255,.14);
    color:#fff;
}

.tool-button:active{transform:scale(.96)}

.tool-button[disabled]{
    opacity:.35;
    pointer-events:none;
}

.tool-solid{
    border-color:rgba(255,255,255,.14);
    background:rgba(255,255,255,.08);
}

.mode-switch{
    position:relative;
    display:flex;
    padding:3px;
    border-radius:11px;
    background:rgba(0,0,0,.26);
    border:1px solid rgba(255,255,255,.10);
}

.mode-main{
    position:relative;
    z-index:2;
    height:30px;
    padding:0 14px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.7px;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}

.mode-main.active{
    background:#fff;
    color:var(--maroon);
    box-shadow:0 2px 8px rgba(0,0,0,.3);
}

.mode-main.active:hover{background:#fff}

.icon-only{
    width:34px;
    padding:0;
    font-size:16px;
    line-height:1;
}

/* =========================================================
   STAGE
   ========================================================= */

.reader-main{
    position:relative;
    min-height:0;
    overflow:hidden;
}

.reader-stage{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:
        radial-gradient(120% 90% at 50% 40%,#3a3941 0%,#232228 45%,var(--stage) 100%);
}

.read-progress{
    position:absolute;
    z-index:120;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:rgba(255,255,255,.06);
}

.read-progress i{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,var(--maroon-soft),var(--gold));
    transition:width .32s var(--ease);
}

.read-view,
.flip-view{
    position:absolute;
    inset:0;
    opacity:1;
    transition:opacity .22s var(--ease);
}

.read-view.is-fading,
.flip-view.is-fading{opacity:0}

.is-hidden{display:none!important}

/* READ MODE */

.read-scroll{
    width:100%;
    height:100%;
    overflow:auto;
    padding:22px 26px 34px;
    scroll-behavior:smooth;
    overscroll-behavior:contain;
}

.read-scroll.is-pannable{cursor:grab}
.read-scroll.is-panning{cursor:grabbing;scroll-behavior:auto}

.read-page-shell{
    position:relative;
    margin:0 auto;
    background:#fff;
    border-radius:3px;
    box-shadow:0 24px 60px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.35);
    transition:width .22s var(--ease);
}

.read-page-shell canvas{
    display:block;
    width:100%;
    height:auto;
    border-radius:3px;
}

.read-page-shell canvas.is-incoming{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity .26s var(--ease);
}

.read-page-shell canvas.is-incoming.is-ready{opacity:1}

/* FLIP MODE */

.flip-view{
    display:flex;
    align-items:center;
    justify-content:center;
}

.book-area{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:14px;
    overflow:auto;
    overscroll-behavior:contain;
}

.flip-book{
    position:relative;
    margin:auto;
    flex:0 0 auto;
    touch-action:pan-y;
}

.book-page{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
}

.page-inner{
    position:relative;
    width:100%;
    height:100%;
    background:#fff;
}

.page-inner canvas{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    opacity:0;
    transition:opacity .3s var(--ease);
}

.page-inner canvas.is-ready{opacity:1}

.page-skeleton{
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,#f1f1f3 30%,#e2e2e6 50%,#f1f1f3 70%);
    background-size:220% 100%;
    animation:sweep 1.25s linear infinite;
}

@keyframes sweep{
    from{background-position:120% 0}
    to{background-position:-120% 0}
}

.stf__block{
    filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));
}

.stf__item{cursor:grab}
.flip-book.is-flipping .stf__item{cursor:grabbing}

/* loader */

.book-loading{
    position:absolute;
    z-index:150;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:11px;
    padding:24px 30px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(16,16,20,.86);
    backdrop-filter:blur(9px);
    text-align:center;
}

.book-loading.is-hidden{display:none}

.loader-ring{
    width:36px;
    height:36px;
    border:3px solid rgba(255,255,255,.14);
    border-top-color:var(--gold);
    border-radius:50%;
    animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.book-loading strong{font-size:13px;font-weight:600}
.book-loading span{font-size:10.5px;color:var(--muted);letter-spacing:.3px}

/* arrows */

.page-arrow{
    position:absolute;
    z-index:90;
    top:50%;
    transform:translateY(-50%);
    width:46px;
    height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(12,12,15,.5);
    backdrop-filter:blur(7px);
    color:#fff;
    font-family:Georgia,serif;
    font-size:40px;
    line-height:1;
    cursor:pointer;
    opacity:0;
    transition:opacity .22s var(--ease),background .18s var(--ease),transform .18s var(--ease);
}

.reader-stage:hover .page-arrow{opacity:.85}
.page-arrow:hover{opacity:1;background:var(--maroon)}
.page-arrow:active{transform:translateY(-50%) scale(.94)}

.page-arrow[disabled]{
    opacity:0!important;
    pointer-events:none;
}

.page-arrow-left{left:16px}
.page-arrow-right{right:16px}

@media (hover:none){
    .page-arrow{opacity:.8}
}

/* =========================================================
   THUMBNAILS
   ========================================================= */

.thumb-backdrop{
    position:absolute;
    z-index:130;
    inset:0;
    background:rgba(0,0,0,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s var(--ease);
}

.thumb-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
}

.thumb-panel{
    position:absolute;
    z-index:140;
    left:0;
    top:0;
    bottom:0;
    width:248px;
    transform:translateX(-100%);
    background:rgba(18,18,22,.97);
    backdrop-filter:blur(12px);
    border-right:1px solid var(--line);
    box-shadow:14px 0 40px rgba(0,0,0,.45);
    transition:transform .26s var(--ease);
}

.thumb-panel.is-open{transform:translateX(0)}

.thumb-head{
    height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    border-bottom:1px solid var(--line);
}

.thumb-head>div{display:grid;gap:2px}
.thumb-head strong{font-size:13px;font-weight:600}
.thumb-head span{font-size:9.5px;color:var(--muted);letter-spacing:.3px}

.thumb-head button{
    width:30px;
    height:30px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--text);
    font-size:20px;
    cursor:pointer;
    transition:background .16s var(--ease);
}

.thumb-head button:hover{background:rgba(255,255,255,.1)}

.thumb-list{
    height:calc(100% - 54px);
    overflow-y:auto;
    padding:14px;
    scrollbar-width:thin;
}

.thumb-item{
    position:relative;
    display:block;
    width:100%;
    margin:0 0 12px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:9px;
    background:#1c1c22;
    cursor:pointer;
    transition:border-color .18s var(--ease),transform .18s var(--ease),background .18s var(--ease);
}

.thumb-item:hover{
    border-color:var(--line-strong);
    background:#22222a;
    transform:translateY(-2px);
}

.thumb-item.is-active{
    border-color:var(--gold);
    box-shadow:0 0 0 1px var(--gold) inset;
}

.thumb-frame{
    position:relative;
    width:100%;
    min-height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:5px;
    background:#f1f1f3;
}

.thumb-frame canvas{
    display:block;
    max-width:100%;
    max-height:180px;
    opacity:0;
    transition:opacity .28s var(--ease);
}

.thumb-frame canvas.is-ready{opacity:1}

.thumb-item span{
    position:absolute;
    right:14px;
    bottom:14px;
    min-width:23px;
    height:23px;
    display:grid;
    place-items:center;
    padding:0 6px;
    border-radius:999px;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:9.5px;
    font-weight:600;
}

/* =========================================================
   FOOTER
   ========================================================= */

.reader-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:0 16px;
    background:var(--panel);
    border-top:1px solid var(--line);
}

.page-status{
    display:flex;
    gap:6px;
    align-items:center;
    color:var(--muted);
    font-size:10.5px;
    letter-spacing:.3px;
}

.page-status strong{color:var(--text);font-weight:600}

.page-input{
    width:44px;
    height:26px;
    padding:0 4px;
    border:1px solid var(--line);
    border-radius:6px;
    background:rgba(255,255,255,.05);
    color:var(--text);
    font-size:11px;
    font-weight:600;
    text-align:center;
    -moz-appearance:textfield;
}

.page-input::-webkit-outer-spin-button,
.page-input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.page-input:focus{
    border-color:var(--gold);
    background:rgba(255,255,255,.09);
}

.page-slider{
    width:min(520px,44vw);
    height:20px;
    background:transparent;
    -webkit-appearance:none;
    appearance:none;
    cursor:pointer;
}

.page-slider::-webkit-slider-runnable-track{
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.page-slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:14px;
    height:14px;
    margin-top:-5px;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 2px 6px rgba(0,0,0,.5);
    transition:transform .15s var(--ease);
}

.page-slider:hover::-webkit-slider-thumb{transform:scale(1.18)}

.page-slider::-moz-range-track{
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.page-slider::-moz-range-thumb{
    width:14px;
    height:14px;
    border:0;
    border-radius:50%;
    background:var(--gold);
}

.zoom-status{
    min-width:46px;
    color:var(--muted);
    font-size:10.5px;
    text-align:right;
    font-variant-numeric:tabular-nums;
}

/* =========================================================
   SHARE
   ========================================================= */

.share-modal{
    position:fixed;
    z-index:1000;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(5px);
    animation:fadeIn .2s var(--ease);
}

.share-modal.is-hidden{display:none}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.share-card{
    position:relative;
    width:min(400px,100%);
    padding:30px 26px 26px;
    border-radius:16px;
    background:#fff;
    color:#241f24;
    text-align:center;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    animation:riseIn .26s var(--ease);
}

@keyframes riseIn{
    from{opacity:0;transform:translateY(14px) scale(.98)}
    to{opacity:1;transform:none}
}

.share-close{
    position:absolute;
    right:12px;
    top:10px;
    width:30px;
    height:30px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#666;
    font-size:24px;
    line-height:1;
    cursor:pointer;
}

.share-close:hover{background:#f1f1f3}

.share-logo{width:130px;margin-bottom:6px}

.share-card h2{
    margin:6px 0 6px;
    color:var(--maroon);
    font-size:19px;
}

.share-card p{
    margin:0 0 16px;
    color:#6c6870;
    font-size:12.5px;
    line-height:1.55;
}

.share-card input{
    width:100%;
    height:40px;
    padding:0 12px;
    border:1px solid #e2e2e6;
    border-radius:8px;
    background:#fafafb;
    font-size:12px;
    color:#4a464c;
}

.share-actions{
    display:flex;
    justify-content:center;
    gap:9px;
    margin:14px 0 20px;
}

.share-actions button,
.share-actions a{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:0 16px;
    border:0;
    border-radius:8px;
    background:var(--maroon);
    color:#fff;
    text-decoration:none;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.3px;
    cursor:pointer;
    transition:transform .16s var(--ease),background .16s var(--ease);
}

.share-actions button:hover,
.share-actions a:hover{
    background:var(--maroon-soft);
    transform:translateY(-1px);
}

.qr-wrap{display:flex;justify-content:center}
.qr-wrap img,.qr-wrap canvas{border-radius:8px}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1080px){
    .issue-heading strong{max-width:200px}
}

@media(max-width:900px){
    .issue-heading{display:none}
    .tool-text{display:none}
    .reader-brand{width:66px}
    .tool-button{padding:0 9px}
    .zoom-group{display:none}
}

@media(max-width:760px){
    .reader-app{grid-template-rows:52px minmax(0,1fr) 44px}
    .reader-toolbar{padding:0 8px;gap:8px}
    .reader-brand{width:56px;height:34px}
    .toolbar-actions{gap:5px}
    .tool-group{padding:2px;border-radius:9px}
    .tool-button{height:30px;padding:0 8px;font-size:10.5px}
    .mode-main{padding:0 10px;font-size:9.5px;letter-spacing:.4px}
    .icon-only{width:30px;font-size:14px}
    .read-scroll{padding:14px 12px 26px}
    .book-area{padding:8px}
    .page-arrow{width:32px;height:62px;font-size:28px;border-radius:9px}
    .page-arrow-left{left:6px}
    .page-arrow-right{right:6px}
    .thumb-panel{width:206px}
    .reader-footer{gap:10px;padding:0 10px}
    .page-slider{width:46vw}
    .zoom-status{display:none}
}

@media(prefers-reduced-motion:reduce){
    *{animation-duration:.01ms!important;transition-duration:.01ms!important}
    .read-scroll{scroll-behavior:auto}
}