/* Direction: Dressly - a pastel boutique. Cream paper, lavender ink, pink/peach/mint tiles, a fashion-magazine serif */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #fff9f3;
  --surface: #ffffff;
  --surface-2: #fdf1f6;
  --border: #eadff0;
  --border-strong: #b8b1b3;
  --ink: #2f2145;
  --muted: #655a78;
  --accent: #7a49d6;
  --accent-hover: #683eb6;
  --accent-ink: #ffffff;
  --accent-text: #6537bd;
  --accent-strong: #7a49d6;
  --accent-soft: #f1e8ff;
  --accent-border: #c3aae6;
  --success: #1f7a53;
  --success-ink: #ffffff;
  --success-soft: #e4eae0;
  --success-strong: #1d704c;
  --warning: #9a6200;
  --warning-ink: #ffffff;
  --warning-soft: #f3e7d6;
  --warning-strong: #8e5a00;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6e0d9;
  --danger-strong: #b3261e;
  --chart-1: #7a49d6;
  --chart-2: #e04290;
  --chart-3: #874200;
  --chart-4: #828b09;
  --chart-5: #0a6352;
  --chart-6: #1990c5;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --radius-card: 24px;
  --radius-btn: 16px;
  --radius-input: 14px;
  --shadow-card: 0 10px 30px rgba(122, 73, 214, 0.1);
  --display-weight: 600;
  --display-tracking: -0.02em;
  --x-pink: #fcd5e3;
  --x-lav: #e3d7ff;
  --x-peach: #ffdcc8;
  --x-coral: #ff9c88;
  --x-mint: #c8f0dc;
  --x-butter: #fff0a8;
  --x-sky: #cfe6ff;
  --x-grey: #e6e1ec;
  --x-line: rgba(47, 33, 69, 0.1);
  --x-line-strong: rgba(47, 33, 69, 0.4);
  --x-scrim: rgba(47, 33, 69, 0.45);
  --x-glow: rgba(122, 73, 214, 0.18);
  --x-on-pastel: #2f2145;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(135deg, #fcc9dd 0%, #dccbff 55%, #ffdcc8 100%);
  --gradient-side: linear-gradient(180deg, #f6ecff 0%, #fff0f6 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #0c0816;
  --surface: #24212d;
  --surface-2: #181422;
  --border: #2e2b37;
  --border-strong: #55525c;
  --ink: #fff9f3;
  --muted: #9e999b;
  --accent: #7a49d6;
  --accent-hover: #8e64dc;
  --accent-ink: #ffffff;
  --accent-text: #a07ce2;
  --accent-strong: #9871df;
  --accent-soft: #241640;
  --accent-border: #3d256c;
  --success: #1f7a53;
  --success-ink: #ffffff;
  --success-soft: #102123;
  --success-strong: #50987a;
  --warning: #9a6200;
  --warning-ink: #ffffff;
  --warning-soft: #2b1c11;
  --warning-strong: #b08638;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #310f18;
  --danger-strong: #c9645e;
  --chart-1: #8050dd;
  --chart-2: #e74a96;
  --chart-3: #c1630a;
  --chart-4: #889219;
  --chart-5: #22947c;
  --chart-6: #0098d1;
}

/* Dressly - pastel boutique styles (plain CSS, compiled last) */
body { background-image: radial-gradient(circle at 12% -10%, var(--x-pink) 0, transparent 38%), radial-gradient(circle at 100% 0, var(--x-lav) 0, transparent 34%); background-attachment: fixed; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 17.5rem; transform: translateX(-100%); transition: transform .25s ease; z-index: 40; background: var(--gradient-side); border-right: 1px solid var(--border); overflow-y: auto; }
.sidebar.is-open { transform: none; }
.scrim { position: fixed; inset: 0; background: var(--x-scrim); z-index: 30; display: none; }
.scrim.is-open { display: block; }
@media (min-width: 1024px) {
  .sidebar { position: sticky; top: 0; height: 100vh; transform: none; flex-shrink: 0; }
  .scrim { display: none !important; }
}
.nav-link { display: flex; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: 14px; font-weight: 600; color: var(--ink); border-left: 5px solid transparent; transition: background .15s, transform .15s; width: 100%; text-align: left; }
.nav-link:hover { background: rgba(255, 255, 255, .8); transform: translateX(2px); }
.nav-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nav-link.is-active { background: var(--surface); border-left-color: var(--accent); box-shadow: var(--shadow-card); color: var(--accent-text); }
.nav-emoji { font-size: 1.35rem; width: 1.8rem; text-align: center; }

