/* Category layout. Decorative interaction belongs to vastelor-feedback.css. */
.v-shell-page :is(.v-category-dialog,.v-cat-editor) { --v-dialog-width:540px; }
.v-shell-page :is([data-category-dialog],.v-cat-editor) .v-breakdown-dialog__header { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; }
.v-shell-page :is([data-category-dialog],.v-cat-editor) .v-card-title { font-size:18px; line-height:1.3; font-weight:600; min-width:0; overflow-wrap:anywhere; }
.v-cat-list { display:flex; flex-direction:column; min-width:0; border-radius:17px; overflow:hidden; }
.v-cat-choice { position:relative; min-width:0; min-height:54px; padding:9px 12px; display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:12px; border:0; border-radius:0; background:transparent; color:var(--v-text-1); font:inherit; text-align:start; cursor:pointer; }
.v-cat-choice + .v-cat-choice::before { content:''; position:absolute; top:0; inset-inline-start:56px; inset-inline-end:12px; height:1px; background:var(--v-line); pointer-events:none; }
.v-cat-choice > .v-cat-label { min-width:0; font-size:14px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.v-cat-choice--legacy { grid-template-columns:minmax(0,1fr); }
.v-shell-page .v-cat-choice .v-cat-tile { width:32px; height:32px; border-radius:10px; }
.v-shell-page .v-cat-choice .v-cat-tile .v-icon { width:22px; height:22px; }
.v-shell-page .v-cat-tile { width:36px; height:36px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--v-pictogram-fill); border:0; box-shadow:none; }
.v-shell-page .v-cat-tile .v-icon { width:24px; height:24px; }
:root[data-theme="dark"] .v-shell-page .v-cat-tile { color:var(--v-pictogram-fill); background:#101011; border:1px solid color-mix(in srgb,var(--v-pictogram-fill) 26%,transparent); }
.v-cat-add { margin-top:14px; width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:0; border-radius:16px; color:var(--v-text-1); background:var(--v-surface-1); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.v-cat-add .v-icon { width:19px; height:19px; flex:none; }
.v-cat-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:3px; gap:3px; border-radius:15px; margin-bottom:16px; }
.v-cat-tabs button { min-height:38px; min-width:0; padding:7px 10px; font:inherit; font-size:14px; font-weight:500; color:var(--v-text-1); border:0; border-radius:12px; background:transparent; overflow-wrap:anywhere; cursor:pointer; }
.v-cat-form { display:flex; flex-direction:column; gap:18px; }
.v-cat-preview { display:flex; align-items:center; gap:10px; min-height:54px; min-width:0; padding:9px 12px; border-radius:16px; }
.v-shell-page .v-cat-preview .v-cat-tile { width:32px; height:32px; border-radius:10px; }
.v-shell-page .v-cat-preview .v-cat-tile .v-icon { width:22px; height:22px; }
.v-cat-preview strong { font-size:16px; font-weight:500; overflow-wrap:anywhere; }
.v-cat-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.v-cat-field > label,.v-cat-field > h3 { font-size:13px; line-height:1.3; font-weight:500; color:var(--v-text-2); margin:0; }
.v-shell-page .v-cat-field input { width:100%; min-width:0; box-sizing:border-box; border:0; border-radius:14px; min-height:46px; padding:11px 12px; color:var(--v-text-1); font:inherit; font-size:16px; }
.v-cat-colors { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.v-cat-color { position:relative; isolation:isolate; border:0; min-width:0; min-height:44px; padding:7px; border-radius:12px; background:transparent; display:grid; place-items:center; cursor:pointer; }
.v-cat-color::before { content:''; position:absolute; top:50%; left:50%; width:37px; height:37px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.v-cat-color > span { position:relative; width:27px; height:27px; border-radius:50%; background:var(--v-cat-swatch); }
.v-cat-glyphs { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.v-cat-glyph { position:relative; isolation:isolate; min-width:0; min-height:48px; padding:6px; display:grid; place-items:center; border:0; border-radius:14px; background:transparent; cursor:pointer; }
.v-cat-glyph::before { content:''; position:absolute; top:50%; left:50%; width:44px; height:44px; border-radius:13px; transform:translate(-50%,-50%); pointer-events:none; }
.v-cat-glyph .v-cat-tile { position:relative; }
.v-cat-glyph .v-cat-tile { background:transparent; color:var(--v-text-1); border:0; }
:root[data-theme="dark"] .v-cat-glyph .v-cat-tile { background:transparent; color:var(--v-text-1); border:0; }
.v-cat-more { align-self:start; font:inherit; font-size:13px; min-height:44px; padding:6px 8px; border:0; border-radius:12px; color:var(--v-text-2); background:transparent; cursor:pointer; }
.v-cat-submit { width:100%; margin-top:16px; min-height:48px; padding:12px; border:0; border-radius:16px; color:var(--v-positive); background:color-mix(in srgb,var(--v-positive) 9%,transparent); font:inherit; font-size:15px; font-weight:600; cursor:pointer; }
.v-cat-submit:disabled { opacity:.45; cursor:default; }
.v-cat-error { color:var(--v-danger); font-size:13px; line-height:1.5; overflow-wrap:anywhere; margin-top:12px; }
.v-cat-settings { width:100%; min-width:0; max-width:720px; margin-inline:auto; }
.v-cat-settings-group { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.v-cat-settings-group > h3 { margin:8px 12px; font-size:13px; font-weight:500; }
.v-cat-settings-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; gap:10px; padding:4px 12px 4px 0; border-radius:17px; background:var(--v-surface-1); }
.v-cat-settings-edit { min-width:0; min-height:58px; padding:10px 12px; display:grid; grid-template-columns:36px minmax(0,1fr) 16px; gap:12px; align-items:center; color:var(--v-text-1); background:transparent; border:0; border-radius:17px; font:inherit; text-align:start; cursor:pointer; }
.v-cat-settings-edit strong { font-size:14px; font-weight:500; line-height:1.4; overflow-wrap:anywhere; }
.v-cat-settings-edit > .v-icon { width:14px; height:14px; color:var(--v-text-2); }
.v-cat-toggle { width:44px; height:44px; padding:7px; display:grid; place-items:center; cursor:pointer; }
.v-cat-toggle .v-icon { width:20px; height:20px; }
.v-cat-settings .v-cat-add { margin-bottom:8px; }
@media (max-width:359px) { .v-cat-choice { padding:9px 10px; gap:10px; } .v-cat-glyphs,.v-cat-colors { grid-template-columns:repeat(5,minmax(0,1fr)); } }

/* The close action is always first; long titles keep their own flexible slot. */
.v-shell-page [data-category-dialog] .v-breakdown-dialog__header { grid-template-columns:44px minmax(0,1fr) auto; gap:8px; }
.v-shell-page :is([data-category-dialog],.v-cat-editor) > .v-breakdown-dialog__surface { padding:18px; }
.v-shell-page [data-category-dialog] .v-cat-toolbar-actions { gap:4px; }
.v-shell-page :is([data-category-dialog],.v-cat-editor) .v-breakdown-dialog__header > .v-card-title { margin:0; }
.v-shell-page :is([data-category-dialog],.v-cat-editor) .v-breakdown-dialog__header { padding-bottom:14px; }
.v-cat-settings-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.v-cat-toolbar-actions { display:flex; align-items:center; gap:8px; }
.v-cat-settings-toolbar .v-cat-tabs { margin-bottom:0; }
.v-shell-page .v-cat-add-round { width:44px; height:44px; min-width:44px; min-height:44px; padding:0; border-radius:50%; flex:none; }
.v-shell-page .v-cat-add-round .v-icon { width:21px; height:21px; }
.v-cat-settings-group { display:block; margin-top:22px; }
.v-cat-settings-group > .v-cat-section-title { margin:0 12px 9px; font-size:13px; font-weight:500; line-height:1.4; color:var(--v-text-2); overflow-wrap:anywhere; }
.v-cat-settings-rows { border-radius:19px; background:var(--v-surface-1); overflow:hidden; }
.v-cat-settings-row { position:relative; padding:0 7px 0 0; gap:3px; border-radius:0; background:transparent; }
.v-cat-settings-row + .v-cat-settings-row::before { content:''; position:absolute; top:0; left:60px; right:12px; height:1px; background:var(--v-line); pointer-events:none; }
.v-cat-settings-edit { gap:10px; border-radius:0; }
.v-cat-settings-edit .v-cat-tile { width:32px; height:32px; border-radius:10px; }
.v-cat-settings-edit .v-cat-tile .v-icon { width:22px; height:22px; }
.v-cat-toggle { flex:none; border:0; border-radius:50%; background:transparent; color:var(--v-text-2); }
.v-cat-toggle .v-icon { width:20px; height:20px; }
.v-cat-toggle[data-cat-visibility="hidden"] { color:var(--v-text-3); }
.v-cat-empty { margin:0; padding:24px 16px; color:var(--v-text-2); font-size:14px; line-height:1.5; text-align:center; }
@media (max-width:359px) { .v-cat-settings-toolbar { gap:8px; } }
@media (max-width:359px) { .v-shell-page :is([data-category-dialog],.v-cat-editor) .v-card-title { font-size:17px; } }

/* One composer: ready presets and a custom draft share the same window. */
.v-shell-page .v-cat-editor { --v-dialog-width:760px; }
.v-shell-page .v-cat-editor .v-breakdown-dialog__header { grid-template-columns:44px minmax(0,1fr) auto; gap:8px; }
.v-shell-page .v-cat-editor .v-breakdown-dialog__header .v-card-title { text-align:center; }
.v-shell-page .v-cat-editor .v-dialog-save { min-height:44px; padding:6px 4px; border:0; background:transparent; color:var(--v-positive); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.v-shell-page .v-cat-editor .v-dialog-save:disabled { opacity:.45; cursor:default; }
.v-cat-composer { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; min-width:0; }
.v-cat-composer > section { min-width:0; }
.v-cat-section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; margin-bottom:7px; }
.v-cat-section-heading h3,.v-cat-own-title { margin:0; min-width:0; font-size:15px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.v-cat-section-heading .v-cat-more { min-height:36px; padding:5px 8px; flex:none; }
.v-cat-own-title { margin-bottom:14px; }
.v-cat-own-section .v-cat-form { gap:16px; }
.v-cat-name-row { display:grid; grid-template-columns:50px minmax(0,1fr); gap:10px; align-items:center; min-width:0; }
.v-shell-page .v-cat-name-row .v-cat-preview { width:50px; height:50px; min-height:50px; padding:9px; box-sizing:border-box; justify-content:center; border-radius:14px; }
.v-shell-page .v-cat-name-row input { height:50px; }
.v-cat-own-section .v-cat-glyphs { grid-template-columns:repeat(6,minmax(0,1fr)); }
.v-cat-own-section .v-cat-glyph { min-height:44px; padding:4px; }
.v-cat-color-picker { display:grid; grid-template-columns:140px minmax(0,1fr); align-items:center; gap:16px; min-width:0; }
.v-cat-wheel { position:relative; width:140px; height:140px; flex:none; border-radius:50%; isolation:isolate; touch-action:none; cursor:crosshair; background:radial-gradient(circle closest-side,#fff 0%,rgb(255 255 255 / 0%) 100%),conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.v-cat-wheel::before { content:''; position:absolute; inset:0; border-radius:inherit; background:#000; opacity:var(--v-cat-darkness,0); pointer-events:none; }
.v-cat-wheel-thumb { position:absolute; z-index:1; width:17px; height:17px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); background:var(--v-cat-swatch); box-shadow:0 0 0 1px rgb(0 0 0 / 20%); pointer-events:none; }
.v-cat-color-controls { min-width:0; display:flex; flex-direction:column; gap:12px; }
.v-cat-color-code { display:grid; grid-template-columns:26px minmax(0,1fr); gap:8px; align-items:center; min-width:0; }
.v-cat-color-preview { display:block; width:26px; height:26px; border-radius:50%; background:var(--v-cat-swatch); box-shadow:inset 0 0 0 1px rgb(0 0 0 / 8%); }
.v-shell-page .v-cat-field input.v-cat-hex { min-width:0; min-height:44px; padding:9px 8px; font-size:13px; line-height:1.3; }
.v-cat-brightness-label { font-size:12px; color:var(--v-text-2); line-height:1.3; }
.v-shell-page .v-cat-field input.v-cat-brightness { appearance:none; -webkit-appearance:none; width:100%; min-width:0; height:44px; min-height:44px; padding:0; border:0; border-radius:10px; cursor:pointer; background:transparent; }
.v-cat-brightness::-webkit-slider-runnable-track { height:6px; border-radius:6px; background:linear-gradient(90deg,#000,var(--v-cat-hue)); }
.v-cat-brightness::-moz-range-track { height:6px; border-radius:6px; background:linear-gradient(90deg,#000,var(--v-cat-hue)); }
.v-cat-brightness::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:19px; height:19px; margin-top:-6.5px; border:1px solid var(--v-line); border-radius:50%; background:var(--v-surface-1); box-shadow:0 1px 4px rgb(0 0 0 / 16%); }
.v-cat-brightness::-moz-range-thumb { width:19px; height:19px; border:1px solid var(--v-line); border-radius:50%; background:var(--v-surface-1); box-shadow:0 1px 4px rgb(0 0 0 / 16%); }
.v-cat-own-section .v-cat-colors { grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; max-width:320px; width:100%; align-self:center; margin-top:6px; }
.v-cat-own-section .v-cat-color { min-height:44px; padding:8px; }
.v-cat-own-section .v-cat-color > span { width:24px; height:24px; }
@media (min-width:720px) {
  .v-cat-composer { grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:24px; }
  .v-cat-own-section { padding-inline-start:24px; border-inline-start:1px solid var(--v-line); }
  .v-cat-composer.is-editing { grid-template-columns:minmax(0,1fr); max-width:500px; margin-inline:auto; }
  .v-cat-composer.is-editing .v-cat-own-section { padding-inline-start:0; border-inline-start:0; }
  .v-cat-color-picker { grid-template-columns:160px minmax(0,1fr); gap:14px; }
  .v-cat-wheel { width:160px; height:160px; }
}
@media (max-width:359px) {
  .v-cat-color-picker { grid-template-columns:124px minmax(0,1fr); gap:12px; }
  .v-cat-wheel { width:124px; height:124px; }
  .v-cat-color-code { grid-template-columns:22px minmax(0,1fr); gap:5px; }
  .v-cat-color-preview { width:22px; height:22px; }
  .v-shell-page .v-cat-field input.v-cat-hex { font-size:12px; padding-inline:6px; }
  .v-shell-page .v-cat-editor .v-card-title { font-size:16px; }
  .v-shell-page .v-cat-editor .v-dialog-save { font-size:13px; }
}

@media (max-width:719px) {
  .v-shell-page .v-cat-field input.v-cat-hex { font-size:16px; }
}
@media (max-width:359px) { .v-cat-own-section .v-cat-glyphs,.v-cat-own-section .v-cat-colors { grid-template-columns:repeat(3,minmax(0,1fr)); } }