:root {
  --tutte-sidebar-width: 206px;
  --tutte-sidebar-collapsed: 68px;
  --tutte-page-max: 1500px;
  --tutte-surface: rgba(255,255,255,.96);
}

/* ============================================================
   Sidebar — visual structure from approved mockup
   ============================================================ */
.tutte-sidebar {
  width: var(--tutte-sidebar-width);
  background: rgba(255,255,255,.98);
  border-right: 1px solid var(--tutte-border);
  box-shadow: 8px 0 28px rgba(30,40,60,.035);
  transition: width .18s ease, transform .2s ease;
}
.tutte-main {
  margin-left: var(--tutte-sidebar-width);
  min-height:100vh;
  transition: margin-left .18s ease;
}
.tutte-sidebar-brand {
  position:relative;
  min-height:142px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:17px 12px 8px;
}
.tutte-sidebar-logo-link { display:block; }
.tutte-sidebar-logo {
  width:124px;
  height:110px;
  object-fit:contain;
  transition:width .18s ease,height .18s ease;
}
.tutte-sidebar-toggle {
  position:absolute;
  right:7px;
  bottom:4px;
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--tutte-text-soft);
  font-size:1.05rem;
}
.tutte-sidebar-toggle:hover {
  background:var(--tutte-burgundy-soft);
  color:var(--tutte-burgundy);
}
.tutte-nav {
  padding:7px 11px 10px;
  gap:5px;
}
.tutte-nav-item {
  min-height:46px;
  padding:10px 12px;
  border-radius:8px;
  color:#24354f;
}
.tutte-nav-item:hover,
.tutte-nav-item.active {
  color:var(--tutte-burgundy);
  background:var(--tutte-burgundy-soft);
}
.tutte-nav-item.active {
  box-shadow:inset 3px 0 0 var(--tutte-burgundy);
}
.tutte-nav-icon { width:22px; flex:0 0 22px; }
.tutte-nav-label { white-space:nowrap; overflow:hidden; }
.tutte-sidebar-footer {
  margin-top:auto;
  padding:10px 26px 28px;
}
.tutte-sidebar-separator {
  width:36px;
  height:1px;
  background:#9aa4b3;
  margin-bottom:26px;
}
.tutte-sidebar-quote {
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:1.1rem;
  line-height:1.3;
  color:#465267;
}
.tutte-sidebar-accent {
  width:36px;
  height:2px;
  margin-top:14px;
  background:var(--tutte-burgundy);
}

html.tutte-sidebar-precollapsed .tutte-sidebar,
body.tutte-sidebar-collapsed .tutte-sidebar { width:var(--tutte-sidebar-collapsed); }
html.tutte-sidebar-precollapsed .tutte-main,
body.tutte-sidebar-collapsed .tutte-main { margin-left:var(--tutte-sidebar-collapsed); }
html.tutte-sidebar-precollapsed .tutte-sidebar-brand,
body.tutte-sidebar-collapsed .tutte-sidebar-brand { min-height:82px; padding:11px 5px 4px; }
html.tutte-sidebar-precollapsed .tutte-sidebar-logo,
body.tutte-sidebar-collapsed .tutte-sidebar-logo { width:52px; height:52px; }
html.tutte-sidebar-precollapsed .tutte-sidebar-toggle,
body.tutte-sidebar-collapsed .tutte-sidebar-toggle { right:18px; bottom:-25px; }
html.tutte-sidebar-precollapsed .tutte-nav,
body.tutte-sidebar-collapsed .tutte-nav { padding-top:30px; }
html.tutte-sidebar-precollapsed .tutte-nav-item,
body.tutte-sidebar-collapsed .tutte-nav-item { justify-content:center; padding-inline:8px; }
html.tutte-sidebar-precollapsed .tutte-nav-label,
html.tutte-sidebar-precollapsed .tutte-sidebar-quote,
html.tutte-sidebar-precollapsed .tutte-sidebar-separator,
html.tutte-sidebar-precollapsed .tutte-sidebar-accent,
body.tutte-sidebar-collapsed .tutte-nav-label,
body.tutte-sidebar-collapsed .tutte-sidebar-quote,
body.tutte-sidebar-collapsed .tutte-sidebar-separator,
body.tutte-sidebar-collapsed .tutte-sidebar-accent { display:none; }
html.tutte-sidebar-precollapsed .tutte-sidebar-footer,
body.tutte-sidebar-collapsed .tutte-sidebar-footer { padding-inline:8px; }

