/* ===== ADMIN LOGIN BUTTON ===== */
.nav-admin{list-style:none;margin-left:4px}
.admin-login-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:6px 10px;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:var(--transition)}
.admin-login-btn:hover{border-color:var(--teal);color:var(--teal)}
.admin-login-btn svg{width:16px;height:16px}
body.admin-logged-in .admin-login-btn{border-color:var(--teal);color:var(--teal);background:rgba(10,126,140,.06)}

/* ===== MODAL OVERLAY ===== */
.admin-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;justify-content:center;align-items:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.admin-modal-overlay.open{display:flex}
.admin-modal{background:var(--white);border-radius:14px;padding:36px;width:100%;max-width:400px;box-shadow:0 25px 60px rgba(0,0,0,.2);position:relative;animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.admin-modal h3{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:20px;text-align:center}
.admin-modal .form-group{margin-bottom:14px}
.admin-modal .form-group label{display:block;font-size:var(--type-small);font-weight:600;color:var(--navy);margin-bottom:4px}
.admin-modal .form-group input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-size:var(--type-body);font-family:var(--font);outline:none;transition:border-color .2s,box-shadow .2s;background:var(--white);color:var(--navy);box-sizing:border-box}
.admin-modal .form-group input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,126,140,.1)}
.admin-error{color:#d32f2f;font-size:var(--type-small);display:none;padding:8px 12px;background:rgba(211,47,47,.08);border-radius:6px;margin-bottom:12px;text-align:center}
.admin-error.show{display:block}
.admin-modal .btn{margin-top:8px}
.admin-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.5rem;color:var(--muted);cursor:pointer;line-height:1;transition:color .2s}
.admin-modal-close:hover{color:var(--navy)}
.admin-logout-section{display:none;text-align:center}
.admin-logout-section p{font-size:var(--type-small);color:var(--muted);margin-bottom:14px}

/* ===== EDIT MODE ===== */
body.admin-edit-mode [data-content-key]{position:relative;cursor:pointer;transition:outline-color .2s,border-color .2s;border-radius:3px}
body.admin-edit-mode [data-content-key]:hover{outline:1.5px dashed rgba(10,126,140,.5);outline-offset:3px}

/* ===== PENCIL ICON ===== */
.edit-pencil{display:none;position:absolute;top:-8px;right:-10px;font-size:12px;background:var(--teal);color:#fff;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;line-height:1;box-shadow:0 2px 6px rgba(10,126,140,.3);cursor:pointer;z-index:10;pointer-events:auto;transition:transform .15s,background .15s}
.edit-pencil:hover{background:#086d7a;transform:scale(1.15)}
body.admin-edit-mode [data-content-key] .edit-pencil{display:flex}

/* ===== EDITING STATE ===== */
[data-content-key].editing{outline:2px solid var(--teal)!important;outline-offset:3px;background:rgba(10,126,140,.03);border-radius:4px}
[data-content-key].editing .edit-pencil{display:none!important}
[data-content-key][contenteditable="true"]{outline:2px solid var(--teal)!important;outline-offset:3px;background:rgba(10,126,140,.03);border-radius:4px;min-height:1em}

/* ===== TOAST ===== */
.admin-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:var(--white);padding:10px 24px;border-radius:8px;font-size:var(--type-small);font-weight:600;font-family:var(--font);box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:10000;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.admin-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .admin-modal{margin:16px;padding:28px}
}