.tile { border-radius: 24px; padding: 1.25rem; color: var(--x-on-pastel); border: 1px solid var(--x-line); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; display: block; }
a.tile:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 38px var(--x-glow); }
a.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tint-pink { background: var(--x-pink); } .tint-lav { background: var(--x-lav); } .tint-peach { background: var(--x-peach); }
.tint-mint { background: var(--x-mint); } .tint-butter { background: var(--x-butter); } .tint-sky { background: var(--x-sky); }
.tint-coral { background: var(--x-coral); } .tint-grey { background: var(--x-grey); }
.tile .muted-on { color: var(--x-on-pastel); }
.hero-card { background: var(--gradient-hero); color: var(--x-on-pastel); border-radius: 32px; padding: 1.75rem; box-shadow: var(--shadow-card); position: relative; overflow: hidden; }
.hero-card .sparkle { position: absolute; right: 1rem; top: .2rem; font-size: 5rem; opacity: .35; pointer-events: none; transform: rotate(12deg); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 1.25rem; box-shadow: var(--shadow-card); }
.stat-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; }

.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--x-on-pastel); border: 1px solid var(--x-line); }
.pill-pink { background: var(--x-pink); } .pill-lav { background: var(--x-lav); } .pill-peach { background: var(--x-peach); }
.pill-mint { background: var(--x-mint); } .pill-butter { background: var(--x-butter); } .pill-sky { background: var(--x-sky); }
.pill-coral { background: var(--x-coral); } .pill-grey { background: var(--x-grey); }
.demo-tag { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .45rem; border-radius: 999px; background: var(--x-butter); color: var(--x-on-pastel); border: 1px dashed var(--x-line-strong); }

.dress-card { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; }
.dress-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px var(--x-glow); }
.dress-photo { position: relative; aspect-ratio: 4 / 5; background: var(--gradient-hero); overflow: hidden; }
.dress-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dress-card:hover .dress-photo img { transform: scale(1.04); }
.dress-photo .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 4.5rem; }
.dress-photo .corner { position: absolute; left: .75rem; top: .75rem; }
.thumb { width: 3.25rem; height: 4rem; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: var(--gradient-hero); display: grid; place-items: center; font-size: 1.5rem; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.row-card { display: flex; flex-direction: column; gap: .75rem; padding: .9rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
@media (min-width: 768px) { .row-card { flex-direction: row; align-items: center; } }

.btn-big { padding: .9rem 1.4rem; font-size: 1.05rem; font-weight: 700; border-radius: 18px; }
.quick { display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; border-radius: 22px; font-weight: 700; font-size: 1.05rem; color: var(--x-on-pastel); border: 1px solid var(--x-line); box-shadow: var(--shadow-card); transition: transform .15s; }
.quick:hover { transform: translateY(-3px) scale(1.01); }
.quick:active { transform: scale(.98); }
.quick:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.quick .big-emoji { font-size: 2rem; }

.bar-track { background: var(--accent-soft); border-radius: 999px; height: .8rem; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--x-pink), var(--accent)); }
.col-chart { display: flex; align-items: flex-end; gap: .6rem; height: 11rem; }
.col-chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; height: 100%; font-size: .75rem; }
.col-chart .col i { display: block; width: 100%; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, var(--accent), var(--x-pink)); min-height: 4px; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-day { min-height: 5.5rem; border-radius: 14px; padding: .35rem; background: var(--surface); border: 1px solid var(--border); font-size: .75rem; overflow: hidden; }
.cal-day.is-today { outline: 3px solid var(--accent); }
.cal-day.is-blank { background: transparent; border-color: transparent; }
.cal-ev { display: block; margin-top: .2rem; padding: .12rem .35rem; border-radius: 8px; color: var(--x-on-pastel); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { filter: brightness(.95); text-decoration: underline; }
@media (max-width: 640px) { .cal-day { min-height: 3.5rem; padding: .2rem; } .cal-ev { font-size: 0; padding: .3rem; } .cal-head { font-size: .65rem; } }

.fx-rise { animation: rise .5s ease both; }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
html.reduced-motion .fx-rise, html.reduced-motion .dress-card, html.reduced-motion .tile { animation: none; transition: none; }

.flash { border-radius: 18px; padding: .9rem 1.1rem; font-weight: 600; border: 1px solid var(--x-line); }
.flash-ok { background: var(--x-mint); color: var(--x-on-pastel); }
.flash-err { background: var(--x-coral); color: var(--x-on-pastel); }
.table-wrap { overflow-x: auto; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table-wrap th { text-align: left; padding: .75rem .9rem; background: var(--accent-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.table-wrap td { padding: .7rem .9rem; border-top: 1px solid var(--border); vertical-align: middle; }
.table-wrap tr:hover td { background: var(--surface-2); }
.login-bg { background: var(--gradient-hero); }
.summary-box { border-radius: 20px; background: var(--x-lav); color: var(--x-on-pastel); padding: 1rem 1.2rem; }
.summary-box dt { opacity: .85; } .summary-box dd { font-weight: 700; }