*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:#1a1a2e;
    color:#e0e0e0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ---- header ---- */
header{background:#16213e;padding:.75rem 1.5rem;border-bottom:1px solid #0f3460}
.pad-header{display:flex;align-items:center;gap:1rem;max-width:960px;margin:0 auto;width:100%}
.logo{color:#e94560;text-decoration:none;font-weight:bold;font-size:1.1rem}
.pad-id{
    font-family:monospace;background:#0f3460;padding:.25rem .6rem;
    border-radius:4px;cursor:pointer;font-size:.9rem;user-select:all;
}
.pad-id:hover{background:#1a4a8a}
.client-count{font-size:.8rem;opacity:.7;margin-left:auto;white-space:nowrap}
.status-dot{width:10px;height:10px;border-radius:50%;background:#666;flex-shrink:0}
.status-dot.connected{background:#2ecc71}
.status-dot.disconnected{background:#e74c3c}

/* ---- main pad area ---- */
main{
    flex:1;display:flex;flex-direction:column;
    max-width:960px;width:100%;margin:0 auto;
    padding:1rem;gap:1rem;
}
#pad-text{
    flex:1;min-height:300px;
    background:#16213e;color:#e0e0e0;
    border:1px solid #0f3460;border-radius:8px;
    padding:1rem;font-family:monospace;font-size:.95rem;
    resize:vertical;outline:none;line-height:1.5;
}
#pad-text:focus{border-color:#e94560}

/* ---- file zone ---- */
.file-drop{
    border:2px dashed #0f3460;border-radius:8px;
    padding:1.5rem;text-align:center;color:#888;
    transition:border-color .2s,color .2s;
}
.file-drop.drag-over{border-color:#e94560;color:#e94560}
.file-label{color:#e94560;cursor:pointer;text-decoration:underline}
.file-list{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.file-item{
    background:#16213e;border:1px solid #0f3460;border-radius:6px;
    padding:.5rem .75rem;font-size:.85rem;max-width:280px;
}
.file-item a{color:#5dade2;text-decoration:none;word-break:break-all}
.file-item a:hover{text-decoration:underline}
.file-size{opacity:.5}
.file-preview{max-width:260px;max-height:160px;display:block;margin-bottom:.5rem;border-radius:4px}
.btn-delete-file{
    background:none;border:none;color:#e74c3c;
    cursor:pointer;font-weight:bold;margin-left:.5rem;font-size:.9rem;
}
.btn-delete-file:hover{color:#ff6b6b}

/* ---- landing page ---- */
.landing{max-width:500px;margin:15vh auto;text-align:center;padding:2rem}
.landing h1{font-size:2.5rem;color:#e94560;margin-bottom:.5rem}
.landing p{margin-bottom:.5rem;line-height:1.6}
.landing .sub{opacity:.7;font-size:.95rem;margin-bottom:1.5rem}
.btn-create{
    background:#e94560;color:#fff;border:none;
    padding:.75rem 2rem;font-size:1.1rem;border-radius:8px;
    cursor:pointer;margin-bottom:2rem;transition:background .2s;
}
.btn-create:hover{background:#c0392b}
.manual-entry{margin-top:1.5rem}
.manual-entry p{font-size:.9rem;opacity:.7;margin-bottom:.5rem}
.manual-row{display:flex;justify-content:center;gap:.5rem}
.manual-entry input{
    background:#16213e;border:1px solid #0f3460;color:#e0e0e0;
    padding:.5rem .75rem;border-radius:6px;
    font-family:monospace;font-size:1rem;width:10ch;text-align:center;
}
.manual-entry input:focus{outline:none;border-color:#e94560}
.btn-go{
    background:#0f3460;color:#fff;border:none;
    padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:background .2s;
}
.btn-go:hover{background:#1a4a8a}

/* ---- QR button & overlay ---- */
.btn-qr{
    background:#0f3460;color:#e0e0e0;border:1px solid #1a4a8a;
    padding:.2rem .6rem;border-radius:4px;cursor:pointer;
    font-size:.8rem;font-weight:bold;transition:background .2s;
}
.btn-qr:hover{background:#1a4a8a}
.qr-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.7);
    display:flex;align-items:center;justify-content:center;z-index:100;
}
.qr-overlay.hidden{display:none}
.qr-modal{
    background:#16213e;border:1px solid #0f3460;border-radius:12px;
    padding:1.5rem;text-align:center;
}
.qr-modal img{display:block;margin:0 auto;border-radius:8px;max-width:280px}
.qr-url{font-family:monospace;margin-top:.75rem;opacity:.6;font-size:.85rem}
.btn-qr-close{
    margin-top:1rem;background:#e94560;color:#fff;border:none;
    padding:.4rem 1.5rem;border-radius:6px;cursor:pointer;font-size:.9rem;
}
.btn-qr-close:hover{background:#c0392b}

/* ---- responsive ---- */
@media(max-width:600px){
    .landing{margin:8vh auto;padding:1rem}
    .landing h1{font-size:2rem}
    main{padding:.75rem}
    .pad-header{gap:.5rem}
}