:root {
--bg-color: #f8fafc;
--card-bg: #ffffff;
--accent-color: #2563eb;
--accent-hover: #1d4ed8;
--text-main: #0f172a;
--text-muted: #64748b;
--border-color: #e2e8f0;
--radius: 12px;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

{
box-sizing: border-box;
margin: 0;
padding: 0;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
}

body {
background-color: var(--bg-color);
color: var(--text-main);
padding: 24px 16px;
min-height: 100vh;
}

.app-container {
max-width: 1100px;
width: 100%;
margin: 0 auto;
}

/* ======================================================
GENERAL
====================================================== */

.hidden {
display: none !important;
}

.card {
background: var(--card-bg);
border-radius: var(--radius);
border: 1px solid var(--border-color);
box-shadow: var(--shadow);
padding: 20px;
margin-bottom: 20px;
}

.card h2 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 16px;
}

input,
textarea,
select {
width: 100%;
padding: 10px 14px;

border: 1px solid var(--border-color);
border-radius: 8px;

font-size: 0.95rem;

background: var(--bg-color);
color: var(--text-main);

outline: none;
}

input:focus,
textarea:focus,
select:focus {
border-color: var(--accent-color);

box-shadow:
0 0 0 2px rgba(37, 99, 235, 0.1);
}

textarea {
resize: vertical;
}

button {
background: var(--accent-color);
color: white;

border: none;
padding: 12px 16px;

border-radius: 8px;

font-size: 0.95rem;
font-weight: 600;

cursor: pointer;

transition:
background 0.2s,
opacity 0.2s;
}

button:hover {
background: var(--accent-hover);
}

button:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.btn-secondary {
background: #e2e8f0;
color: #334155;
}

.btn-secondary:hover {
background: #cbd5e1;
}

.form-group {
display: flex;
flex-direction: column;
gap: 12px;
}

/* ======================================================
AUTH
====================================================== */

.auth-box {
max-width: 420px;
margin: 60px auto;
}

.auth-box h2 {
margin-bottom: 18px;
}

.auth-form {
display: flex;
flex-direction: column;
gap: 12px;
}

.auth-divider {
display: flex;
align-items: center;

gap: 10px;

margin: 8px 0;

color: var(--text-muted);

font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
content: "";

flex: 1;

height: 1px;

background: var(--border-color);
}

/* ======================================================
HEADER
====================================================== */

header {
display: flex;

align-items: center;
justify-content: space-between;

border-bottom:
2px solid var(--border-color);

padding-bottom: 16px;
}

header h1 {
font-size: 1.5rem;
font-weight: 700;
}

.header-right {
display: flex;

align-items: center;

gap: 10px;
}

.user-display {
font-size: 0.85rem;
color: var(--text-muted);

max-width: 250px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* ======================================================
NETWORK
====================================================== */

.net-badge {
padding: 4px 10px;

border-radius: 20px;

font-size: 0.8rem;
font-weight: 600;

white-space: nowrap;
}

.status-online {
background: #dcfce7;
color: #15803d;
}

.status-offline {
background: #fef2f2;
color: #b91c1c;
}

/* ======================================================
DESKTOP LAYOUT
====================================================== */

.desktop-layout {
display: grid;

grid-template-columns:
360px 1fr;

gap: 24px;

align-items: start;

margin-top: 24px;
}

.sticky-sidebar {
position: sticky;
top: 24px;
}

/* ======================================================
MOBILE NAVIGATION
====================================================== */

.mobile-nav {
display: none;
}

/* ======================================================
SEARCH
====================================================== */

.filter-grid {
display: grid;

grid-template-columns:
1fr 1fr;

gap: 12px;
}

.filter-grid input[type="text"] {
grid-column: span 2;
}

/* ======================================================
NOTES
====================================================== */

.notes-list {
display: flex;

flex-direction: column;

gap: 16px;
}

.note-item {
background: var(--card-bg);

border:
1px solid var(--border-color);

border-left:
4px solid var(--accent-color);

border-radius: var(--radius);

padding: 18px;

box-shadow: var(--shadow);

display: flex;

flex-direction: column;

gap: 12px;
}

.note-queued {
border-left-color: #f59e0b;
background: #fffbeb;
}

.note-title {
font-size: 1.1rem;
font-weight: 600;

overflow-wrap: anywhere;
}

.note-content {
font-size: 0.95rem;

color: #334155;

line-height: 1.5;

white-space: pre-wrap;

overflow-wrap: anywhere;
}

/*
.note-img {
 width: 100%;
 max-height: 350px;
 object-fit: cover;
 border-radius: 8px;
}
*/

.note-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.note-meta {
font-size: 0.8rem;

color: var(--text-muted);

text-align: right;
}

.empty-state {
text-align: center;

padding: 40px 20px;

color: var(--text-muted);
}

/* ======================================================
PAGINATION
====================================================== */

.pagination {
display: flex;

align-items: center;

justify-content: center;

gap: 6px;

flex-wrap: wrap;

margin: 20px 0;
}

.page-btn {
min-width: 38px;

padding: 8px 10px;
}

.page-btn.active {
background: #1d4ed8;
}

.page-info {
color: var(--text-muted);

font-size: 0.85rem;

margin: 0 8px;
}

/* ======================================================
IMAGE PREVIEW
====================================================== */

/*
#imagePreview {
 width: 100%;
 max-height: 160px;
 object-fit: contain;
 border-radius: 8px;
 background: #f1f5f9;
 display: none;
}
*/
#imagePreview {
  display: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
/* ======================================================
MOBILE
====================================================== */

@media (max-width: 767px) {

body {
padding: 12px;
}

.app-container {
width: 100%;
}

header {
gap: 12px;
}

header h1 {
font-size: 1.2rem;
}

.header-right {
gap: 5px;
}

.user-display {
display: none;
}

.logout-btn {
padding: 6px 10px;
font-size: 0.8rem;
}

.net-badge {
font-size: 0.7rem;

padding:
  4px 7px;


}

.mobile-nav {
display: grid;

grid-template-columns:
  1fr 1fr;

gap: 8px;

margin: 16px 0;


}

.mobile-nav button {
padding: 11px 8px;
}

.mobile-nav button.active {
background: #1d4ed8;
}

.desktop-layout {
display: block;

margin-top: 0;


}

.desktop-sidebar,
.desktop-notes {
display: none;
}

.desktop-sidebar.mobile-active,
.desktop-notes.mobile-active {
display: block;
}

.sticky-sidebar {
position: static;
}

.filter-grid {
grid-template-columns: 1fr;
}

.filter-grid input[type="text"] {
grid-column: auto;
}

.card {
padding: 16px;
}

.note-item {
padding: 14px;
}

.pagination {
gap: 4px;
}

.page-btn {
min-width: 34px;
padding: 8px;
}
}

/* ======================================================
DESKTOP
====================================================== */

@media (min-width: 768px) {

.mobile-nav {
display: none !important;
}

.desktop-sidebar,
.desktop-notes {
display: block !important;
}

}