/* ============================================================
   Main canvas — top score strip, global bar, choir footer
   ============================================================ */
.tutte-page-background {
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:
    url('/img/tutte-choir-bg.svg') center bottom / 100% auto no-repeat,
    linear-gradient(180deg,#fafbfc 0%,#f6f7f8 58%,#fbf8f7 100%);
}
.tutte-page-background::before,
.tutte-page-background::after { content:none !important; }

.tutte-hero-strip {
  position:relative;
  z-index:2;
  height:112px;
  flex:0 0 112px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.12)),
    url('/img/tutte-score-bg.svg') center center / cover no-repeat;
  border-bottom:1px solid rgba(216,220,225,.65);
}
.tutte-hero-motto {
  position:absolute;
  left:16px;
  top:41px;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:1.38rem;
  color:#43526b;
}
.tutte-hero-motto::after {
  content:"";
  display:block;
  width:38px;
  height:2px;
  margin-top:12px;
  background:var(--tutte-burgundy);
}
.tutte-hero-quote {
  position:absolute;
  right:48px;
  top:29px;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:1.1rem;
  line-height:1.25;
  color:#697487;
}
.tutte-hero-quote::after {
  content:"";
  display:block;
  width:34px;
  height:2px;
  margin-top:10px;
  background:var(--tutte-burgundy);
}

.tutte-global-bar {
  position:relative;
  z-index:10;
  margin:0 14px;
  transform:translateY(-1px);
  min-height:66px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:18px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--tutte-border);
  border-radius:0 0 12px 12px;
  box-shadow:0 5px 18px rgba(24,35,55,.08);
}
.tutte-global-search {
  flex:1 1 auto;
  min-width:0;
  height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border:1px solid #d8dee8;
  border-radius:7px;
  background:#fbfcfd;
}
.tutte-global-search-icon {
  color:#43526b;
  font-size:1.5rem;
  line-height:1;
  transform:rotate(-18deg);
}
.tutte-global-search-input {
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--tutte-text);
  font-size:.95rem;
}
.tutte-global-search-input::placeholder { color:#7b8799; }
.tutte-account { flex:0 0 auto; }

.tutte-content {
  position:relative;
  z-index:2;
  width:min(var(--tutte-page-max),100%);
  margin:0 auto;
  padding:18px 24px 310px;
  flex:1 0 auto;
}
.tutte-content > h1:first-child,
.tutte-page-header h1 { display:block; }
.tutte-content h1 {
  font-size:clamp(2rem,3.4vw,2.75rem);
  letter-spacing:-.025em;
}
.tutte-content > .d-flex:first-of-type h1 {
  margin-top:0;
}
.tutte-content .card,
.tutte-section-card,
.tutte-filter-panel {
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 20px rgba(24,35,55,.07);
}
.tutte-footer { display:none; }

/* ============================================================
   Account tile
   ============================================================ */
.tutte-account-menu { position:relative; }
.tutte-account-button {
  display:flex;
  align-items:center;
  gap:8px;
  max-width:250px;
  padding:5px 9px;
  border:0;
  border-left:1px solid var(--tutte-border);
  border-radius:0;
  background:transparent;
  color:var(--tutte-text);
  font-size:.76rem;
}
.tutte-account-avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--tutte-burgundy-soft);
  color:var(--tutte-burgundy);
  font-weight:700;
}
.tutte-account-email {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
}
.tutte-account-dropdown {
  display:none;
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:1100;
  min-width:180px;
  padding:7px;
  border:1px solid var(--tutte-border);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--tutte-shadow);
}
.tutte-account-menu.open .tutte-account-dropdown { display:block; }
.tutte-account-dropdown button {
  width:100%;
  text-align:left;
  border:0;
  border-radius:7px;
  background:transparent;
  padding:8px 10px;
}
.tutte-account-dropdown button:hover {
  background:var(--tutte-burgundy-soft);
  color:var(--tutte-burgundy);
}

