* { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background: #ffffff; color: #000000; margin: 0; height: 100vh; overflow: hidden; font-size: 18px; }

#auth-layer { max-width: 450px; margin: 100px auto; padding: 25px; border: 2px solid #000000; text-align: center; }
#auth-layer input { width: 100%; margin-bottom: 15px; text-align: center; }

input, textarea, select { width: 100%; border: 2px solid #000000; background: #ffffff; color: #000000; padding: 12px; outline: none; border-radius: 0; font-size: 18px; }
input:focus, textarea:focus, select:focus { background: #fafafa; }

button { background: #ffffff; color: #000000; border: 2px solid #000000; padding: 10px 18px; cursor: pointer; text-transform: uppercase; font-weight: bold; border-radius: 0; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button:hover, button.active { background: #000000; color: #ffffff; }

.icon-btn { padding: 8px; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.danger:hover { background: #ff0000; color: #ffffff; border-color: #ff0000; }

#workspace { display: flex; height: 100vh; width: 100vw; position: relative; }

.sidebar { width: 380px; border-right: 2px solid #000000; display: flex; flex-direction: column; background: #ffffff; z-index: 100; transition: transform 0.3s ease; }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: max(18px, env(safe-area-inset-top)) 18px 18px 18px; border-bottom: 2px solid #000000; }
.sidebar-header h3 { margin: 0; font-size: 20px; }

.sidebar-controls { padding: 12px; border-bottom: 2px solid #000000; }
.sidebar-controls input { margin-bottom: 10px; }

#notes-list { flex: 1; overflow-y: auto; background: #fafafa; }
.list-item { padding: 18px; border-bottom: 2px solid #000000; cursor: pointer; background: #ffffff; }
.list-item:hover, .list-item.selected { background: #000000; color: #ffffff; }
.list-item .meta-text { font-size: 13px; margin-top: 6px; opacity: 0.7; }

/* Sidebar Bottom Row (Logout & Trash) */
.sidebar-bottom { display: flex; border-top: 2px solid #000000; background: #ffffff; }
.bottom-btn { border: none; padding: 18px; text-align: left; background: transparent; cursor: pointer; flex: 1; border-radius: 0; }
.bottom-btn:hover { background: #000000; color: #ffffff; }
.bottom-btn.icon-only { flex: none; border-left: 2px solid #000000; display: flex; align-items: center; justify-content: center; }

.mobile-header { display: none; border-bottom: 2px solid #000000; }
.editor-pane { flex: 1; display: flex; flex-direction: column; background: #ffffff; overflow-y: auto; overflow-x: hidden; }
#editor-active { display: flex; flex-direction: column; height: 100%; max-width: 1000px; margin: 0 auto; width: 100%; padding: 30px; }

/* Consolidated Inline Note Header */
.editor-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #000000; padding-bottom: 15px; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.editor-meta { font-size: 14px; color: #000000; margin: 0; }
.editor-controls { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }

#editor-title { font-size: 28px; font-weight: bold; margin-bottom: 15px; border: none; border-bottom: 2px dotted #000000; padding-left: 0; }
#editor-content { flex: 1; resize: none; margin-bottom: 25px; min-height: 400px; border: none; padding: 0; font-size: 18px; line-height: 1.5; }

.image-section { border-top: 2px solid #000000; padding-top: 20px; }
.image-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }

#image-gallery, #global-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 15px; }
.img-card { border: 2px solid #000000; padding: 5px; position: relative; background: #ffffff; outline: none; transition: transform 0.1s; }
.img-card:focus-visible { border: 2px solid #000000; box-shadow: 0 0 0 4px #000000; transform: scale(1.02); z-index: 10; }
.img-card img { width: 100%; height: 140px; object-fit: cover; display: block; cursor: zoom-in; }
.img-card button { position: absolute; top: 5px; right: 5px; background: #ffffff; color: #000000; padding: 4px; border: 2px solid #000000; }
.img-card button:hover { background: #ff0000; color: #ffffff; border-color: #ff0000; }
.img-card.temp img { animation: pulse 1.5s infinite; opacity: 0.6; pointer-events: none; }
@keyframes pulse { 0% { opacity: 0.4; } 50% { opacity: 0.8; } 100% { opacity: 0.4; } }

#gallery-view { max-width: 1000px; margin: 0 auto; width: 100%; padding: 30px; }

/* Restructured Modal Framework */
.modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-content { background: #ffffff; padding: 25px; border: 2px solid #000000; max-width: 90vw; max-height: 95vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; position: relative; }

.modal-top-bar { display: flex; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #000000; padding-bottom: 15px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.close-modal { background: #000000; color: #ffffff; font-size: 24px; font-weight: bold; cursor: pointer; border: none; padding: 5px 12px; line-height: 1; }
.close-modal:hover { background: #ff0000; }

.modal-meta { font-size: 13px; font-family: monospace; width: 100%; text-align: left; margin-bottom: 15px; opacity: 0.8; font-weight: bold; }
#modal-img { max-width: 100%; max-height: 50vh; object-fit: contain; border: 2px solid #000000; }

.vision-block { margin-top: 15px; font-size: 12px; font-family: monospace; text-align: left; width: 100%; }
.vision-block strong { background: #000000; color: #ffffff; padding: 2px 4px; display: block; margin: 10px 0 5px 0; }
.vision-block pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; font-family: inherit; opacity: 0.8; }

@media (max-width: 768px) {
    .sidebar { position: fixed; left: -100%; height: 100vh; box-shadow: 5px 0 15px rgba(0,0,0,0.5); width: 100vw; max-width: 100vw; z-index: 2000; }
    .sidebar.open { transform: translateX(100%); }
    .mobile-header { display: flex; justify-content: flex-start; padding: max(15px, env(safe-area-inset-top)) 20px 15px 20px; align-items: center;}
    #editor-active, #gallery-view { padding: 15px; }
    .modal-content { max-width: 95vw; padding: 20px; }
}