/* ══════════════════════════════════════════════════════════════
   MAIN — Landing + Upload views (page-specific only)
   Base styles are in base.css
   ══════════════════════════════════════════════════════════════ */

.view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0
}

.view.active {
    display: flex
}

body {
    display: flex;
    flex-direction: column;
    height: 100vh
}

.center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 2rem 1rem;
    overflow: hidden;
    min-height: 0
}

/* When in upload view, scroll and let auto-margins center */
#vUp .center {
    justify-content: flex-start;
    overflow-y: auto
}

/* ── Hero ────────────────────────────────────────────────── */

.hero-bolt {
    width: 64px;
    height: 64px;
    margin-bottom: 2rem
}

.hero-bolt svg {
    width: 100%;
    height: 100%
}

h1 {
    font-size: 1.35rem;
    font-weight: 600;
    color: #e8e8e8;
    text-align: center;
    line-height: 1.5;
    letter-spacing: -.02em
}

.hs {
    font-size: .82rem;
    color: #555;
    text-align: center;
    margin-top: .45rem;
    margin-bottom: 2.5rem
}

.hn {
    font-size: .7rem;
    color: #333;
    margin-top: 2.5rem;
    text-align: center
}

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
    padding: .7rem 2rem;
    border-radius: 9px;
    font-size: .84rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: none;
    outline: none
}

.bw {
    background: #fff;
    color: #0a0a0a
}

.bw:hover {
    opacity: .85
}

.bo {
    background: transparent;
    color: #999;
    border: 1px solid rgba(255, 255, 255, .1)
}

.bo:hover {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .18)
}

/* ── Upload view ─────────────────────────────────────────── */

.uv-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 520px;
    margin: auto 0;
    min-height: 0
}

.uvt {
    font-size: 1.35rem;
    font-weight: 600;
    color: #e8e8e8;
    margin-bottom: .15rem;
    display: flex;
    align-items: center;
    gap: .5rem
}

.sp {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .08);
    border-top-color: #ccc;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    flex-shrink: 0
}

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

.uvs {
    font-size: .72rem;
    color: #555;
    margin-bottom: .75rem;
    min-height: 1em
}

.uvn {
    font-size: .72rem;
    color: #555;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem
}

.uvn .chk {
    width: 14px;
    height: 14px;
    opacity: .4
}

.cancel-btn {
    background: none;
    border: 1px solid rgba(255,255,255,.08);
    color: #555;
    cursor: pointer;
    font-family: inherit;
    font-size: .78rem;
    padding: .45rem 1.2rem;
    border-radius: 8px;
    transition: all .2s
}

.cancel-btn:hover {
    color: #ccc;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.04)
}

/* ── File list items ─────────────────────────────────────── */

.ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.08) transparent
}

.ul::-webkit-scrollbar { width: 4px }
.ul::-webkit-scrollbar-track { background: transparent }
.ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px }

.ui {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
    padding: .85rem 1rem;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.ut {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .5rem
}

.ue {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .5rem;
    font-weight: 700;
    color: #555;
    letter-spacing: .5px
}

.ufi {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: .4rem
}

.un {
    font-size: .84rem;
    font-weight: 500;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.us {
    font-size: .72rem;
    color: #555;
    flex-shrink: 0
}

.uright {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    margin-left: .5rem
}

.upct {
    font-size: .8rem;
    font-weight: 600;
    color: #ccc
}

.sharebtn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    cursor: pointer;
    color: #555;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    text-decoration: none;
    flex-shrink: 0
}

.sharebtn:hover {
    background: rgba(255, 255, 255, .06);
    color: #ccc;
    border-color: rgba(255, 255, 255, .15)
}

.sharebtn svg {
    width: 13px;
    height: 13px;
    pointer-events: none
}

.ubr {
    height: 2px;
    background: rgba(255, 255, 255, .05);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: .35rem
}

.ufill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: #fff;
    transition: width .15s ease
}

.umeta {
    display: flex;
    gap: .5rem;
    font-size: .66rem;
    color: #555
}

.ui.done .ufill { background: #4ade80 }
.ui.done .upct { color: #4ade80 }
.ui.done .sharebtn { display: flex }
.ui.error .ufill { background: #ef4444 }
.ui.error .upct { color: #ef4444 }

/* ── Done actions ────────────────────────────────────────── */

.das {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    min-height: 38px;
    align-items: center
}

/* Hide everything by default */
.das > .btn { display: none }
.das > .cancel-btn { display: none }

/* During upload: show cancel only */
.das.uploading > .cancel-btn { display: inline-flex }

/* After upload: show done buttons with animation */
.das.visible > .btn {
    display: inline-flex;
    animation: fadeSlideUp .35s ease forwards
}
.das.visible > .cancel-btn { display: none }

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(8px) }
    to { opacity: 1; transform: translateY(0) }
}

/* ── Drag overlay ────────────────────────────────────────── */

.dro {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(10, 10, 10, .92);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.dro.active { display: flex }

.droi {
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    opacity: .35
}

.droi svg {
    width: 100%;
    height: 100%
}

.drot {
    font-size: .88rem;
    font-weight: 500;
    color: #555
}

input[type=file] { display: none }

/* ── Hero buttons row ───────────────────────────────────── */

.hero-btns {
    display: flex;
    gap: .6rem;
    justify-content: center
}

/* ── Upload dropdown ────────────────────────────────────── */

.upload-dd {
    position: relative
}

.dd-menu {
    position: absolute;
    top: calc(100% + .4rem);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #161618;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: .3rem;
    min-width: 140px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 100
}

.dd-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0)
}

.dd-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .7rem;
    background: none;
    border: none;
    color: #aaa;
    font-family: inherit;
    font-size: .8rem;
    border-radius: 7px;
    cursor: pointer;
    transition: all .15s
}

.dd-item:hover {
    background: rgba(255,255,255,.06);
    color: #ddd
}

.dd-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}


/* ── Remote upload modal ────────────────────────────────── */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto
}

.modal-box {
    background: #161618;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 1.5rem;
    width: 420px;
    max-width: 90vw;
    transform: translateY(12px);
    transition: transform .25s
}

.modal-overlay.active .modal-box {
    transform: translateY(0)
}

.modal-title {
    font-size: .95rem;
    color: #ddd;
    margin-bottom: 1rem;
    font-weight: 500
}

.modal-input {
    display: block;
    width: 100%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    color: #ddd;
    font-family: inherit;
    font-size: .82rem;
    padding: .6rem .8rem;
    margin-bottom: .6rem;
    outline: none;
    transition: border-color .2s;
    box-sizing: border-box
}

.modal-input:focus {
    border-color: rgba(255,255,255,.18)
}

.modal-input::placeholder { color: #444 }

.modal-actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    margin-top: .8rem
}

/* ── Responsive ──────────────────────────────────────────── */

@media(max-width:520px) {
    .center { padding: 1.5rem 1.5rem 1rem }
    .btn { padding: .65rem 1.5rem }
}