:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #282b2b;
  background: #f7f7f4;
  font-synthesis: none;
  --ink: #282b2b;
  --muted: #858985;
  --line: #e8e9e4;
  --paper: #fff;
  --canvas: #f7f7f4;
  --accent: #d9464f;
  --accent-dark: #bd3540;
  --accent-soft: #fff0ee;
  --mint: #e4f2e9;
  --green: #38835a;
  --shadow: 0 8px 24px rgba(43, 47, 42, .045);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .42; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.eyebrow { margin: 0; color: #9b9f99; font-size: 10px; letter-spacing: .15em; font-weight: 700; }

.appbar {
  position: sticky; top: 0; z-index: 20; height: 64px; padding: 0 30px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 255, 252, .92); backdrop-filter: blur(14px);
  border-bottom: 1px solid #ecece7;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 750; letter-spacing: -.025em; }
.brandmark { width: 29px; height: 29px; border-radius: 10px 10px 10px 3px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 800; }
.envBadge { display: inline-flex; align-items: center; gap: 6px; margin-left: 5px; padding: 5px 9px; border: 1px solid #e7e8e3; border-radius: 999px; color: #7a8079; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.envBadge i, .liveBadge i, .onlineDot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #76a985; }
.appbarActions { display: flex; align-items: center; gap: 13px; }
.saveState { color: #91968f; font-size: 11px; }
.saveState.unsavedText { color: #bb673b; }
.quietButton { border: 1px solid #e4e6e0; border-radius: 9px; padding: 8px 12px; color: #535a54; background: #fff; font-size: 12px; font-weight: 600; transition: .16s ease; }
.quietButton:hover { border-color: #cfd3cc; background: #fafbf8; }

.workspace { display: grid; grid-template-columns: 250px minmax(420px, 1fr) 338px; gap: 22px; align-items: start; max-width: 1700px; margin: 0 auto; padding: 24px 26px 40px; }
.workspace.previewCollapsed { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); }
.workspace.previewCollapsed > .previewColumn { display: none; }
.workspace.previewCollapsed > .editorColumn { grid-column: 2; min-width: 0; }
.workspace.welcomeView { align-items: stretch; }
.workspace.welcomeView > .editorColumn { display: flex; min-height: calc(100vh - 136px); }
.workspace.welcomeView .welcomePanel { width: 100%; min-height: 0; flex: 1; }
.noteRail { position: sticky; top: 88px; height: calc(100vh - 112px); max-height: calc(100vh - 88px); min-height: min(500px, calc(100vh - 112px)); padding: 18px 13px 12px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.railHeading { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 16px; }
.railHeading h1 { margin: 4px 0 0; font-size: 22px; letter-spacing: -.04em; }
.iconButton { display: grid; place-items: center; border: 0; }
.addNote { width: 35px; height: 35px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 23px; line-height: 1; box-shadow: 0 4px 10px #d9464f26; }
.addNote:hover { background: var(--accent-dark); transform: translateY(-1px); }
.searchBox { min-height: 38px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid #e9eae5; border-radius: 10px; color: #9ba099; background: #fafbf9; }
.searchBox > span { font-size: 20px; line-height: 1; transform: rotate(-20deg); }
.searchBox input { min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; box-shadow: none !important; }
.searchBox input::placeholder { color: #a5aaa3; }
.noteFilterBar { display: flex; align-items: center; gap: 6px; min-width: 0; }
.noteFilterBar .searchBox { min-width: 0; flex: 1; }
.noteSort { flex: 0 0 78px; width: 78px; height: 38px; padding: 0 4px; border: 1px solid #e9eae5; border-radius: 9px; color: #737971; background: #fafbf9; font-size: 9px; }
.noteSort:focus-visible { outline: 2px solid #df9282; outline-offset: 2px; }
.noteFilterBar kbd { display: none; }
kbd { flex: 0 0 auto; padding: 2px 4px; border: 1px solid #e8e9e4; border-radius: 4px; color: #a2a69f; background: #fff; font: 9px 'DM Sans', sans-serif; }
.listCaption { display: flex; align-items: center; justify-content: space-between; margin: 22px 5px 8px; color: #898e87; font-size: 10px; font-weight: 650; letter-spacing: .045em; text-transform: uppercase; }
.countPill { min-width: 22px; padding: 3px 6px; text-align: center; border-radius: 999px; color: #777d76; background: #f0f1ed; font-size: 9px; }
.noteList { flex: 1; min-height: 0; overflow: auto; margin: 0 -4px; padding: 0 4px 8px; }
.noteListItem { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 5px 4px 5px 7px; margin: 3px 0; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 12px; transition: .14s ease; }
.noteListItem:hover { background: #f9faf7; }
.noteListItem.selected { background: #fff5f2; border-color: #f3dbd5; }
.noteListSelect { min-width: 0; flex: 1 1 100%; display: flex; align-items: center; gap: 7px; padding: 3px 0; overflow: hidden; border: 0; color: inherit; background: transparent; text-align: left; }
.noteListSelect:focus-visible, .noteActionButton:focus-visible { outline: 2px solid #df9282; outline-offset: 2px; }
.noteSequence { flex: 0 0 19px; width: 19px; color: #929890; font: 700 8px 'DM Sans', sans-serif; text-align: center; }
.noteListItem.selected .noteSequence { color: #b74d47; }
.noteListActions { width: 100%; flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 6px; padding: 2px 0; }
.noteListActions > .noteActionButton { width: 100%; min-width: 0; height: 30px; display: grid; place-items: center; padding: 0 4px; border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 600; line-height: 1; transition: color .14s ease, background-color .14s ease, border-color .14s ease; }
.noteListActions > .noteEditAction { color: #687282; background: rgba(100, 116, 139, .07); }
.noteListActions > .noteEditAction:hover { color: #596579; background: rgba(100, 116, 139, .13); }
.noteListActions > .distributionToggle { padding: 0 4px; }
.noteListActions > .distributionToggle.isNoteEnabled { color: #92784c; background: rgba(176, 139, 78, .09); }
.noteListActions > .distributionToggle.isNoteEnabled:hover { color: #81683f; background: rgba(176, 139, 78, .15); }
.noteListActions > .distributionToggle.isNoteDisabled { color: #64836e; background: rgba(84, 143, 102, .09); }
.noteListActions > .distributionToggle.isNoteDisabled:hover { color: #53745d; background: rgba(84, 143, 102, .15); }
.noteListActions > .deleteNoteButton { color: #a36f6c; background: rgba(180, 86, 80, .07); }
.noteListActions > .deleteNoteButton:hover { color: #955c59; background: rgba(180, 86, 80, .13); }
.noteListActions > .deleteNoteButton.isConfirming { color: #963f3c; border-color: rgba(195, 60, 56, .18); background: rgba(195, 60, 56, .14); }
.noteListActions > .deleteNoteButton.isConfirming:hover { color: #873633; border-color: rgba(195, 60, 56, .25); background: rgba(195, 60, 56, .2); }
.noteListActions > .deleteNoteButton:disabled { opacity: .7; cursor: wait; }
.noteCover { flex: 0 0 43px; width: 43px; height: 50px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #aeb3ac; background: #f1f2ee; font-size: 17px; }
.noteCover img { width: 100%; height: 100%; object-fit: cover; }
.noteListCopy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.noteListCopy strong { overflow: hidden; color: #383d38; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.noteListMeta { color: #9a9e98; font-size: 9px; }
.listStatus { width: fit-content; padding: 2px 6px; border-radius: 5px; font-size: 9px; font-weight: 650; }
.statusGreen { color: #4c8864; background: #eaf4ed; }
.statusAccent { color: #bc5c4f; background: #ffede7; }
.statusMuted { color: #888e87; background: #eff0ed; }
.emptyList { flex: 1; display: grid; align-content: center; justify-items: center; gap: 7px; min-height: 150px; color: #92978f; font-size: 10px; }
.emptyList strong { color: #666c66; font-size: 12px; }
.emptyIcon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 5px; border-radius: 15px; color: #d47669; background: #fff0eb; font-size: 22px; }
.railFoot { display: flex; align-items: center; gap: 7px; padding: 13px 5px 2px; border-top: 1px solid #f0f1ed; color: #a2a69f; font-size: 9px; }
.onlineDot { width: 5px; height: 5px; }

.editorColumn { min-width: 0; }
.editorTopline { position: sticky; top: 64px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 55px; margin: -4px 0 9px; padding: 4px 0 9px; background: var(--canvas); }
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #9b9f99; font-size: 11px; }
.breadcrumbHomeButton { min-height: 30px; padding: 0; border: 0; border-radius: 6px; color: #777e77; background: transparent; font-size: inherit; font-weight: 600; white-space: nowrap; }
.breadcrumbHomeButton:hover { color: var(--accent-dark); }
.breadcrumbHomeButton:focus-visible { outline: 2px solid #df9282; outline-offset: 3px; }
.breadcrumb b { color: #c2c5bf; font-weight: 400; }
.breadcrumb strong { max-width: 250px; overflow: hidden; color: #454a44; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.editorTopActions { display: flex; align-items: center; gap: 10px; }
.statusBadge { display: inline-flex; align-items: center; gap: 6px; color: #888e87; font-size: 10px; white-space: nowrap; }
.statusBadge i { width: 6px; height: 6px; border-radius: 50%; background: #75a183; }
.statusBadge.unsavedStatus i { background: #e1a253; }
.primaryButton { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 40px; padding: 0 17px; border: 0; border-radius: 10px; color: #fff; background: var(--accent); box-shadow: 0 4px 11px #d9464f20; font-size: 12px; font-weight: 700; transition: .16s ease; }
.primaryButton:hover { background: var(--accent-dark); transform: translateY(-1px); }
.primaryButton:disabled { transform: none; }
.primaryButton.compact { min-height: 33px; padding: 0 13px; border-radius: 8px; font-size: 10px; }
.primaryButton.savedButton { color: #687269; background: #e8f0e8; box-shadow: none; }
.primaryButton.savedButton:hover { background: #e0ebe0; }
.editor { display: grid; gap: 13px; }
.editorSection { padding: 23px 24px 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow); }
.sectionHeading { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 22px; }
.sectionNumber { flex: 0 0 auto; padding-top: 2px; color: #d07a6f; font: 700 10px 'DM Sans', sans-serif; letter-spacing: .08em; }
.sectionHeading h2 { display: flex; align-items: center; gap: 8px; margin: 0; color: #363b36; font-size: 14px; letter-spacing: -.025em; }
.sectionHeading p { margin: 5px 0 0; color: #9a9f98; font-size: 10px; line-height: 1.5; }
.inlineCount { padding: 3px 6px; border-radius: 5px; color: #91968f; background: #f2f3ef; font: 600 9px 'DM Sans', sans-serif; letter-spacing: 0; }
.fieldBlock { margin-top: 17px; }
.fieldLabelRow { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.fieldLabelRow label { margin: 0; color: #4e554e; font-size: 11px; font-weight: 700; }
.counter { color: #adb1ab; font-size: 9px; }
.counterOver { color: #bd3540 !important; font-weight: 700; }
.fieldBlock input, .fieldBlock textarea, .loginCard input { width: 100%; border: 1px solid #e4e6e0; border-radius: 10px; outline: none; color: #323832; background: #fff; transition: border-color .15s, box-shadow .15s; }
.fieldBlock input { height: 42px; padding: 0 12px; font-size: 12px; }
.fieldBlock .titleInput { height: 49px; color: #2f342f; font-size: 17px; font-weight: 650; letter-spacing: -.035em; }
.fieldBlock textarea { min-height: 142px; padding: 12px; resize: vertical; font-size: 11px; line-height: 1.8; }
.fieldBlock input::placeholder, .fieldBlock textarea::placeholder { color: #bdc1bb; font-weight: 400; }
.fieldBlock input:focus, .fieldBlock textarea:focus, .loginCard input:focus { border-color: #e59b8d; box-shadow: 0 0 0 3px #e9826b16; }
.fieldHint { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #a4a9a2; font-size: 9px; }
.hintIcon { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 4px; color: #8b918a; background: #f1f2ee; font-size: 10px; }
.topicChipRow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.topicChip { padding: 4px 7px; border-radius: 6px; color: #b65a50; background: #fff0eb; font-size: 9px; }

.uploadGate { display: flex; align-items: center; gap: 13px; padding: 15px; border: 1px dashed #dedfd9; border-radius: 12px; background: #fafbf8; }
.gateIcon, .uploadGlyph { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #c67063; background: #fff0eb; font-size: 18px; }
.gateCopy { display: grid; gap: 4px; }
.gateCopy strong { color: #626861; font-size: 11px; }
.gateCopy span { color: #a1a69f; font-size: 9px; }
.dropZone { position: relative; min-height: 98px; display: flex; align-items: center; gap: 12px; padding: 15px 17px; border: 1px dashed #e2d5ce; border-radius: 12px; background: #fffaf7; transition: .15s ease; }
.dropZone.compactDrop { min-height: 71px; }
.dropZone.dropActive { border-color: #df8979; background: #fff2ec; box-shadow: 0 0 0 3px #eb9b8818; }
.dropZone.isUploading { opacity: .75; }
.dropZone > div:nth-of-type(2) { display: grid; gap: 4px; }
.dropZone strong { color: #676d66; font-size: 10px; }
.dropZone span { color: #9da29b; font-size: 9px; }
.dropZone small { margin-left: auto; color: #a4a9a2; font-size: 9px; }
.uploadGlyph { width: 32px; height: 32px; border-radius: 9px; color: #bc6d61; background: #fbe9e2; font-size: 20px; }
.textButton { padding: 0; border: 0; color: #c7524e; background: none; font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.dropZone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.imageGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 11px; }
.imageTile { min-width: 0; overflow: hidden; border: 1px solid #e9eae5; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
.imageTile[draggable=true] { cursor: grab; }
.imageTile.dragging { opacity: .38; transform: scale(.97); }
.imageTile.dragOver { border: 1px solid #dc8779; box-shadow: 0 0 0 3px #e9826b1c; }
.tileImageWrap { position: relative; aspect-ratio: 1 / 1.03; overflow: hidden; background: #f0f1ed; }
.tileImageWrap img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.imageTile:hover .tileImageWrap img { transform: scale(1.025); }
.tileImageWrap img.imageUnavailable { opacity: .2; }
.imageIndex { position: absolute; top: 7px; left: 7px; min-width: 23px; padding: 4px 5px; border-radius: 6px; color: #fff; background: #2229; font: 600 9px 'DM Sans', sans-serif; text-align: center; }
.dragHandle { position: absolute; top: 6px; right: 7px; color: #fff; text-shadow: 0 1px 5px #2229; font-size: 17px; }
.coverBadge { position: absolute; left: 7px; bottom: 7px; padding: 4px 7px; border-radius: 5px; color: #fff; background: #d9464f; font-size: 8px; font-weight: 700; }
.pendingBadge { position: absolute; right: 7px; bottom: 7px; padding: 4px 6px; border-radius: 5px; color: #fff; background: #676b6799; font-size: 8px; }
.pendingTile { border-style: dashed; border-color: #dfb4a8; }
.tileControls { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px 5px; }
.tileOrder { overflow: hidden; color: #80867f; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tileButtons { display: flex; gap: 2px; }
.tileIconButton { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; color: #757b74; background: transparent; font-size: 15px; }
.tileIconButton:hover:not(:disabled) { color: #a94442; background: #fff0eb; }
.tileIconButton:disabled { color: #c5c9c3; cursor: not-allowed; }
.tileIconButton.removeImage { color: #a4a8a2; font-size: 18px; }
.tileIconButton.removeImage:hover { color: #bf453f; }
.noImages { grid-column: 1 / -1; min-height: 90px; display: grid; justify-items: center; align-content: center; gap: 4px; color: #b3b7b0; }
.noImages > span { font-size: 19px; }
.noImages strong { color: #8a9088; font-size: 10px; }
.noImages small { font-size: 9px; }
.mediaFoot { display: flex; align-items: center; gap: 6px; margin-top: 9px; color: #9da29b; font-size: 9px; }
.mediaFoot span { color: #c28073; font-size: 15px; }

.shareEmpty { min-height: 87px; display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px dashed #e0e2dc; border-radius: 12px; color: #9aa098; background: #fafbf9; font-size: 10px; }
.shareLock { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #929890; background: #eef0eb; font-size: 16px; }
.sharePanel { display: flex; align-items: center; gap: 16px; padding: 13px; border: 1px solid #e9eae5; border-radius: 13px; background: #fbfcf9; }
.shareQrWrap { flex: 0 0 112px; width: 112px; height: 112px; display: grid; place-items: center; border: 1px solid #eeeeea; border-radius: 10px; background: #fff; }
.shareQrWrap img { width: 100px; height: 100px; }
.shareDetails { min-width: 0; flex: 1; }
.shareReady { display: flex; align-items: center; gap: 6px; color: #45825a; font-size: 10px; font-weight: 700; }
.shareReady i { width: 6px; height: 6px; border-radius: 50%; background: #6ea17b; }
.shareReady.shareWarning { color: #b87841; }
.shareReady.shareWarning i { background: #d8a15f; }
.shareDetails p { margin: 6px 0 9px; color: #969b94; font-size: 9px; line-height: 1.55; }
.copyField { display: flex; align-items: center; gap: 5px; }
.copyField input { min-width: 0; width: 100%; height: 30px; padding: 0 8px; border: 1px solid #e8e9e4; border-radius: 7px; outline: 0; color: #737971; background: #fff; font-size: 9px; }
.copyField button { flex: 0 0 auto; height: 30px; padding: 0 9px; font-size: 9px; }
.shareActions { display: flex; align-items: center; gap: 13px; margin-top: 8px; }
.textLink { color: #bd5750; font-size: 9px; font-weight: 650; }
.textLink:hover { color: #913b38; }
.textLink span { margin-left: 2px; }
.formMessage { margin: 0; padding: 10px 12px; border-radius: 9px; font-size: 10px; line-height: 1.5; }
.successMessage { color: #36784f; background: #eaf5ed; }
.errorMessage { color: #a5443b; background: #fff0ed; }
.activitySection { margin: 13px 2px 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.activitySection summary { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; color: #6a7069; cursor: pointer; font-size: 10px; font-weight: 650; list-style: none; }
.activitySection summary::-webkit-details-marker { display: none; }
.activityChevron { color: #a3a8a1; font-size: 15px; transition: transform .15s ease; }
.activitySection[open] .activityChevron { transform: rotate(180deg); }
.activityList { padding: 0 0 10px; color: #92978f; font-size: 9px; }
.activityRow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid #f0f1ed; color: #666d65; }
.activityMeta { color: #9da29b; text-align: right; }

.previewColumn { position: sticky; top: 88px; min-width: 0; padding: 19px 18px 17px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.workspace.editorActiveView:not(.materialsMode) > .previewColumn {
  position: sticky;
  top: 88px;
  align-self: start;
  height: calc(100vh - 112px);
  max-height: calc(100vh - 88px);
  min-height: min(500px, calc(100vh - 112px));
  overflow-y: auto;
}
.previewHeader { display: flex; align-items: center; justify-content: space-between; }
.previewHeader h2 { margin: 4px 0 0; color: #393e39; font-size: 15px; letter-spacing: -.035em; }
.liveBadge { display: inline-flex; align-items: center; gap: 5px; color: #758378; font-size: 9px; }
.liveBadge i { width: 5px; height: 5px; background: #70a37d; box-shadow: 0 0 0 3px #70a37d20; }
.previewDisclaimer { margin: 7px 0 13px; color: #a0a59e; font-size: 9px; line-height: 1.5; }
.previewTabs { width: fit-content; display: flex; gap: 3px; margin: 0 auto 12px; padding: 3px; border-radius: 9px; background: #f0f1ed; }
.previewTab { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; color: #818780; background: transparent; font-size: 9px; }
.previewTab.active { color: #454b45; background: #fff; box-shadow: 0 1px 4px #29322912; font-weight: 700; }
.phoneShell { position: relative; width: min(100%, 270px); height: 498px; margin: 0 auto; padding: 7px; border: 1px solid #d5d8d2; border-radius: 30px; background: #242827; box-shadow: 0 14px 27px #30352f21, 0 2px 4px #282d2924; }
.phoneIsland { position: absolute; z-index: 2; top: 13px; left: 50%; width: 69px; height: 15px; border-radius: 999px; background: #202321; transform: translateX(-50%); }
.phoneScreen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; }
.phoneStatus { height: 28px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; color: #454a46; font: 600 8px 'DM Sans', sans-serif; }
.phoneNav { height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid #f0f0ee; color: #424741; font-size: 9px; font-weight: 650; }
.phoneNav > span:first-child { color: #878c86; font-size: 19px; font-weight: 400; }
.phoneNav button { min-width: 44px; height: 20px; border: 0; border-radius: 999px; color: #fff; background: #e96b68; font-size: 8px; }
.phoneContent { flex: 1; min-height: 0; overflow: hidden; padding: 9px 11px 5px; }
.phoneMedia { position: relative; width: 100%; height: 183px; overflow: hidden; border-radius: 9px; background: #f1f2ef; }
.phoneMedia > img { width: 100%; height: 100%; display: block; object-fit: contain; background: #f7f7f4; }
.mediaPlaceholder { width: 100%; height: 100%; display: grid; justify-items: center; align-content: center; gap: 5px; color: #c1c5be; }
.mediaPlaceholder span { font-size: 30px; }
.mediaPlaceholder small { font-size: 8px; }
.imagePosition { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; border-radius: 999px; color: #fff; background: #222a; font: 8px 'DM Sans', sans-serif; }
.phoneMediaNav { height: 18px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.phoneMediaNav > button { width: 16px; height: 16px; padding: 0; border: 0; color: #9ca19a; background: none; font-size: 16px; line-height: 1; }
.previewDots { display: flex; align-items: center; gap: 3px; }
.previewDot { width: 4px; height: 4px; padding: 0; border: 0; border-radius: 50%; background: #d6d8d3; }
.previewDot.current { width: 11px; border-radius: 999px; background: #e66d67; }
.phoneContent h3 { margin: 5px 0 4px; overflow: hidden; color: #313632; font-size: 11px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.phoneContent > p { max-height: 64px; margin: 0; overflow: hidden; color: #4b514b; font-size: 9px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.phoneTopics { display: flex; flex-wrap: wrap; gap: 3px 7px; max-height: 29px; overflow: hidden; margin-top: 5px; }
.phoneTopics span { color: #304e72; font-size: 8px; line-height: 1.5; }
.phoneTools { display: flex; align-items: center; gap: 7px; margin: 8px 0 6px; }
.phoneTools span { padding: 4px 7px; border-radius: 999px; color: #444a44; background: #f3f4f1; font-size: 8px; }
.phoneOption { display: flex; justify-content: space-between; align-items: center; min-height: 28px; border-top: 1px solid #f1f1ef; color: #646a63; font-size: 8px; }
.phoneOption span { color: #b1b6af; font-size: 15px; }
.phoneFooter { height: 43px; flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 5px 10px 8px; border-top: 1px solid #f0f0ed; background: #fff; }
.phoneFooter button { height: 29px; border: 0; border-radius: 999px; font-size: 8px; }
.phoneFooter button:first-child { flex: 0 0 35%; border: 1px solid #e8e9e5; color: #5d635d; background: #fff; }
.phoneFooter button:last-child { flex: 1; color: #fff; background: #f04a62; }
.coverPreviewView { min-height: 498px; display: grid; align-content: start; justify-items: center; padding-top: 3px; }
.discoverPreview { width: min(100%, 260px); padding: 8px 8px 10px; overflow: hidden; border: 1px solid #e9eae5; border-radius: 13px; background: #fff; box-shadow: 0 8px 20px #30352f10; }
.discoverNav { height: 27px; display: flex; align-items: center; justify-content: space-around; gap: 4px; margin: 0 0 7px; color: #a4a8a2; font-size: 8px; }
.discoverNav strong { color: #737971; font-size: 9px; }
.discoverNav .discoverActive { position: relative; color: #303530; font-weight: 700; }
.discoverNav .discoverActive::after { position: absolute; right: 25%; bottom: -5px; left: 25%; height: 2px; border-radius: 2px; background: #d85d64; content: ""; }
.discoverNoteGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 7px; }
.mockDiscoverCard { min-width: 0; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 1px 4px #30352f12; }
.discoverArt, .mockDiscoverArt { position: relative; width: 100%; aspect-ratio: .77; overflow: hidden; background: #f0f1ed; }
.discoverArt > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.coverEmpty { width: 100%; height: 100%; display: grid; align-content: center; justify-items: center; gap: 7px; color: #aeb4ac; }
.coverEmpty span { font-size: 24px; }
.coverEmpty small { font-size: 8px; }
.coverPhotoIndex { position: absolute; left: 6px; bottom: 6px; padding: 3px 5px; border-radius: 5px; color: #fff; background: #2025229c; font-size: 7px; font-weight: 650; }
.coverCaption { display: grid; gap: 3px; padding: 5px 6px 7px; }
.coverCaption strong { display: -webkit-box; overflow: hidden; color: #3a403a; font-size: 8px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.coverCaption span { color: #a0a59e; font-size: 7px; }
.mutedDiscoverCard { opacity: .62; }
.mockDiscoverArt { background: linear-gradient(145deg, #eceeea, #e1e4e0 52%, #eff0ed); }
.mockDiscoverArt::before, .mockDiscoverArt::after { position: absolute; border-radius: 50%; background: #d3d7d2; content: ""; }
.mockDiscoverArt::before { width: 48%; aspect-ratio: 1; top: 18%; left: 26%; }
.mockDiscoverArt::after { width: 82%; height: 37%; bottom: -3%; left: 9%; border-radius: 48% 48% 0 0; background: #d8dcd7; }
.mockDiscoverArt > i { position: absolute; z-index: 1; top: 29%; left: 39%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #e8eae7; }
.mockDiscoverArt.mockShort { aspect-ratio: .98; background: linear-gradient(135deg, #e6e8e4, #d9ddd8); }
.mockDiscoverArt.mockShort::before { width: 55%; height: 40%; top: 20%; left: 22%; border-radius: 8px; background: #d0d4cf; }
.mockDiscoverArt.mockShort::after { display: none; }
.mockDiscoverLines { display: grid; gap: 4px; padding: 6px; }
.mockDiscoverLines i, .mockDiscoverLines b { height: 4px; border-radius: 4px; background: #dce0db; }
.mockDiscoverLines i:nth-child(2) { width: 77%; }
.mockDiscoverLines b { width: 43%; height: 3px; margin-top: 2px; background: #e7e9e6; }
.coverPreviewHint { max-width: 270px; margin: 12px 0 0; color: #a0a59e; font-size: 8px; line-height: 1.6; text-align: center; }
.previewChecklist { margin-top: 16px; padding: 12px 12px 9px; border: 1px solid #edefe9; border-radius: 12px; background: #fbfcf9; }
.checklistTitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #646b63; font-size: 9px; font-weight: 700; }
.checklistTitle span { color: #a7aca5; font-size: 8px; font-weight: 400; }
.checkItem { display: flex; align-items: center; gap: 7px; padding: 4px 0; color: #989e97; font-size: 8px; }
.checkIcon { width: 13px; height: 13px; display: grid; place-items: center; border: 1px solid #d9ddd6; border-radius: 50%; color: transparent; font-size: 8px; }
.checkItem.checked { color: #5a7460; }
.checkItem.checked .checkIcon { border-color: #b6d2bc; color: #4a8c5f; background: #e7f3e9; }

.welcomePanel { min-height: calc(100vh - 150px); display: grid; align-content: center; justify-items: center; padding: 42px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.welcomeArt { position: relative; width: 145px; height: 110px; display: grid; place-items: center; margin-bottom: 31px; border-radius: 33px; background: linear-gradient(140deg, #fff4ec, #f8e6df); color: #d77466; font-size: 43px; }
.welcomeArt span:first-child { transform: translate(-23px, -8px) rotate(-10deg); }
.welcomeArt span:nth-child(2) { position: absolute; transform: translate(23px, 11px) rotate(8deg); color: #b6a8ca; }
.welcomeArt span:last-child { position: absolute; top: 13px; right: 20px; color: #7eaa8c; font-size: 22px; }
.welcomePanel h2 { margin: 8px 0 6px; font-size: 23px; letter-spacing: -.05em; }
.welcomePanel > p:not(.eyebrow) { max-width: 310px; margin: 0 0 20px; font-size: 11px; line-height: 1.7; }
.loginWrap { min-height: calc(100vh - 64px); display: grid; align-content: center; justify-items: center; padding: 25px; background: radial-gradient(ellipse at 50% 39%, #fff 0, #f7f7f4 53%); }
.loginCard { width: min(100%, 390px); padding: 33px; border: 1px solid #e8e9e4; border-radius: 20px; background: #fff; box-shadow: 0 20px 55px #34392f0d; }
.loginMark { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 13px 13px 13px 4px; color: #fff; background: var(--accent); font-size: 20px; font-weight: 800; }
.loginCard h1 { margin: 7px 0 5px; color: #303530; font-size: 22px; letter-spacing: -.05em; }
.loginCard > p:not(.eyebrow) { margin: 0; font-size: 11px; }
.loginCard form { margin-top: 23px; }
.loginCard label { display: block; margin: 0 0 7px; color: #555b55; font-size: 10px; font-weight: 700; }
.loginCard input { height: 42px; padding: 0 11px; font-size: 12px; }
.loginCard input::placeholder { color: #b5bab3; }
.loginCard .primaryButton { margin-top: 12px; }
.wide { width: 100%; }
.storeHome { width: min(100%, 1280px); min-height: calc(100vh - 64px); margin: 0 auto; padding: 31px 30px 42px; }
.storeHomeHeading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.storeHomeHeading h1 { margin: 0 0 4px; color: #18181b; font-size: 30px; font-weight: 650; letter-spacing: -.045em; }
.storeHomeHeading p:last-child { margin: 0; color: #71717a; font-size: 13px; }
.storeCreateArea { min-width: 0; flex: 0 0 auto; }
.storeCreateForm { display: grid; grid-template-columns: minmax(175px, 240px) auto auto; align-items: center; gap: 7px; }
.storeCreateForm input { width: 100%; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #e4e4e7; border-radius: 8px; outline: none; color: #18181b; background: #fff; font: inherit; font-size: 12px; }
.storeCreateForm input::placeholder { color: #a1a1aa; }
.storeCreateForm input:focus { border-color: #d9a19e; box-shadow: 0 0 0 3px #b94b4b12; }
.storeCreateForm .storeCreateSubmit { min-height: 36px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
.storeCreateCancel { min-height: 36px; padding: 0 11px; border: 1px solid #e4e4e7; border-radius: 8px; color: #52525b; background: #fff; font-size: 12px; }
.storeCreateCancel:hover { border-color: #d4d4d8; background: #fafafa; }
.storeCreateForm button:disabled { opacity: .55; cursor: wait; }
.storeCreateError { grid-column: 1 / -1; margin: 0 2px; color: #b42318; font-size: 12px; }
.storeOverview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 15px; overflow: hidden; border: 1px solid #e8e9ec; border-radius: 12px; background: #fff; }
.adminBody .overviewMetric { appearance: none; min-width: 0; display: grid; gap: 4px; padding: 11px 15px; border: 0; color: inherit; background: #fff; font: inherit; text-align: left; cursor: pointer; transition: background-color .14s ease, box-shadow .14s ease; }
.adminBody .overviewMetric:hover, .adminBody .overviewMetric[aria-expanded="true"] { background: #fafafa; }
.adminBody .overviewMetric[aria-expanded="true"] { box-shadow: inset 0 -2px 0 #d9464f; }
.adminBody .overviewMetric:focus-visible { position: relative; z-index: 1; outline: 2px solid #d9464f; outline-offset: -3px; }
.overviewMetric + .overviewMetric { border-left: 1px solid #f0f0f2; }
.overviewMetric strong { color: #18181b; font-size: 19px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.overviewMetric span { overflow: hidden; color: #71717a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.adminBody .trendPanel { margin: -3px 0 15px; padding: 15px 17px 12px; border: 1px solid #e8e9ec; border-radius: 12px; background: #fff; }
.trendPanelHeading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.trendHeadingCopy { min-width: 0; }
.trendHeadingCopy h2 { margin: 0; color: #18181b; font-size: 15px; font-weight: 650; }
.trendHeadingCopy p { margin: 4px 0 0; color: #71717a; font-size: 11px; line-height: 1.5; }
.trendPanelActions { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.trendRangeGroup { display: inline-flex; padding: 3px; border: 1px solid #e4e4e7; border-radius: 8px; background: #fafafa; }
.trendRangeButton { min-width: 48px; min-height: 29px; padding: 0 8px; border: 0; border-radius: 6px; color: #71717a; background: transparent; font: inherit; font-size: 11px; cursor: pointer; }
.trendRangeButton[aria-pressed="true"] { color: #27272a; background: #fff; box-shadow: 0 1px 3px #18181b18; }
.trendCloseButton { width: 32px; height: 32px; border: 1px solid #e4e4e7; border-radius: 8px; color: #71717a; background: #fff; font-size: 19px; line-height: 1; cursor: pointer; }
.trendRangeButton:focus-visible, .trendCloseButton:focus-visible { outline: 2px solid #d9464f; outline-offset: 2px; }
.trendSummary { min-height: 18px; margin: 9px 0 0; color: #3f3f46; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.trendChartWrap { width: 100%; min-height: 170px; margin-top: 5px; }
.trendChart { width: 100%; height: 190px; display: block; overflow: visible; }
.trendChart .trendGridLine { stroke: #eceef0; stroke-width: 1; }
.trendChart .trendAxisLabel { fill: #8b8f97; font: 10px system-ui, sans-serif; }
.trendChart .trendLine { fill: none; stroke: #d9464f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trendChart .trendPoint { fill: #fff; stroke: #d9464f; stroke-width: 2; }
.trendChart .trendEmptyText { fill: #8b8f97; font: 12px system-ui, sans-serif; }
.trendError { margin: 5px 0 0; color: #b42318; font-size: 12px; }
.storeToolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.storeSearch { min-width: 0; flex: 1; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #e4e4e7; border-radius: 8px; color: #a1a1aa; background: #fff; }
.storeSearch:focus-within { border-color: #c8c8ce; box-shadow: 0 0 0 3px #18181b08; }
.storeSearch > span { font-size: 17px; line-height: 1; }
.storeSearch input { width: 100%; min-width: 0; height: 34px; padding: 0; border: 0; outline: 0; color: #18181b; background: transparent; font-size: 12px; box-shadow: none !important; }
.storeSearch input::placeholder { color: #a1a1aa; }
.storeSelect { width: 128px; height: 38px; padding: 0 10px; border: 1px solid #e4e4e7; border-radius: 8px; color: #3f3f46; background: #fff; font-size: 12px; }
.storeSort { width: 136px; }
.storeSelect:focus-visible { outline: 2px solid #d9464f; outline-offset: 2px; }
.storeList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; }
.storeCard { position: relative; min-width: 0; padding: 17px; border: 1px solid #e8e9ec; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); transition: border-color .14s ease, box-shadow .14s ease; }
.storeCard:hover { border-color: #d9dade; box-shadow: 0 4px 14px rgba(0, 0, 0, .06); }
.storeCardInactive { background: #fff; }
.storeCardHeading { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.storeCardHeading > strong { min-width: 0; flex: 1; overflow: hidden; color: #18181b; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.storeCardMenuWrap { position: relative; flex: 0 0 auto; }
.storeMoreButton { width: 32px; height: 32px; display: grid; place-items: center; padding: 0 0 7px; border: 1px solid transparent; border-radius: 8px; color: #71717a; background: transparent; font-size: 20px; line-height: 1; letter-spacing: 1px; }
.storeMoreButton:hover, .storeMoreButton[aria-expanded="true"] { border-color: #e4e4e7; color: #27272a; background: #fafafa; }
.storeMoreButton:focus-visible, .storeMenuItem:focus-visible, .storeOpenButton:focus-visible { outline: 2px solid #d9464f; outline-offset: 2px; }
.storeMoreMenu { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; width: 176px; padding: 5px; border: 1px solid #e4e4e7; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(24, 24, 27, .12); }
.storeMenuItem { width: 100%; min-height: 34px; display: flex; align-items: center; padding: 0 9px; border: 0; border-radius: 6px; color: #3f3f46; background: transparent; font-size: 12px; text-align: left; text-decoration: none; }
.storeMenuItem:hover { color: #18181b; background: #f4f4f5; }
.storeMenuItem.storeMenuStatus { margin-top: 4px; border-top: 1px solid #f0f0f2; border-radius: 0 0 6px 6px; }
.storeMenuDestructive { color: #71717a; }
.storeMenuDestructive.isArmed { color: #b42318; background: #fff1f0; font-weight: 600; }
.storeMenuActivate { color: #3f3f46; }
.storeMenuItem:disabled { opacity: .55; cursor: wait; }
.storeRenameForm { min-width: 0; flex: 1; display: flex; align-items: center; gap: 5px; }
.storeRenameForm input { min-width: 0; flex: 1; height: 32px; padding: 0 8px; border: 1px solid #e4e6e0; border-radius: 7px; outline: none; color: #363b36; background: #fff; font: inherit; font-size: 11px; }
.storeRenameForm input:focus { border-color: #e59b8d; box-shadow: 0 0 0 2px #e9826b16; }
.storeRenameForm button { flex: 0 0 auto; padding: 5px 7px; border: 0; border-radius: 6px; color: #737971; background: #f1f2ef; font-size: 9px; }
.storeRenameForm .storeRenameSave { color: #fff; background: #b74d47; }
.storeRenameForm button:disabled { opacity: .55; }
.storeStatusBadge { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 4px 8px; border-radius: 999px; color: #4f805a; background: #edf5ed; font-size: 9px; font-weight: 700; }
.storeStatusInactive { color: #818781 !important; background: #eff0ed !important; }
.storeCardStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 17px 0 15px; }
.storeCardStats > div, .storeMetricGrid > div { display: grid; gap: 4px; }
.storeCardStats strong { color: #18181b; font: 650 20px 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; }
.storeCardStats span { color: #71717a; font-size: 11px; }
.storeCardFooter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #f0f0f2; }
.storeUpdatedAt { min-width: 0; overflow: hidden; color: #a1a1aa; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.storeOpenButton { min-height: 34px; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 600; white-space: nowrap; transition: background .14s ease; }
.storeOpenButton:hover { color: #fff; background: var(--accent-dark); }
.storeEmpty, .storeNoResults { min-height: 172px; display: grid; justify-items: center; align-content: center; gap: 7px; color: #71717a; font-size: 13px; }
.storeEmpty strong, .storeNoResults strong { color: #18181b; font-size: 16px; font-weight: 600; }
.storeEmpty > span, .storeNoResults > span { color: #71717a; font-size: 12px; text-align: center; }
.storeEmpty .primaryButton { margin-top: 7px; }
.storeHomeFoot { display: flex; align-items: center; gap: 8px; margin: 16px 2px 0; color: #a1a1aa; font-size: 11px; }
.storeHomeFoot .onlineDot { width: 6px; height: 6px; }
.storeHomeFoot strong { color: #656c65; font-size: 10px; }
.storeHomeFoot b { color: #c2c5bf; font-weight: 400; }
.storeDetailHeader { grid-column: 1 / -1; display: grid; gap: 11px; min-width: 0; margin-bottom: 2px; }
.storeDetailTop { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.storeDetailTop h1 { display: flex; align-items: center; gap: 9px; margin: 5px 0; color: #303530; font-size: 22px; letter-spacing: -.045em; }
.storeDetailDescription { margin: 0; color: #878d86; font-size: 10px; }
.storeMetricGrid { display: flex; gap: 9px; }
.storeMetricGrid > div { min-width: 83px; padding: 10px 12px; border: 1px solid #e9eae5; border-radius: 11px; background: #fff; }
.storeMetricGrid strong { color: #343a34; font: 700 17px 'DM Sans', sans-serif; }
.storeMetricGrid span { color: #929890; font-size: 9px; }
.storeCodePanel { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.storeCodePanel > img { flex: 0 0 88px; width: 88px; height: 88px; padding: 3px; border: 1px solid #eeefeb; border-radius: 9px; background: #fff; }
.storeCodeInfo { min-width: 0; flex: 1; }
.storeCodeInfo > strong { color: #454a44; font-size: 11px; }
.storeCodeInfo > p { margin: 4px 0 8px; color: #969b94; font-size: 9px; }
.storeCodeInfo .copyField input { font-size: 9px; }
.rotationRule { margin: 0; padding: 9px 11px; border-radius: 9px; color: #858b83; background: #f0f2ee; font-size: 9px; line-height: 1.6; }
.noteListMeta { display: flex; flex-wrap: wrap; gap: 3px; color: #969b94; font-size: 8px; line-height: 1.35; }
.noteMetric { padding: 2px 4px; border-radius: 4px; background: #f2f3f0; white-space: nowrap; }
.noteLastAssigned { color: #969b94; font-size: 8px; line-height: 1.35; }
.distributionToggle { width: auto; padding: 0 5px; color: #757b74; }
.comingSoonTag { color: #a1a69f; }
.formError { margin: 12px 0 0; color: #ac473f; font-size: 10px; }
.loginFoot { margin: 18px 0 0; color: #a2a69f; font-size: 9px; }
.toast { position: fixed; z-index: 40; bottom: 24px; left: 50%; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 999px; color: #fff; background: #303733; box-shadow: 0 6px 20px #252a2633; font-size: 11px; transform: translateX(-50%); animation: toastIn .18s ease-out; }
.toastError { background: #a9433d; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Public note page */
.publish { max-width: 620px; margin: auto; padding: 18px 16px 50px; }
.publish .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.publish .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: #922237; }
.publish .brandmark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #b5283d; color: #fff; }
.publish .tag { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: #fbe7ea; color: #a1273b; font-size: 12px; font-weight: 700; }
.publish .card { padding: 20px; border: 1px solid #e7eaf0; border-radius: 16px; background: #fff; box-shadow: 0 8px 28px #1f29370a; }
.publish h1 { margin: 8px 0 16px; color: #222; font-size: 24px; line-height: 1.3; }
.publish .body { color: #383d38; white-space: pre-wrap; line-height: 1.65; }
.publish .images { display: flex; gap: 10px; overflow-x: auto; margin: 15px 0; padding: 5px 0; }
.publish .imageCard { flex: 0 0 160px; padding: 7px; border: 1px solid #e7eaf0; border-radius: 12px; background: #fff; }
.publish .imageCard img { width: 144px; height: 144px; border-radius: 8px; background: #f2f3f6; object-fit: cover; }
.publish .chip { padding: 7px 10px; border-radius: 8px; color: #4f5c64; background: #f2f3f6; font-size: 13px; }
.publish .notice { padding: 12px 14px; border: 1px solid #f4d5a8; border-radius: 10px; color: #744c17; background: #fff5e6; line-height: 1.5; }
.publish .notice.error { border-color: #f2c5c1; color: #9c2620; background: #fff1f0; }
.publish .notice.ok { border-color: #c5e8d0; color: #236b3b; background: #edf9f0; }
.publish .small { color: #667085; font-size: 13px; }
.publish .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.publish .divider { height: 1px; margin: 24px 0; background: #e8eaf0; }
.publish button { padding: 10px 16px; border: 0; border-radius: 10px; color: #fff; background: #b5283d; font-weight: 600; }
.publish button.secondary { border: 1px solid #e6c5cc; color: #8a1c2e; background: #fff; }
.publish button:disabled { opacity: .45; cursor: not-allowed; }
.publish .wide { width: 100%; margin: 7px 0; }
.publish .label { color: #667085; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.publish .footer { margin: 28px 0; color: #7a8292; font-size: 12px; text-align: center; }
.publish a { color: #a82437; text-decoration: none; }
.publish .login { max-width: 400px; margin: 12vh auto; }
.publish .event { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.publish pre { white-space: pre-wrap; word-break: break-all; }

@media (min-width: 1500px) {
  .workspace { grid-template-columns: 270px minmax(500px, 1fr) 360px; gap: 25px; padding-top: 28px; }
  .editorSection { padding: 26px 28px; }
  .phoneShell { height: 520px; }
  .phoneMedia { height: 196px; }
}
@media (min-width: 1440px) {
  .storeList.storeListMany { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1240px) {
  .workspace { grid-template-columns: 245px minmax(355px, 1fr) 295px; gap: 14px; padding: 18px 16px 32px; }
  .storeHome { padding-right: 24px; padding-left: 24px; }
  .editorSection { padding: 20px 18px; }
  .previewColumn { padding: 16px 13px; }
  .phoneShell { height: 475px; }
  .phoneMedia { height: 168px; }
  .imageGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .noteFilterBar kbd { display: none; }
}
@media (max-width: 970px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .workspace.previewCollapsed { grid-template-columns: minmax(0, 1fr); }
  .workspace.welcomeView { align-items: start; }
  .workspace.welcomeView > .editorColumn { min-height: 0; }
  .workspace.welcomeView .welcomePanel { min-height: 320px; }
  .noteRail { position: static; grid-column: 1; width: 100%; height: auto; max-height: none; min-height: 0; }
  .noteList { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-content: start; gap: 8px; overflow: visible; margin: 0; padding: 0 4px 8px; }
  .noteListItem { min-width: 0; margin: 0; }
  .editorColumn { grid-column: 1; }
  .workspace.previewCollapsed > .editorColumn { grid-column: 1; }
  .workspace.previewCollapsed > .previewColumn { display: none; }
  .storeDetailTop { align-items: flex-start; flex-wrap: wrap; }
  .storeMetricGrid { flex-wrap: wrap; }
  .previewColumn { position: static; grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .85fr); grid-template-areas: "head head" "disclaimer disclaimer" "tabs tabs" "view checklist"; align-items: start; gap: 0 16px; }
  .workspace.editorActiveView:not(.materialsMode) > .previewColumn { position: static; height: auto; max-height: none; min-height: 0; overflow: visible; align-self: stretch; }
  .previewHeader { grid-area: head; }
  .previewDisclaimer { grid-area: disclaimer; }
  .previewTabs { grid-area: tabs; }
  #notePreviewView, .coverPreviewView { grid-area: view; min-width: 0; }
  .phoneShell { width: min(100%, 270px); }
  .previewChecklist { grid-area: checklist; margin-top: 0; }
}
@media (max-width: 680px) {
  .appbar { height: 56px; padding: 0 14px; }
  .brand { gap: 7px; font-size: 13px; }
  .brandmark { width: 26px; height: 26px; }
  .envBadge { display: none; }
  .appbarActions { gap: 6px; }
  .saveState { display: none; }
  .quietButton { padding: 7px 9px; font-size: 10px; }
  .storeHome { min-height: calc(100vh - 56px); padding: 25px 14px 26px; }
  .storeHomeHeading { display: grid; grid-template-columns: minmax(0, 1fr); align-items: flex-start; gap: 12px; margin-bottom: 15px; }
  .storeHomeHeading h1 { font-size: 25px; }
  .storeHomeHeading p:last-child { max-width: 290px; font-size: 12px; line-height: 1.5; }
  .storeHomeHeading .storeCreateArea { justify-self: start; width: min(100%, 400px); }
  .storeHomeHeading .storeCreateArea > .primaryButton { min-height: 36px; padding: 0 12px; font-size: 11px; white-space: nowrap; }
  .storeCreateForm { width: 100%; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; }
  .storeCreateForm input { font-size: 12px; }
  .storeOverview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adminBody .overviewMetric { padding: 10px 12px; }
  .overviewMetric + .overviewMetric { border-left: 0; }
  .overviewMetric:nth-child(even) { border-left: 1px solid #f0f0f2; }
  .overviewMetric:nth-child(n+3) { border-top: 1px solid #f0f0f2; }
  .adminBody .trendPanel { padding: 13px 12px 10px; }
  .trendPanelHeading { align-items: flex-start; gap: 8px; }
  .trendHeadingCopy p { max-width: 205px; }
  .trendPanelActions { gap: 5px; }
  .trendRangeButton { min-width: 39px; padding: 0 5px; }
  .trendCloseButton { width: 30px; height: 30px; }
  .trendChartWrap { min-height: 145px; }
  .trendChart { height: 160px; }
  .storeToolbar { flex-wrap: wrap; gap: 7px; }
  .storeSearch { flex: 1 0 100%; }
  .storeSelect, .storeSort { width: auto; min-width: 0; flex: 1; }
  .storeList, .storeList.storeListMany { grid-template-columns: 1fr; gap: 9px; }
  .storeCard { padding: 15px; }
  .storeCardStats { gap: 8px; margin: 14px 0; }
  .storeCardStats strong { font-size: 18px; }
  .storeCardStats span { font-size: 10px; }
  .storeCardFooter { gap: 8px; }
  .storeOpenButton { min-height: 33px; padding: 0 10px; font-size: 10px; }
  .storeUpdatedAt { font-size: 10px; }
  .storeHomeFoot { flex-wrap: wrap; gap: 6px; font-size: 9px; }
  .workspace { display: flex; flex-direction: column; gap: 12px; padding: 12px 10px 28px; }
  .noteRail { position: static; width: 100%; height: auto; max-height: none; min-height: 0; padding: 12px; }
  .railHeading { padding-bottom: 10px; }
  .railHeading h1 { font-size: 19px; }
  .listCaption { margin-top: 12px; }
  .noteFilterBar { gap: 5px; }
  .noteSort { flex-basis: 74px; width: 74px; }
  .noteFilterBar kbd { display: none; }
  .noteList { display: flex; gap: 5px; max-height: 154px; overflow-x: auto; overflow-y: hidden; margin-bottom: -4px; }
  .noteListItem { flex: 0 0 270px; align-self: flex-start; margin: 0; }
  .emptyList { min-height: 45px; }
  .railFoot { display: none; }
  .editorColumn, .previewColumn { width: 100%; }
  .storeDetailHeader { gap: 9px; }
  .storeDetailTop { display: grid; gap: 10px; }
  .storeDetailTop h1 { font-size: 19px; }
  .storeMetricGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .storeMetricGrid > div { min-width: 0; padding: 8px 9px; }
  .storeMetricGrid strong { font-size: 15px; }
  .storeMetricGrid span { font-size: 8px; }
  .storeCodePanel { align-items: flex-start; gap: 9px; padding: 9px; }
  .storeCodePanel > img { flex-basis: 70px; width: 70px; height: 70px; }
  .storeCodeInfo > p { line-height: 1.45; }
  .storeCodeInfo .shareActions { flex-wrap: wrap; }
  .editorTopline { top: 56px; min-height: 46px; margin-top: -2px; }
  .breadcrumb { gap: 6px; font-size: 9px; }
  .breadcrumb strong { max-width: 105px; font-size: 10px; }
  .editorTopActions { gap: 6px; }
  .statusBadge { gap: 4px; font-size: 8px; }
  .primaryButton.compact { min-height: 30px; padding: 0 9px; font-size: 9px; }
  .editor { gap: 10px; }
  .editorSection { padding: 17px 14px; border-radius: 14px; }
  .sectionHeading { margin-bottom: 16px; }
  .sectionHeading h2 { font-size: 13px; }
  .sectionHeading p { max-width: 270px; font-size: 9px; }
  .fieldBlock .titleInput { font-size: 15px; }
  .dropZone { flex-wrap: wrap; min-height: 90px; padding: 12px; }
  .dropZone small { flex-basis: 100%; margin-left: 44px; }
  .imageGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sharePanel { align-items: flex-start; gap: 10px; padding: 9px; }
  .shareQrWrap { flex-basis: 88px; width: 88px; height: 88px; }
  .shareQrWrap img { width: 80px; height: 80px; }
  .shareDetails p { font-size: 8px; }
  .shareActions { gap: 8px; }
  .textLink { font-size: 8px; }
  .activityRow { display: grid; gap: 3px; }
  .activityMeta { text-align: left; }
  .previewColumn { position: static; display: block; padding: 16px; }
  .phoneShell { width: min(100%, 270px); height: 500px; margin-top: 12px; }
  .phoneMedia { height: 184px; }
  .coverPreviewView { min-height: 500px; }
  .discoverPreview { width: min(100%, 270px); }
  .previewChecklist { margin-top: 13px; }
  .welcomePanel { min-height: 320px; padding: 25px; }
  .welcomePanel h2 { font-size: 20px; }
  .loginWrap { min-height: calc(100vh - 56px); padding: 18px; }
  .loginCard { padding: 25px; }
  .publish { padding: 12px 10px 38px; }
  .publish .card { padding: 15px; }
}

.storePublish { min-height: 100vh; margin: 0; padding: max(20px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); color: #343a34; background: #f7f7f4; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.storePublishWrap { width: min(100%, 650px); margin: 0 auto; }
.storePublishHead { display: flex; align-items: center; gap: 11px; min-height: 45px; margin-bottom: 18px; }
.storePublishHead .brandmark { width: 34px; height: 34px; flex: 0 0 auto; }
.storePublishHead > div { display: grid; gap: 3px; }
.storePublishHead strong { color: #8d2337; font-size: 13px; }
.storePublishHead small { color: #9a9e98; font-size: 9px; }
.storePublishBadge { margin-left: auto; padding: 6px 10px; border-radius: 999px; color: #9c3446; background: #f9e8eb; font-size: 9px; font-weight: 700; }
.storePublishCard { padding: 27px; border: 1px solid #e8eae5; border-radius: 18px; background: #fff; box-shadow: 0 10px 32px #30352f0a; }
.storePublishCard > .eyebrow { margin: 0 0 8px; color: #aa7b68; font-size: 9px; letter-spacing: .14em; }
.storePublishCard > h1 { margin: 0; color: #303530; font-size: 24px; letter-spacing: -.04em; overflow-wrap: anywhere; }
.storePublishIntro { margin: 8px 0 22px; color: #858b84; font-size: 12px; line-height: 1.6; }
.storeLoading { display: flex; align-items: center; gap: 10px; min-height: 68px; color: #818780; font-size: 12px; }
.storeSpinner { width: 17px; height: 17px; border: 2px solid #e6e8e3; border-top-color: #ba344a; border-radius: 50%; animation: storeSpin .8s linear infinite; }
@keyframes storeSpin { to { transform: rotate(360deg); } }
.storeMessage { padding: 17px; border: 1px solid #f0d7d9; border-radius: 12px; background: #fff8f8; }
.storeMessage strong { color: #922f3d; font-size: 13px; }
.storeMessage p { margin: 7px 0 14px; color: #7d696a; font-size: 11px; line-height: 1.7; }
.assignedNoteHeading { display: flex; align-items: center; justify-content: space-between; margin: 5px 0 10px; color: #92988f; font-size: 10px; }
.assignedImageMeta { display: flex; align-items: center; gap: 8px; }
.assignedImageMeta #assignedImageHint { color: #a0a59e; font-size: 9px; }
.assignedNoteCard { overflow: hidden; border: 1px solid #edefe9; border-radius: 13px; background: #fff; }
.assignedNoteCopy { padding: 17px; }
.assignedNoteCopy h2 { margin: 0 0 9px; color: #303530; font-size: 19px; line-height: 1.45; overflow-wrap: anywhere; }
.assignedNoteCopy > p { margin: 0; color: #4e554e; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.assignedImages { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 12px; }
.assignedImageCard { flex: 0 0 min(84%, 460px); min-width: 0; margin: 0; padding: 7px; border: 1px solid #edefe9; border-radius: 10px; background: #fafbf9; scroll-snap-align: start; }
.assignedImageCard img { display: block; width: 100%; height: min(48vh, 380px); min-height: 180px; border-radius: 7px; background: #f0f2ee; object-fit: contain; }
.assignedImageUnavailable { min-height: 150px; display: grid; place-items: center; padding: 12px; border-radius: 7px; color: #8a9088; background: #f0f2ee; font-size: 10px; text-align: center; }
.assignedImageCard figcaption { margin: 6px 0 2px; color: #8e948c; font-size: 10px; }
.storePublish .assignedContinue { min-height: 48px; border: 0; border-radius: 11px; color: #fff; background: #d9464f; font-size: 15px; font-weight: 700; }
.storePublish .assignedContinue:hover { background: #bd3540; }
.storePublish .assignedContinue.disabled { pointer-events: none; color: #8b8e89; background: #eceeea; }
.storePublish .notice { padding: 10px 12px; border: 1px solid #e8e9e4; border-radius: 9px; color: #636b62; background: #f8faf7; line-height: 1.55; }
.storePublish .notice.error { border-color: #f0d1cc; color: #9c3f38; background: #fff5f3; }
.storePublish .notice.ok { border-color: #dce9dd; color: #52755a; background: #f4faf4; }
.storePublish #launchInfo { margin: 8px 0 2px; font-size: 11px; }
.storeManualFallback { margin-top: 13px; padding: 12px 13px; border: 1px solid #eceee9; border-radius: 10px; background: #fafbf9; }
.storeManualFallback summary { color: #626961; cursor: pointer; font-size: 11px; font-weight: 650; }
.storeManualFallback p { margin: 9px 0; color: #858b84; font-size: 10px; line-height: 1.6; }
.storeManualFallback small { display: block; color: #92988f; font-size: 9px; line-height: 1.6; }
.manualCopyActions { display: flex; flex-wrap: wrap; gap: 7px; }
.manualCopyActions .quietButton { padding: 7px 9px; font-size: 10px; }
.assignedTopics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.assignedTopics span { padding: 5px 9px; border-radius: 7px; color: #395777; background: #f1f3f6; font-size: 10px; }
.assignedContinue { width: 100%; justify-content: center; margin-top: 15px; text-decoration: none; }
.reassignButton { width: 100%; justify-content: center; min-height: 40px; margin-top: 8px; border: 1px solid #efd5d7; color: #a34250; background: #fff; font-weight: 650; }
.reassignButton:hover { color: #873440; background: #fff7f7; }
.reassignButton:disabled { opacity: .6; }
.reassignMessage { margin: 6px 2px 0; color: #9a6268; font-size: 10px; line-height: 1.6; }
.storeManualNote { margin: 11px 2px 0; color: #8b918a; font-size: 10px; line-height: 1.7; }
.storeRotationInfo { margin-top: 22px; padding-top: 16px; border-top: 1px solid #f0f1ed; }
.storeRotationInfo strong { color: #555c55; font-size: 10px; }
.storeRotationInfo p { margin: 6px 0 0; color: #92988f; font-size: 9px; line-height: 1.7; }
.storePublishFoot { padding: 15px 8px 0; color: #a2a79f; font-size: 9px; line-height: 1.6; text-align: center; }
@media (max-width: 680px) {
  .storePublish { padding-right: 12px; padding-left: 12px; }
  .storePublishCard { padding: 20px 16px; border-radius: 15px; }
  .storePublishCard > h1 { font-size: 21px; }
  .assignedNoteCopy { padding: 14px; }
  .assignedImages { gap: 8px; padding: 10px; }
  .assignedImageCard { flex-basis: 84%; padding: 6px; }
  .assignedImageCard img { height: min(42vh, 320px); min-height: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Store-local material library */
.workspace.materialsMode { grid-template-columns: minmax(0, 1fr); }
.workspace.materialsMode > .editorColumn { grid-column: 1 / -1; width: 100%; max-width: none; margin: 0; }
.storeSectionTabs { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; min-height: 38px; margin: -4px 0 0; border-bottom: 1px solid #e8e9e4; }
.storeSectionTab { min-height: 35px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; color: #777d76; background: transparent; font-size: 11px; font-weight: 650; }
.storeSectionTab.active { border-bottom-color: var(--accent); color: #a33f43; }
.storeSectionHint { margin-left: auto; color: #999f97; font-size: 10px; }
.materialLibraryPage { display: grid; gap: 13px; min-width: 0; }
.materialLibraryHeader { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.materialLibraryHeader h1 { margin: 4px 0; color: #303530; font-size: 21px; letter-spacing: -.04em; }
.materialLibraryHeader p:last-child { margin: 0; color: #878d86; font-size: 10px; line-height: 1.6; }
.materialWorkflowStep { display: grid; gap: 7px; min-width: 0; }
.materialDevSync { padding: 11px 13px; border: 1px solid #e8e9e4; border-radius: 12px; background: #fbfcfa; }
.materialDevSync > summary { display: flex; align-items: center; gap: 9px; color: #5f665e; font-size: 10px; font-weight: 700; cursor: pointer; list-style: none; }
.materialDevSync > summary::-webkit-details-marker { display: none; }
.materialDevSync > summary::before { content: '＋'; display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #e4e6df; border-radius: 6px; color: #828980; background: #fff; }
.materialDevSync[open] > summary::before { content: '−'; }
.materialDevSync > summary small { color: #969b94; font-size: 9px; font-weight: 450; }
.materialDevSync[open] { gap: 10px; }
.materialDevSync[open] > summary { margin-bottom: 2px; }
.materialStepHeading { display: flex; align-items: center; gap: 9px; min-width: 0; }
.materialStepHeading > span { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; border-radius: 8px; color: #a33f43; background: #fff0ee; font-size: 9px; font-weight: 750; }
.materialStepHeading > div { display: grid; gap: 2px; min-width: 0; }
.materialStepHeading strong { color: #3f443f; font-size: 11px; font-weight: 700; }
.materialStepHeading small { color: #858b84; font-size: 9px; line-height: 1.5; }
.materialSourceBar, .materialUploadBar, .materialToolbar, .materialBatchBar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.materialFolderHint { margin: -2px 2px 0; color: #858b84; font-size: 11px; line-height: 1.65; }
.materialSourceBar > label, .materialUploadBar strong { color: #525850; font-size: 11px; font-weight: 650; }
.materialSourceBar .storeSelect { min-width: 180px; flex: 0 1 300px; }
.materialSourceStatus { color: #65836b; font-size: 10px; }
.materialSourceStatus.isMissing { color: #b34842; }
.materialSourceBar #scanMaterials { flex: 0 0 auto; }
.materialSubfolderPicker { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 9px 12px; border: 1px solid #e8e9e4; border-radius: 10px; background: #fbfcfa; }
.materialSubfolderPicker > strong { flex: 0 0 auto; padding-top: 2px; color: #646b63; font-size: 9px; }
.materialSubfolderChoices { display: flex; flex: 1; flex-wrap: wrap; gap: 7px 12px; min-width: 0; }
.materialSubfolderOption { display: inline-flex; align-items: center; gap: 4px; color: #777d76; font-size: 9px; cursor: pointer; }
.materialSubfolderOption input { width: 13px; height: 13px; margin: 0; accent-color: var(--accent); }
.materialSubfolderEmpty { color: #969c94; font-size: 9px; }
.materialNotice, .materialWarning, .materialMessage { padding: 10px 12px; border: 1px solid #f0d5c8; border-radius: 10px; color: #9d5348; background: #fff7f3; font-size: 10px; line-height: 1.65; }
.materialMessage.successMessage { border-color: #d9e8dc; color: #52755a; background: #f5faf5; }
.materialUploadBar { justify-content: space-between; }
.materialUploadBar > div:not(.materialUploadActions) { display: grid; gap: 4px; }
.materialUploadActions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.materialUploadBar span { color: #929890; font-size: 9px; }
.materialImportPreview { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #f0dbca; border-radius: 10px; color: #715d49; background: #fffaf4; font-size: 10px; line-height: 1.6; }
.materialImportPreview > div { display: flex; flex: 0 0 auto; gap: 7px; }
.materialImportPreview .quietButton, .materialImportPreview .primaryButton { min-height: 31px; padding: 0 10px; font-size: 9px; }
.materialUploadButton { position: relative; cursor: pointer; }
.materialUploadButton.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.materialProgress { display: flex; align-items: center; gap: 10px; color: #777d76; font-size: 10px; }
.materialProgress progress { width: min(240px, 50%); height: 7px; accent-color: var(--accent); }
.materialProgress .quietButton { min-height: 28px; padding: 0 9px; font-size: 9px; }
.materialToolbar { padding: 9px; }
.materialToolbar .storeSelect { min-width: 120px; flex: 0 1 150px; }
.materialSearch { min-width: 190px; min-height: 34px; flex: 1 1 250px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #e9eae5; border-radius: 9px; color: #9ba099; background: #fafbf9; }
.materialSearch > span { font-size: 18px; }
.materialSearch input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.materialBatchBar { min-height: 48px; padding: 8px 11px; }
.materialBatchBar > span { margin-right: auto; color: #71776f; font-size: 10px; }
.materialBatchBar label { display: inline-flex; align-items: center; gap: 5px; color: #8c928a; font-size: 9px; }
.materialBatchBar select, .materialPickerTools select { min-height: 30px; padding: 0 8px; border: 1px solid #e6e8e2; border-radius: 8px; color: #4c534c; background: #fff; font-size: 9px; }
.materialBatchBar .quietButton { padding: 7px 10px; font-size: 10px; }
.materialBatchBar .quietButton:disabled { cursor: not-allowed; opacity: .48; }
.materialBatchBar .quietButton.confirming, .materialRemoveButton.confirming { border-color: #c94646; color: #fff; background: #c94646; box-shadow: none; }
.materialResultLine { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #6f766d; font-size: 10px; }
.materialResultLine small { color: #969b94; font-size: 9px; text-align: right; }
.materialGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.materialLoadMore { display: block; min-width: 190px; margin: 16px auto 4px; }
.materialCard { position: relative; min-width: 0; overflow: hidden; border: 1px solid #e8e9e4; border-radius: 11px; background: #fff; transition: border-color .14s ease, box-shadow .14s ease; }
.materialCard:hover, .materialCard.selected { border-color: #df8d82; box-shadow: 0 3px 12px #462e2710; }
.materialCardSelect { position: relative; display: grid; grid-template-rows: 142px auto; cursor: pointer; }
.materialCardSelect > input { position: absolute; z-index: 1; top: 8px; left: 8px; width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.materialCardSelect > img { width: 100%; height: 142px; object-fit: cover; background: #f1f2ef; }
.materialCardSelect > img.unavailable { background: linear-gradient(135deg, #f0f1ee 25%, #e6e8e3 25%, #e6e8e3 50%, #f0f1ee 50%, #f0f1ee 75%, #e6e8e3 75%); background-size: 18px 18px; }
.materialRemoveButton { position: absolute; z-index: 2; top: 7px; right: 7px; min-height: 24px; padding: 0 8px; border: 1px solid #ffffffd9; border-radius: 7px; color: #934942; background: #fff; box-shadow: 0 1px 4px #25252518; font-size: 9px; font-weight: 650; }
.materialRemoveButton:hover { border-color: #e7b9b3; color: #a33f43; background: #fff7f5; }
.materialRemoveButton.confirming:hover { border-color: #b53d3d; color: #fff; background: #b53d3d; }
.materialCardInfo { display: grid; gap: 5px; min-width: 0; padding: 9px; }
.materialCardInfo > strong { overflow: hidden; color: #414741; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.materialCardInfo > span:not(.materialBadges) { color: #9a9f98; font-size: 8px; }
.materialCardInfo > .materialOriginLabel { overflow: hidden; color: #818980; text-overflow: ellipsis; white-space: nowrap; }
.materialCardInfo > small { color: #b14c43; font-size: 8px; line-height: 1.4; }
.materialBadges { display: flex; flex-wrap: wrap; gap: 4px; }
.materialBadges i { padding: 3px 5px; border-radius: 5px; color: #687168; background: #f1f3ef; font-size: 8px; font-style: normal; }
.materialBadges i.pending { color: #a36b3b; background: #fff4e6; }
.materialBadges i.available { color: #547d5b; background: #edf5ee; }
.materialBadges i.missing { color: #a4443e; background: #fff0ed; }
.materialBadges i.archived { color: #858b84; background: #eff0ed; }
.materialEmpty { grid-column: 1 / -1; padding: 28px 16px; border: 1px dashed #dfe2dc; border-radius: 11px; color: #90968e; background: #fbfcfa; font-size: 10px; text-align: center; }
.materialIssues { padding: 12px; border: 1px solid #efdfce; border-radius: 10px; color: #8f6a48; background: #fffaf4; font-size: 9px; }
.materialIssues p { margin: 6px 0 0; }
.imageSourceActions { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.imageSourceActions .quietButton { padding: 8px 11px; font-size: 10px; }
.imageSourceActions > span { color: #969b94; font-size: 9px; }
.materialPicker { margin-top: 10px; padding: 13px; border: 1px solid #e7e8e3; border-radius: 12px; background: #fbfcfa; }
.materialPickerHead, .materialPickerFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.materialPickerHead strong { color: #454b44; font-size: 11px; }
.materialPickerTools { display: flex; gap: 7px; margin: 10px 0; }
.materialPickerTools .materialSearch { flex: 1 1 auto; }
.materialPickerTools select { flex: 0 0 auto; }
.pickerSelectionMode { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; }
.pickerSelectionMode button { min-height: 28px; padding: 0 9px; border: 1px solid #e4e6e0; border-radius: 7px; color: #737a72; background: #fff; font-size: 9px; }
.pickerSelectionMode button.active { border-color: #e0a099; color: #a34741; background: #fff4f1; }
.pickerSelectionMode span { margin-left: auto; color: #989e96; font-size: 9px; }
.pickerGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; max-height: 330px; overflow: auto; }
.pickerMaterialCard { position: relative; min-width: 0; display: grid; gap: 5px; padding: 5px; border: 1px solid #e7e8e3; border-radius: 9px; background: #fff; cursor: pointer; }
.pickerMaterialCard.selected { border-color: #df8d82; box-shadow: 0 0 0 1px #df8d82; }
.pickerMaterialCard input { position: absolute; z-index: 1; top: 8px; left: 8px; width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.pickerMaterialCard img { width: 100%; aspect-ratio: 1; border-radius: 6px; object-fit: cover; background: #f0f1ee; }
.pickerMaterialCard > span { overflow: hidden; color: #535950; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.pickerMaterialCard small { overflow: hidden; color: #9a9f98; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.materialPickerFoot { justify-content: flex-end; margin-top: 10px; color: #8b9189; font-size: 9px; }
.materialPickerFoot > span { margin-right: auto; }

@media (max-width: 970px) {
  .workspace.materialsMode { display: grid; grid-template-columns: minmax(0, 1fr); }
  .workspace.materialsMode > .editorColumn { grid-column: 1; }
  .storeSectionTabs { grid-column: 1; }
}
@media (max-width: 680px) {
  .storeSectionTabs { width: 100%; margin-top: -5px; }
  .storeSectionHint { font-size: 8px; }
  .materialLibraryHeader { align-items: flex-start; padding: 13px; }
  .materialLibraryHeader h1 { font-size: 18px; }
  .materialLibraryHeader p:last-child { max-width: 250px; font-size: 9px; }
  .materialLibraryHeader .primaryButton { flex: 0 0 auto; padding: 0 9px; font-size: 8px; }
  .materialSourceBar { align-items: stretch; }
  .materialSourceBar > label { flex: 1 0 100%; }
  .materialSourceBar .storeSelect { min-width: 0; flex: 1 1 100%; }
  .materialSourceBar > button { flex: 1 1 auto; }
  .materialSourceStatus { width: 100%; }
  .materialSubfolderPicker { flex-direction: column; }
  .materialUploadBar { align-items: flex-start; }
  .materialUploadBar > div { flex: 1 1 100%; }
  .materialImportPreview { align-items: flex-start; flex-direction: column; }
  .materialImportPreview > div { flex-wrap: wrap; }
  .materialToolbar .storeSelect { flex: 1 1 calc(50% - 8px); }
  .materialDevSync > summary { align-items: flex-start; flex-wrap: wrap; }
  .materialDevSync > summary small { flex: 1 1 calc(100% - 30px); margin-left: 29px; }
  .materialBatchBar { align-items: center; }
  .materialBatchBar > span { flex: 1 1 100%; }
  .materialBatchBar label { flex: 1 1 42%; justify-content: space-between; }
  .materialBatchBar select { max-width: 120px; }
  .materialResultLine { align-items: flex-start; flex-direction: column; gap: 4px; }
  .materialResultLine small { text-align: left; }
  .materialGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .materialCardSelect { grid-template-rows: 118px auto; }
  .materialCardSelect > img { height: 118px; }
  .materialCardInfo { padding: 7px; }
  .materialPicker { padding: 9px; }
  .materialPickerTools { flex-wrap: wrap; }
  .materialPickerTools .materialSearch { flex-basis: 100%; }
  .pickerGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pickerSelectionMode span { max-width: 100px; text-align: right; }
}