:root { --admin-panel: #f8f8f4; --admin-line: #d8dfd9; --admin-muted: #697870; }
.admin-body { min-height: 100vh; background: #e9eee9; }
.admin-shell { min-height: 100vh; }
.login-view { min-height: 100vh; display: grid; grid-template-columns: minmax(20rem, .92fr) minmax(25rem, 1.08fr); color: var(--white); background: var(--night); }
.login-art { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 32rem; background: linear-gradient(135deg, #082c23, #155141); }
.login-art::before { content: ""; position: absolute; inset: 0; opacity: .38; background-image: radial-gradient(rgba(247,217,128,.43) .65px, transparent .65px); background-size: 14px 14px; }
.login-art > img { position: relative; z-index: 2; width: min(25rem, 65%); mix-blend-mode: screen; filter: drop-shadow(0 1.8rem 1.6rem rgba(0,0,0,.3)); }
.login-orbit { position: absolute; border: 1px solid rgba(247,217,128,.35); border-radius: 50%; }
.orbit-one { width: 33rem; aspect-ratio: 1; transform: rotate(25deg); border-left-color: transparent; }.orbit-two { width: 23rem; aspect-ratio: 1; transform: rotate(-32deg); border-right-color: transparent; }
.login-card { align-self: center; width: min(31rem, calc(100% - 3rem)); margin-inline: auto; padding: 3rem; border: 1px solid rgba(247,217,128,.2); border-radius: 1.5rem; background: rgba(255,255,255,.035); }
.admin-brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; direction: ltr; }.login-card .admin-brand { margin-bottom: 3.2rem; }.admin-brand .brand-logo-wrap { width: 3rem; height: 3rem; }.admin-brand .brand-logo { width: 3.7rem; }.admin-brand .brand-copy strong { font-size: .84rem; }.admin-brand .brand-copy small { font-size: .44rem; }
.login-card h1 { margin: 0 0 1rem; color: var(--white); font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; }.login-card > p:not(.eyebrow) { margin-bottom: 2rem; color: rgba(255,255,255,.72); font-size: .88rem; line-height: 2; }
.login-form { display: grid; gap: 1rem; }.login-form label { display: grid; gap: .45rem; color: rgba(255,255,255,.88); font-size: .75rem; }.login-form input { padding: .8rem .9rem; border: 1px solid rgba(255,255,255,.26); border-radius: .6rem; outline: none; color: white; background: rgba(0,0,0,.16); }.login-form input:focus { border-color: var(--gold-light); box-shadow: 0 0 0 3px rgba(247,217,128,.12); }.login-form .button { width: 100%; margin-top: .4rem; }.back-link { width: max-content; display: inline-flex; margin-top: 1.6rem; color: var(--gold-light); font-size: .76rem; }
.dashboard { min-height: 100vh; color: var(--ink); }.admin-header { min-height: 5.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 max(1.5rem, calc((100vw - 1370px) / 2)); color: var(--white); background: var(--night); }.admin-header-actions { display: flex; align-items: center; gap: .9rem; }.view-site { color: var(--gold-light); font-size: .75rem; }.logout-button { padding: .48rem .8rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: white; background: transparent; font-size: .72rem; }
.admin-layout { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: calc(100vh - 5.2rem); }.admin-sidebar { padding: 2rem 1rem; color: #dce7dd; background: #0c3228; }.admin-sidebar > p { padding: 0 .8rem; margin-bottom: .9rem; color: rgba(255,255,255,.5); font-size: .66rem; }.side-nav-button { width: 100%; display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border: 0; border-radius: .55rem; color: rgba(255,255,255,.75); background: transparent; text-align: right; font-size: .8rem; }.side-nav-button:hover, .side-nav-button.is-active { color: var(--white); background: rgba(255,255,255,.11); }.side-nav-button span { color: var(--gold-light); }.sidebar-note { margin: 2rem .8rem 0; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.56); font-size: .66rem; line-height: 1.9; }.sidebar-note > span { display: inline-block; width: .42rem; height: .42rem; margin-left: .35rem; border-radius: 50%; background: #8bd0a1; }
.admin-content { padding: clamp(1.4rem, 4vw, 3.5rem); background: #eef1ec; }.admin-view { max-width: 1080px; }.view-heading, .editor-heading { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }.view-heading h2, .editor-heading h2 { margin: .2rem 0 .65rem; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; }.view-heading > div > p:not(.eyebrow), .editor-heading p:not(.eyebrow) { max-width: 42rem; margin: 0; color: var(--admin-muted); font-size: .81rem; line-height: 1.9; }.compact-heading { display: block; }.compact-heading > div { max-width: 44rem; }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.2rem; }.admin-stats article { padding: 1rem 1.2rem; border: 1px solid var(--admin-line); border-radius: .9rem; background: rgba(255,255,255,.72); }.admin-stats span, .admin-stats small { display: block; color: var(--admin-muted); font-size: .66rem; }.admin-stats strong { display: block; margin: .22rem 0; color: var(--green); font-family: "Playfair Display", Georgia, serif; font-size: 1.9rem; line-height: 1; }
.products-admin-list { overflow: hidden; border: 1px solid var(--admin-line); border-radius: 1rem; background: var(--white); }.admin-product-row { display: grid; grid-template-columns: 3.35rem minmax(14rem, 1.35fr) minmax(10rem, .7fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--admin-line); }.admin-product-row:last-child { border-bottom: 0; }.admin-product-image { overflow: hidden; display: grid; place-items: center; width: 3.35rem; aspect-ratio: 1; border-radius: .7rem; color: white; background: #3e7261; }.admin-product-image img { width: 100%; height: 100%; object-fit: cover; }.product-initial { font-family: "Playfair Display", Georgia, serif; font-size: 1.5rem; }.admin-product-title { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }.admin-product-title h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-size: 1.05rem; direction: ltr; text-align: right; }.admin-product-main p { margin: .05rem 0; color: #a08448; font-size: .66rem; }.admin-product-main small { display: block; overflow: hidden; color: var(--admin-muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }.publish-status { padding: .16rem .45rem; border-radius: 99px; font-size: .58rem; }.is-published { color: #226346; background: #e3f4e7; }.is-draft { color: #836325; background: #fbf0ce; }.admin-product-meta { display: grid; gap: .25rem; color: var(--admin-muted); font-size: .64rem; }.admin-product-meta > span { color: #536a5d; }.admin-row-actions { display: flex; gap: .5rem; }.admin-row-actions button { padding: .38rem .64rem; border: 1px solid #ced8cf; border-radius: .45rem; background: white; font-size: .65rem; }.row-edit { color: var(--green); }.row-delete { color: #a64c3c; }.admin-empty { padding: 3.5rem 1.2rem; color: var(--admin-muted); text-align: center; }.admin-empty strong { color: var(--ink); }.admin-empty p { margin: .35rem 0 0; font-size: .8rem; }
.button-link { padding: 0; border: 0; background: transparent; }.editor-heading { align-items: start; }.editor-heading .back-link { margin: 0 0 .8rem; }.editor-state { padding: .28rem .55rem; border: 1px solid #d6ddd7; border-radius: 999px; color: #68786e; background: white; font-size: .66rem; white-space: nowrap; }
.admin-form { padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--admin-line); border-radius: 1rem; background: var(--white); box-shadow: 0 .9rem 2.5rem rgba(16,34,29,.05); }.admin-form label { display: grid; gap: .4rem; margin-bottom: .95rem; color: #41594d; font-size: .74rem; font-weight: 600; }.admin-form input:not([type=file]), .admin-form select, .admin-form textarea { width: 100%; padding: .7rem .78rem; border: 1px solid #cad4cb; border-radius: .55rem; outline: none; color: var(--ink); background: #fffefa; font-size: .82rem; transition: .2s; }.admin-form textarea { resize: vertical; line-height: 1.9; }.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,85,70,.11); }.admin-form input[type=file] { padding: .6rem 0; color: var(--admin-muted); font-size: .73rem; }.admin-form-grid { display: grid; gap: .85rem; }.two-columns { grid-template-columns: 1fr 1fr; }.form-section-title { display: flex; gap: .8rem; align-items: start; margin: 2rem 0 1rem; }.form-section-title:first-child { margin-top: 0; }.form-section-title > span { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: #715b28; background: #f5e7bd; font-family: "DM Mono", monospace; font-size: .62rem; }.form-section-title h3 { margin: 0 0 .12rem; font-size: .87rem; }.form-section-title p { margin: 0; color: var(--admin-muted); font-size: .67rem; }.image-editor { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.2rem; align-items: center; margin-bottom: 1rem; }.image-preview { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px dashed #afbeb2; border-radius: .8rem; color: #829087; background: #f0f4ee; font-size: .66rem; }.image-preview img { width: 100%; height: 100%; object-fit: cover; }.image-inputs > p { margin: -.25rem 0 0; color: var(--admin-muted); font-size: .64rem; }.form-actions { display: flex; gap: .7rem; align-items: center; margin-top: 1.5rem; }.button-plain { border-color: #ced7cf; color: #4c6055; background: white; }.button-plain:hover { background: #f1f4f0; }.form-status { margin: .75rem 0 0; }.form-status.is-error { color: #b44c3d; }
.admin-toast { position: fixed; z-index: 20; left: 50%; bottom: 1.2rem; width: min(26rem, calc(100% - 2rem)); padding: .72rem 1rem; transform: translate(-50%, 160%); border: 1px solid rgba(247,217,128,.35); border-radius: .7rem; color: white; background: var(--night); box-shadow: 0 1rem 2rem rgba(0,0,0,.22); font-size: .74rem; text-align: center; transition: transform .25s; }.admin-toast.is-visible { transform: translate(-50%, 0); }
@media (max-width: 850px) { .login-view { grid-template-columns: 1fr; }.login-art { min-height: 15rem; }.login-art > img { width: 10rem; }.orbit-one { width: 20rem; }.orbit-two { width: 14rem; }.login-card { margin-block: 2rem 3rem; }.admin-layout { grid-template-columns: 1fr; }.admin-sidebar { display: flex; align-items: center; gap: .4rem; overflow-x: auto; padding: .75rem 1rem; }.admin-sidebar > p, .sidebar-note { display: none; }.side-nav-button { width: max-content; white-space: nowrap; }.admin-content { padding: 1.4rem 1rem 2rem; }.admin-product-row { grid-template-columns: 3rem minmax(0, 1fr) auto; }.admin-product-meta { display: none; } }
@media (max-width: 560px) { .login-card { width: calc(100% - 2rem); padding: 1.5rem; }.admin-header { min-height: 4.7rem; padding-inline: 1rem; }.admin-header .brand-copy { display: none; }.admin-stats, .two-columns { grid-template-columns: 1fr; }.view-heading { align-items: start; flex-direction: column; }.view-heading .button { width: 100%; }.admin-product-row { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .75rem; padding: .85rem; }.admin-row-actions { grid-column: 2; }.admin-product-main small { white-space: normal; }.image-editor { grid-template-columns: 1fr; }.image-preview { width: 8rem; }.form-actions { flex-direction: column; align-items: stretch; }.form-actions .button { width: 100%; } }