/* Basic Pinterest/Instagram-inspired layout tweaks */
body { -webkit-font-smoothing: antialiased; }
.card img { object-fit: cover; }
.card .carousel, .card .carousel .carousel-inner, .card .carousel-item { border-top-left-radius: .5rem; border-top-right-radius: .5rem; overflow: hidden; }

/* Floating action button */
.btn.rounded-circle { display: inline-flex; align-items: center; justify-content: center; }

/* Make navbar look like Instagram-ish */
.navbar-brand { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; letter-spacing: .5px; }

/* Basic Pinterest/Instagram-inspired layout tweaks */
body { -webkit-font-smoothing: antialiased; }
.card img { object-fit: cover; }
.card .carousel, .card .carousel .carousel-inner, .card .carousel-item { border-top-left-radius: .5rem; border-top-right-radius: .5rem; overflow: hidden; }

/* Floating action button */
.btn.rounded-circle { display: inline-flex; align-items: center; justify-content: center; }

/* Make navbar look like Instagram-ish */
.navbar-brand { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; letter-spacing: .5px; }

/* Notifications (iOS-like) */
#notify-root { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; z-index: 1080; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; padding: 0 12px; }
#notify-root .notify { pointer-events: auto; width: min(520px, 92vw); border-radius: 14px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 12px; border: 1px solid; box-shadow: 0 12px 30px rgba(0,0,0,.25); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); }
#notify-root .notify .icon { flex: 0 0 24px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 14px; margin-top: 2px; }
#notify-root .notify .content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#notify-root .notify .message { font-size: 14px; line-height: 1.35; word-break: break-word; }
#notify-root .notify .actions { margin-left: 0; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; align-self: flex-end; }
#notify-root .notify .actions .btn { padding: 6px 10px; border-radius: 10px; font-weight: 600; font-size: 13px; border: 1px solid; background: transparent; }
#notify-root .notify .close { margin-left: 8px; cursor: pointer; opacity: .7; }
#notify-root .notify .close:hover { opacity: 1; }
#notify-root .notify.info { border-left: 4px solid #0d6efd; }
#notify-root .notify.success { border-left: 4px solid #28a745; }
#notify-root .notify.warn { border-left: 4px solid #ffc107; }
#notify-root .notify.error { border-left: 4px solid #dc3545; }

/* Light/Dark theme support via Bootstrap's data-bs-theme */
[data-bs-theme="dark"] #notify-root .notify { background: rgba(28,28,30,.88); color: #f5f5f7; border-color: rgba(255,255,255,.08); }
[data-bs-theme="dark"] #notify-root .notify .icon { background: rgba(255,255,255,.08); color: #f5f5f7; }
[data-bs-theme="dark"] #notify-root .notify .actions .btn { color: #f5f5f7; border-color: rgba(255,255,255,.25); }
[data-bs-theme="dark"] #notify-root .notify .actions .btn.primary { background: #0d6efd; border-color: #0d6efd; color: #fff; }

/* default/light */
:root:not([data-bs-theme="dark"]) #notify-root .notify,
[data-bs-theme="light"] #notify-root .notify { background: rgba(250,250,252,.95); color: #111; border-color: rgba(0,0,0,.06); }
:root:not([data-bs-theme="dark"]) #notify-root .notify .icon,
[data-bs-theme="light"] #notify-root .notify .icon { background: rgba(0,0,0,.06); color: #111; }
:root:not([data-bs-theme="dark"]) #notify-root .notify .actions .btn,
[data-bs-theme="light"] #notify-root .notify .actions .btn { color: #111; border-color: rgba(0,0,0,.2); }
:root:not([data-bs-theme="dark"]) #notify-root .notify .actions .btn.primary,
[data-bs-theme="light"] #notify-root .notify .actions .btn.primary { background: #0d6efd; border-color: #0d6efd; color: #fff; }