/* ============================================================
   Start page polish
   ============================================================ */
.tutte-welcome { margin-bottom:20px; }
.tutte-welcome h1 { font-size:clamp(1.8rem,3vw,2.5rem); margin-bottom:6px; }
.tutte-dashboard-card {
  display:block;
  height:100%;
  padding:18px;
  border:1px solid var(--tutte-border);
  border-radius:14px;
  background:rgba(255,255,255,.96);
  color:inherit;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(24,35,55,.065);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.tutte-dashboard-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(24,35,55,.1);
  border-color:#d7c1c3;
  color:inherit;
}
.tutte-dashboard-icon {
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--tutte-burgundy-soft);color:var(--tutte-burgundy);font-size:1.35rem;margin-bottom:12px;
}
.tutte-dashboard-title { font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.15rem;margin-bottom:7px; }
.tutte-priority-list { display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none; }
.tutte-priority-link { display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;color:var(--tutte-text);text-decoration:none;background:#fafafb; }
.tutte-priority-link:hover { background:var(--tutte-burgundy-soft);color:var(--tutte-burgundy); }

/* ============================================================
   Gallery retained behaviour
   ============================================================ */
.gallery-toolbar { display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px; }
.gallery-filter-details { margin-bottom:16px; }
.gallery-filter-details > summary { list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--tutte-border);border-radius:9px;background:#fff;font-weight:600; }
.gallery-filter-details > summary::-webkit-details-marker { display:none; }
.gallery-filter-details[open] > summary { margin-bottom:10px;background:var(--tutte-burgundy-soft);color:var(--tutte-burgundy); }
.gallery-filter-panel { padding:14px;border:1px solid var(--tutte-border);border-radius:12px;background:rgba(255,255,255,.96); }
.gallery-selection-controls { display:none !important; }
.gallery-selection-mode .gallery-selection-controls { display:flex !important; }
.gallery-select { display:none !important; }
.gallery-selection-mode .gallery-select { display:block !important; }
.gallery-group-select { display:none; }
.gallery-selection-mode .gallery-group-select { display:block; }
.gallery-selection-mode .gallery-image-link { cursor:pointer; }
.gallery-image-link { cursor:zoom-in; }
.gallery-edit-toolbar {
  display:none;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px;
  border:1px solid var(--tutte-border);border-radius:11px;background:rgba(255,255,255,.96);
}
.gallery-selection-mode .gallery-edit-toolbar { display:flex !important; }
.gallery-edit-block { display:flex;align-items:center;gap:7px; }
.gallery-edit-block .form-select { min-width:240px; }
.gallery-edit-description { flex:1 1 360px; }
.gallery-edit-description .form-control { min-width:220px; }
.gallery-edit-permission-note { flex-basis:100%; color:#9a5b24 !important; }
.gallery-lightbox {
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  background:rgba(9,10,13,.95);backdrop-filter:blur(6px);
}
.gallery-lightbox.open { display:flex; }
.gallery-lightbox-image { max-width:calc(100vw - 150px);max-height:calc(100vh - 90px);object-fit:contain;box-shadow:0 14px 55px rgba(0,0,0,.55); }
.gallery-lightbox button { position:absolute;border:0;background:rgba(255,255,255,.13);color:#fff;border-radius:999px; }
.gallery-lightbox button:hover { background:rgba(255,255,255,.24); }
.gallery-lightbox-close {
  top:18px;right:20px;width:auto !important;min-width:112px;height:42px;padding:0 15px;
  font-size:.95rem !important;font-weight:700;z-index:3;
}
.gallery-lightbox-close span { font-size:1.45rem;line-height:1;margin-left:5px;vertical-align:-.08em; }
.gallery-lightbox-prev,.gallery-lightbox-next { width:46px;height:46px;font-size:1.6rem; }
.gallery-lightbox-prev { left:24px;top:50%;transform:translateY(-50%); }
.gallery-lightbox-next { right:24px;top:50%;transform:translateY(-50%); }
.gallery-lightbox-counter { position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.35);padding:5px 10px;border-radius:20px;font-size:.82rem; }

/* ============================================================
   Responsive
   ============================================================ */
.tutte-floating-menu-button {
  position:absolute;
  top:12px;
  left:12px;
  z-index:40;
}

@media (max-width:991.98px) {
  .tutte-sidebar { width:var(--tutte-sidebar-width); }
  html.tutte-sidebar-precollapsed .tutte-sidebar,
  body.tutte-sidebar-collapsed .tutte-sidebar { width:var(--tutte-sidebar-width); }
  html.tutte-sidebar-precollapsed .tutte-main,
  body.tutte-sidebar-collapsed .tutte-main,
  .tutte-main { margin-left:0; }
  html.tutte-sidebar-precollapsed .tutte-sidebar-brand,
  body.tutte-sidebar-collapsed .tutte-sidebar-brand { min-height:142px;padding:17px 12px 8px; }
  html.tutte-sidebar-precollapsed .tutte-sidebar-logo,
  body.tutte-sidebar-collapsed .tutte-sidebar-logo { width:124px;height:110px; }
  html.tutte-sidebar-precollapsed .tutte-sidebar-toggle,
  body.tutte-sidebar-collapsed .tutte-sidebar-toggle { right:7px;bottom:4px; }
  html.tutte-sidebar-precollapsed .tutte-nav,
  body.tutte-sidebar-collapsed .tutte-nav { padding:7px 11px 10px; }
  html.tutte-sidebar-precollapsed .tutte-nav-label,
  html.tutte-sidebar-precollapsed .tutte-sidebar-quote,
  html.tutte-sidebar-precollapsed .tutte-sidebar-separator,
  html.tutte-sidebar-precollapsed .tutte-sidebar-accent,
  body.tutte-sidebar-collapsed .tutte-nav-label,
  body.tutte-sidebar-collapsed .tutte-sidebar-quote,
  body.tutte-sidebar-collapsed .tutte-sidebar-separator,
  body.tutte-sidebar-collapsed .tutte-sidebar-accent { display:initial; }
  html.tutte-sidebar-precollapsed .tutte-nav-item,
  body.tutte-sidebar-collapsed .tutte-nav-item { justify-content:flex-start;padding:10px 12px; }
  .tutte-hero-strip { height:94px;flex-basis:94px; }
  .tutte-hero-motto { left:54px;top:29px;font-size:1.08rem; }
  .tutte-hero-quote { display:none; }
  .tutte-global-bar { margin:0 8px;padding:8px 10px;gap:8px; }
  .tutte-account-email { max-width:110px; }
  .tutte-content { padding:16px 14px 235px; }
  .gallery-lightbox-image { max-width:calc(100vw - 28px);max-height:calc(100vh - 105px); }
  .gallery-lightbox-prev { left:10px; }
  .gallery-lightbox-next { right:10px; }
}

@media (max-width:575.98px) {
  .tutte-global-search { display:none; }
  .tutte-global-bar { justify-content:flex-end; }
  .tutte-content { padding-bottom:190px; }
  .tutte-page-background { background-size:auto 190px,auto; }
}