:root { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
    body { margin: 24px; background:#0b0d12; color:#e8ecf1; }
    h1 { font-size: 1.4rem; margin: 0 0 12px; }
    .toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
    .toolbar input[type="search"] { padding:10px 12px; min-width:260px; border-radius:10px; border:1px solid #2a3242; background:#121722; color:#e8ecf1; }
    .btn { padding:8px 10px; border-radius:10px; border:1px solid #2a3242; background:#141a28; color:#e8ecf1; cursor:pointer; }
    .btn:hover { background:#1b2336; }
    .meta { opacity:.75; font-size:.9rem; }
    .grid { display:grid; gap:12px; }
    .note { border:1px solid #2a3242; border-radius:14px; background:#0f1421; }
    .note header { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #2a3242; }
    .note h3 { margin:0; font-size:1rem; line-height:1.2; word-break:break-word; }
    .note .content { padding:12px 14px; }
    .line { padding:6px 8px; border-radius:8px; background:#0b101b; border:1px dashed #263148; margin:4px 0; white-space:pre-wrap; word-break:break-word; }
    .footer { margin-top:16px; opacity:.7; font-size:.85rem; }

    /* Edit mode */
    .edit-wrap { padding:12px 14px; display:grid; gap:10px; }
    .edit-row { display:grid; gap:6px; }
    .input, .textarea {
      width:100%; box-sizing:border-box; padding:10px 12px; border-radius:10px;
      border:1px solid #2a3242; background:#121722; color:#e8ecf1;
      font-family:inherit; font-size:0.95rem;
    }
    .edit-actions { display:flex; gap:8px; justify-content:flex-end; }




/* Layout for the note header */
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Text side (title + url) */
.note-header-main {
    flex: 1;
    min-width: 0; /* <-- important so it can shrink instead of squishing text */
}

/* Title + URL text behavior */
.note-title {
    margin: 0;
    font-size: 1rem; /* adjust as you like */
}

.note-url {
    display: block;
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 2px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Actions container (already flexed via JS) */
.note-actions {
    flex-shrink: 0; /* don't let buttons crush the text */
}

/* Mobile: stack text above buttons */
@media (max-width: 600px) {
    .note-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .note-actions {
        margin-top: 0.5rem;
    }
}




.status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #1e1f24;
    color: #b8c1ff;
    font-size: 13px;
    padding: 6px 12px;
    border-bottom: 1px solid #333;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    font-family: Consolas, monospace;
}

#main-content {
    margin-top: 38px; /* leave space for fixed bar */
}

.status-footer {
    margin-top: 12px;
    text-align: center;
    color: #777;
    font-size: 12px;
    border-top: 1px solid #333;
    padding: 6px;
}

.note-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}




/* don’t hide the whole card! just optional styling */
.note-masked .note-line {
    user-select: none;
}

.note-card {
    background: #0f172a;
    border-radius: 1rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: .75rem;
}

.note-title {
    font-weight: 600;
}

.note-link {
    display: block;
    font-size: .75rem;
    color: #38bdf8;
}

.note-actions {
    display: flex;
    gap: .4rem;
    align-items: center;
}

.note-toggle-eye {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: .5rem;
    padding: .3rem .5rem;
    cursor: pointer;
    color: #fff;
}

.note-card-body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.note-line {
    background: rgba(15,23,42,.35);
    border: 1px dashed rgba(255,255,255,0.05);
    border-radius: .7rem;
    padding: .4rem .6rem;
}

/* masked version just affects what we render in JS,
   but you can also style it here */
.note-card.masked .note-line {
    user-select: none;
}



.toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* optional, makes spacing nicer */
}

#btn-signout {
    margin-left: auto; /* pushes it all the way right */
}