.uxdesc-root {
--bg-primary:#0a0e13;
--bg-secondary:#0e1216;
--bg-tertiary:#141a20;
--bg-elevated:#1a2129;
--border-primary:#2a2f36;
--border-accent:#3e4854;
--text-primary:#e6e9ee;
--text-secondary:#cfd7e3;
--text-muted:#9aa3af;
--accent-danger:#e63946;
--accent-success:#52b788;
--accent-warning:#f4a261;
--shadow-sm:0 1px 3px #0000004d;
--shadow-md:0 4px 6px #0006;
--shadow-lg:0 10px 15px #00000080;
--transition-fast:150ms ease;
--transition-normal:250ms ease
}

.uxdesc-shell {
display:grid;
grid-template-columns:minmax(0,1fr) 280px;
gap:16px;
min-height:400px
}

@media (max-width: 1024px) {
.uxdesc-shell {
grid-template-columns:1fr
}

.uxdesc-toc {
display:none
}
}

.uxdesc-toc {
position:sticky;
top:16px;
align-self:start;
background:var(--bg-secondary);
border:1px solid var(--border-primary);
border-radius:12px;
padding:0;
height:auto;
max-height:calc(100vh - 32px);
overflow:hidden;
box-shadow:var(--shadow-sm);
z-index:5;
display:flex;
flex-direction:column
}

.uxdesc-toc-list {
flex:1;
overflow-y:auto;
overflow-x:hidden;
padding:5px 12px 12px;
scroll-behavior:smooth
}

.uxdesc-toc-list::-webkit-scrollbar {
width:6px
}

.uxdesc-toc-list::-webkit-scrollbar-track {
background:transparent
}

.uxdesc-toc-list::-webkit-scrollbar-thumb {
background:var(--border-primary);
border-radius:3px
}

.uxdesc-toc-list::-webkit-scrollbar-thumb:hover {
background:var(--border-accent)
}

.uxdesc-toc-header {
position:sticky;
top:0;
z-index:10;
background:var(--bg-secondary);
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 12px 8px;
border-bottom:1px solid var(--border-primary);
flex-shrink:0
}

.uxdesc-toc h6 {
margin:0;
font-size:.75rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--text-muted)
}

.uxdesc-toc-search {
position:sticky;
top:44px;
z-index:9;
background:var(--bg-secondary);
padding:8px 12px;
border-bottom:1px solid var(--border-primary);
flex-shrink:0
}

.uxdesc-toc-search input {
width:100%;
background:var(--bg-primary);
border:1px solid var(--border-primary);
border-radius:6px;
padding:6px 8px;
font-size:.85rem;
color:var(--text-primary);
transition:border-color var(--transition-fast)
}

.uxdesc-toc-search input:focus {
outline:none;
border-color:var(--lb-accent-primary);
}

.uxdesc-toc-search input::placeholder {
color:var(--text-muted)
}

.uxdesc-toc a {
display:block;
padding:6px 8px;
border-radius:6px;
color:var(--text-secondary);
text-decoration:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:background var(--transition-fast),color var(--transition-fast);
font-size:.9rem;
line-height:1.4;
transform:none!important
}

.uxdesc-toc a.toc-sub,.uxdesc-toc a.toc-depth-1 {
padding-left:24px
}

.uxdesc-toc a.toc-depth-2 {
padding-left:40px;
font-size:.8rem
}

.uxdesc-toc a.toc-depth-3 {
padding-left:56px;
font-size:.75rem
}

.uxdesc-toc a:hover {
background:var(--bg-tertiary);
color:var(--text-primary)
}

.uxdesc-toc a.active {
background:linear-gradient(90deg,#4b8dff26,transparent);
border-left:3px solid var(--lb-accent-primary);
padding-left:5px!important;
color:var(--lb-accent-primary);
font-weight:600
}

.uxdesc-toc a.toc-sub.active {
padding-left:21px!important
}

.uxdesc-toc a.toc-depth-1.active {
padding-left:21px!important
}

.uxdesc-toc a.toc-depth-2.active {
padding-left:37px!important
}

.uxdesc-toc a.toc-depth-3.active {
padding-left:53px!important
}

.uxdesc-toc a.hidden {
display:none
}

.uxdesc-toolbar {
display:flex;
align-items:center;
gap:8px;
padding:8px 12px;
border:1px solid var(--border-primary);
border-radius:10px;
margin-bottom:16px;
background:var(--bg-secondary);
position:sticky;
top:0;
z-index:10;
box-shadow:var(--shadow-sm);
backdrop-filter:blur(8px)
}

.uxdesc-toolbar .sep {
width:1px;
height:20px;
background:var(--border-primary);
margin:0 4px
}

.uxdesc-toolbar button {
border:1px solid var(--border-primary);
background:var(--bg-tertiary);
color:var(--text-primary);
padding:6px 12px;
border-radius:6px;
cursor:pointer;
font-size:.875rem;
font-weight:500;
transition:all var(--transition-fast);
display:flex;
align-items:center;
gap:6px
}

.uxdesc-toolbar button:hover {
background:var(--bg-elevated);
border-color:var(--border-accent);
transform:translateY(-1px);
box-shadow:var(--shadow-sm)
}

.uxdesc-toolbar button:active {
transform:translateY(0)
}

.uxdesc-toolbar button[disabled] {
opacity:.5;
cursor:not-allowed;
transform:none
}

.uxdesc-toolbar button.primary {
background:var(--lb-accent-primary);
border-color:var(--lb-accent-primary);
color:#fff
}

.uxdesc-toolbar button.primary:hover {
background:var(--lb-accent-primary);
}

.uxdesc-tooltip {
position:relative
}

.uxdesc-tooltip::after {
content:attr(data-tooltip);
position:absolute;
bottom:calc(100% + 8px);
left:50%;
transform:translateX(-50%) scale(0.9);
padding:4px 8px;
background:var(--bg-primary);
border:1px solid var(--border-accent);
border-radius:6px;
font-size:.75rem;
color:var(--text-secondary);
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:all var(--transition-fast);
z-index:100
}

.uxdesc-tooltip:hover::after {
opacity:1;
transform:translateX(-50%) scale(1)
}

.uxdesc-box {
border:1px solid var(--border-primary);
border-radius:14px;
background:var(--bg-secondary);
padding:16px;
margin:16px 0;
position:relative;
transition:all var(--transition-normal);
box-shadow:var(--shadow-sm)
}

.uxdesc-edit .uxdesc-box {
border:2px solid var(--border-accent);
background:var(--bg-secondary)
}

.uxdesc-box:hover {
    border-color: var(--lb-accent-primary)
}

.uxdesc-edit .uxdesc-box:hover {
border-color:var(--lb-accent-primary)
}

.uxdesc-box.active {
border-color:var(--lb-accent-primary);
box-shadow:0 0 0 3px #4b8dff1a
}

.uxdesc-box.collapsed .uxdesc-box-body {
display:none
}

.uxdesc-box-head {
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px;
position:relative
}

.uxdesc-box-title {
margin:0;
font-size:1.25rem;
font-weight:700;
color:var(--text-primary);
flex:1
}

.uxdesc-box-actions {
display:flex;
align-items:center;
gap:6px;
margin-left:auto;
flex-shrink:0
}

.uxdesc-collapse-btn,.uxdesc-move-btn,.uxdesc-del {
border:1px solid var(--border-primary);
background:var(--bg-tertiary);
color:var(--text-muted);
padding:4px 8px;
border-radius:6px;
cursor:pointer;
font-size:.75rem;
transition:all var(--transition-fast)
}

.uxdesc-collapse-btn:hover,.uxdesc-move-btn:hover {
background:var(--bg-elevated);
color:var(--text-primary)
}

.uxdesc-del {
border-color:#6b1d2a;
background:#3a1720;
color:#ff6b7a
}

.uxdesc-del:hover {
background:#4a2030;
border-color:#8b2d3a;
color:#ff8a96
}

.uxdesc-num {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
height:28px;
padding:0 8px;
background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-elevated));
border:1px solid var(--border-primary);
border-radius:12px;
color:var(--lb-accent-primary);
font-size:.875rem;
font-weight:700;
box-shadow:var(--shadow-sm)
}

.uxdesc-box-title {
margin:0;
font-size:1.25rem;
font-weight:700;
color:var(--text-primary);
flex:1
}

.uxdesc-subsection {
border:1px dashed var(--border-primary);
border-radius:10px;
padding:12px;
margin:12px 0;
background:var(--bg-primary);
position:relative;
transition:all var(--transition-fast)
}

.uxdesc-edit .uxdesc-subsection {
border:2px dashed var(--border-accent)
}

.uxdesc-subsection:hover {
border-color:var(--border-accent);
background:#141a2080
}

.uxdesc-edit .uxdesc-subsection:hover {
border-color:var(--lb-accent-primary)
}

.uxdesc-subsection.view {
border:none;
background:transparent;
padding:0;
margin-top:16px
}

.uxdesc-subsection.collapsed .uxdesc-sub-body {
display:none
}

.uxdesc-subsection[data-depth="1"] {
margin-left:0
}

.uxdesc-subsection[data-depth="2"] {
margin-left:20px;
border-style:dotted
}

.uxdesc-subsection[data-depth="2"] .uxdesc-sub-title {
font-size:.95rem
}

.uxdesc-subsection[data-depth="3"] {
margin-left:40px;
border-style:dotted
}

.uxdesc-subsection[data-depth="3"] .uxdesc-sub-title {
font-size:.9rem
}

.uxdesc-sub-head {
display:flex;
align-items:center;
gap:8px;
margin-bottom:8px;
position:relative
}

.uxdesc-sub-title {
margin:0;
font-size:1.05rem;
font-weight:600;
color:var(--text-secondary);
flex:1
}

.uxdesc-sub-head .uxdesc-box-actions {
display:flex;
align-items:center;
gap:6px;
margin-left:auto;
flex-shrink:0
}

.uxdesc-add-block-row {
display:none;
flex-wrap:wrap;
gap:6px;
margin-top:12px;
padding:12px;
background:var(--bg-primary);
border:2px dashed var(--border-accent);
border-radius:8px;
transition:all var(--transition-fast)
}

.uxdesc-box.active .uxdesc-add-block-row {
display:flex
}

.uxdesc-add-block-row > button {
border:1px solid var(--border-primary);
background:var(--bg-tertiary);
color:var(--text-secondary);
padding:6px 10px;
border-radius:6px;
cursor:pointer;
font-size:.8rem;
font-weight:500;
transition:all var(--transition-fast)
}

.uxdesc-add-block-row > button:hover {
background:var(--bg-elevated);
color:var(--text-primary);
border-color:var(--border-accent);
transform:translateY(-1px)
}

.uxdesc-add-section-row {
margin-top:16px;
display:flex;
justify-content:center
}

.uxdesc-add-section-btn {
border:1px dashed var(--border-primary);
background:var(--bg-secondary);
color:var(--text-primary);
padding:12px 24px;
border-radius:10px;
cursor:pointer;
font-size:.95rem;
font-weight:600;
transition:all var(--transition-fast);
display:flex;
align-items:center;
gap:8px
}

.uxdesc-add-section-btn:hover {
background:var(--bg-tertiary);
border-color:var(--border-accent);
transform:translateY(-2px);
box-shadow:var(--shadow-md)
}

.uxdesc-block {
position:relative;
padding-left:24px;
padding-right:32px;
margin:8px 0;
transition:all var(--transition-fast);
min-height:32px
}

.uxdesc-edit .uxdesc-block {
border:1px solid transparent;
border-radius:8px;
padding:8px 36px 8px 28px;
background:#141a204d
}

.uxdesc-edit .uxdesc-block:hover {
border-color:var(--border-accent);
background:#141a2080
}

.uxdesc-drag {
position:absolute;
left:4px;
top:8px;
width:20px;
height:20px;
display:grid;
place-items:center;
color:var(--text-muted);
cursor:grab;
user-select:none;
opacity:0;
transition:opacity var(--transition-fast)
}

.uxdesc-block:hover .uxdesc-drag {
opacity:1
}

.uxdesc-drag:active {
cursor:grabbing
}

.uxdesc-block > .uxdesc-del {
position:absolute;
right:4px;
top:4px;
border:1px solid #6b1d2a;
background:#3a1720;
color:#ff6b7a;
padding:2px 6px;
border-radius:4px;
cursor:pointer;
font-size:.75rem;
line-height:1.2;
transition:all var(--transition-fast);
opacity:0;
z-index:2
}

.uxdesc-block:hover > .uxdesc-del {
opacity:1
}

.uxdesc-block > .uxdesc-del:hover {
background:#4a2030;
border-color:#8b2d3a;
color:#ff8a96
}

.dragging {
opacity:.5;
transform:scale(0.98)
}

.drag-over-before {
outline:2px solid var(--lb-accent-primary);
outline-offset:2px;
background:#4b8dff0d
}

.drag-over-after {
outline:2px solid var(--lb-accent-primary);
outline-offset:2px;
background:#4b8dff0d;
box-shadow:0 4px 0 -2px var(--lb-accent-primary) inset
}

.uxdesc-box-body p {
margin:0 0 12px;
line-height:1.7;
color:var(--text-secondary)
}

.uxdesc-box-body p:last-child {
margin-bottom:0
}

blockquote {
border-left:4px solid var(--lb-accent-primary);
margin:16px 0;
padding:12px 16px;
color:var(--text-secondary);
background:#4b8dff0d;
border-radius:6px;
font-style:italic
}

blockquote p:last-child {
margin-bottom:0
}

.uxdesc-heading {
margin:16px 0 10px;
color:var(--text-primary);
font-weight:700
}

.uxdesc-h1 {
font-size:1.5rem;
border-bottom:2px solid var(--border-primary);
padding-bottom:8px
}

.uxdesc-h2 {
font-size:1.3rem
}

.uxdesc-h3 {
font-size:1.1rem;
font-weight:600
}

.uxdesc-list {
margin:12px 0 12px 28px;
line-height:1.7;
color:var(--text-secondary)
}

.uxdesc-list li {
margin:6px 0
}

.uxdesc-list ul,.uxdesc-list ol {
margin:8px 0 8px 20px
}

.uxdesc-link {
color:var(--lb-accent-primary);
border-bottom:1px dotted var(--lb-accent-primary);
text-decoration:none;
cursor:pointer;
transition:all var(--transition-fast)
}

.uxdesc-link:hover {
color:var(--lb-accent-primary);
border-bottom-color:var(--lb-accent-primary);
}

.uxdesc-code-block {
margin:16px 0;
border-radius:8px;
overflow:hidden;
background:var(--bg-primary);
border:1px solid var(--border-primary)
}

.uxdesc-code-header {
display:flex;
align-items:center;
justify-content:space-between;
padding:8px 12px;
background:var(--bg-tertiary);
border-bottom:1px solid var(--border-primary)
}

.uxdesc-code-lang {
font-size:.75rem;
color:var(--text-muted);
text-transform:uppercase;
letter-spacing:.05em
}

.uxdesc-code-copy {
border:1px solid var(--border-primary);
background:var(--bg-secondary);
color:var(--text-muted);
padding:3px 8px;
border-radius:4px;
cursor:pointer;
font-size:.75rem;
transition:all var(--transition-fast)
}

.uxdesc-code-copy:hover {
background:var(--bg-elevated);
color:var(--text-primary)
}

.uxdesc-code-block pre {
margin:0;
padding:16px;
overflow-x:auto;
font-family:'Monaco','Menlo','Ubuntu Mono',monospace;
font-size:.875rem;
line-height:1.6;
color:#e6e9ee
}

.uxdesc-code-block code {
font-family:inherit
}

code {
background:var(--bg-tertiary);
border:1px solid var(--border-primary);
border-radius:4px;
padding:2px 6px;
font-family:'Monaco','Menlo','Ubuntu Mono',monospace;
font-size:.875em;
color:var(--lb-accent-primary)
}

.uxdesc-divider {
margin:24px 0;
border:none;
height:1px;
background:linear-gradient(to right,transparent,var(--border-primary),transparent)
}

figure.uxdesc-img,
.uxdesc-block figure {
margin:16px 0;
border-radius:8px;
overflow:hidden;
position:relative;
max-width:100%
}

figure.uxdesc-img.block.center,
.uxdesc-block figure.center {
text-align:center
}

figure.uxdesc-img img,
.uxdesc-block figure img {
max-width:100%;
height:auto;
border-radius:8px;
border:1px solid var(--border-primary);
box-shadow:var(--shadow-md);
display:block
}

figure.uxdesc-img figcaption {
margin-top:8px;
font-size:.875rem;
color:var(--text-muted);
text-align:center;
font-style:italic
}

.uxdesc-img-controls {
display:flex;
gap:4px;
margin-top:8px;
padding:6px;
background:var(--bg-tertiary);
border:1px solid var(--border-primary);
border-radius:6px;
justify-content:center
}

.uxdesc-img-controls button {
border:1px solid var(--border-primary);
background:var(--bg-secondary);
color:var(--text-secondary);
padding:4px 10px;
border-radius:4px;
cursor:pointer;
font-size:.75rem;
transition:all var(--transition-fast)
}

.uxdesc-img-controls button:hover {
background:var(--bg-elevated);
border-color:var(--border-accent)
}

.uxdesc-img-controls button.active {
background:var(--lb-accent-primary);
border-color:var(--lb-accent-primary);
color:#fff
}

figure.uxdesc-img.float.left {
float:left;
margin:4px 24px 16px 0;
max-width:45%;
clear:left
}

figure.uxdesc-img.float.right {
float:right;
margin:4px 0 16px 24px;
max-width:45%;
clear:right
}

.uxdesc-block:has(> figure.uxdesc-img.float) ~ .uxdesc-block {
clear:none
}

figure.uxdesc-img.float + * {
clear:none
}

.uxdesc-table-wrap {
margin:16px 0;
border:1px solid var(--border-primary);
border-radius:10px;
overflow:hidden;
box-shadow:var(--shadow-sm)
}

.uxdesc-table {
border-collapse:separate;
border-spacing:0;
width:100%
}

.uxdesc-table th {
background:var(--bg-tertiary);
color:var(--text-primary);
font-weight:600;
text-align:left
}

.uxdesc-table th,.uxdesc-table td {
border-right:1px solid var(--border-primary);
border-bottom:1px solid var(--border-primary);
padding:10px 12px;
vertical-align:top
}

.uxdesc-table tr:last-child td,.uxdesc-table tr:last-child th {
border-bottom:none
}

.uxdesc-table th:last-child,.uxdesc-table td:last-child {
border-right:none
}

.uxdesc-cell {
min-height:1.5rem;
background:var(--bg-secondary);
color:var(--text-secondary)
}

.uxdesc-table-ctrls {
display:flex;
gap:6px;
padding:8px;
border-top:1px solid var(--border-primary);
background:var(--bg-tertiary)
}

.uxdesc-table-ctrls button {
border:1px solid var(--border-primary);
background:var(--bg-secondary);
color:var(--text-secondary);
padding:4px 10px;
border-radius:6px;
cursor:pointer;
font-size:.8rem;
transition:all var(--transition-fast)
}

.uxdesc-table-ctrls button:hover {
background:var(--bg-elevated);
color:var(--text-primary)
}

.uxdesc-editable[contenteditable="true"] {
outline:1px dashed transparent;
border-radius:4px;
transition:all var(--transition-fast)
}

.uxdesc-editable[contenteditable="true"]:focus {
outline:1px dashed var(--lb-accent-primary);
background:#4b8dff08
}

.uxdesc-editable[contenteditable="true"]:empty::before {
content:attr(data-placeholder);
color:var(--text-muted);
font-style:italic
}

.uxdesc-view .uxdesc-drag,.uxdesc-view .uxdesc-del,.uxdesc-view .uxdesc-collapse-btn,.uxdesc-view .uxdesc-move-btn,.uxdesc-view .uxdesc-toolbar,.uxdesc-view .uxdesc-add-block-row,.uxdesc-view .uxdesc-add-section-row,.uxdesc-view .uxdesc-img-controls {
display:none!important
}

.uxdesc-view .uxdesc-block {
padding-left:0;
padding-right:0;
background:transparent;
border:none
}

.uxdesc-view .uxdesc-box {
box-shadow:none
}

.uxdesc-box::after,.uxdesc-subsection::after {
content:"";
display:block;
clear:both
}

.uxdesc-modal-overlay {
position:fixed;
inset:0;
background:#000000b3;
backdrop-filter:blur(4px);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
animation:fadeIn var(--transition-fast)
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

.uxdesc-modal {
background:var(--bg-secondary);
border:1px solid var(--border-accent);
border-radius:12px;
padding:24px;
max-width:400px;
box-shadow:var(--shadow-lg);
animation:slideUp var(--transition-normal)
}

@keyframes slideUp {
from {
opacity:0;
transform:translateY(20px)
}

to {
opacity:1;
transform:translateY(0)
}
}

.uxdesc-modal h4 {
margin:0 0 12px;
font-size:1.1rem;
color:var(--text-primary)
}

.uxdesc-modal p {
margin:0 0 20px;
color:var(--text-secondary);
line-height:1.5
}

.uxdesc-modal-actions {
display:flex;
gap:8px;
justify-content:flex-end
}

.uxdesc-modal-actions button {
border:1px solid var(--border-primary);
background:var(--bg-tertiary);
color:var(--text-primary);
padding:8px 16px;
border-radius:6px;
cursor:pointer;
font-weight:500;
transition:all var(--transition-fast)
}

.uxdesc-modal-actions button:hover {
background:var(--bg-elevated)
}

.uxdesc-modal-actions button.danger {
background:var(--accent-danger);
border-color:var(--accent-danger);
color:#fff
}

.uxdesc-modal-actions button.danger:hover {
background:#c53340
}

.uxdesc-loading {
display:flex;
align-items:center;
justify-content:center;
padding:60px;
color:var(--text-muted)
}

.uxdesc-spinner {
border:3px solid var(--border-primary);
border-top-color:var(--lb-accent-primary);
border-radius:50%;
width:40px;
height:40px;
animation:spin 1s linear infinite
}

@keyframes spin {
to {
transform:rotate(360deg)
}
}

.uxdesc-empty {
text-align:center;
padding:60px 20px;
color:var(--text-muted)
}

.uxdesc-empty h4 {
margin:0 0 8px;
font-size:1.1rem;
color:var(--text-secondary)
}

.uxdesc-empty p {
margin:0;
font-size:.9rem
}

@media (max-width: 768px) {
.uxdesc-shell {
gap:12px
}

.uxdesc-box {
padding:12px
}

.uxdesc-toolbar {
flex-wrap:wrap
}

.uxdesc-add-block-row {
flex-wrap:wrap
}

figure.uxdesc-img.float.left,figure.uxdesc-img.float.right {
float:none;
max-width:100%;
margin:16px 0
}
}

@media print {
.uxdesc-toolbar,.uxdesc-toc,.uxdesc-drag,.uxdesc-del,.uxdesc-collapse-btn,.uxdesc-move-btn,.uxdesc-add-block-row,.uxdesc-add-section-row {
display:none!important
}

.uxdesc-box {
break-inside:avoid;
page-break-inside:avoid
}
}

html,body,#app,.ux-shell-root {
height:auto!important;
overflow:visible!important
}

.uxdesc-shell {
display:flex;
gap:2rem;
align-items:flex-start
}

.uxdesc-editor {
flex:1;
min-width:0
}

.uxdesc-toc {
position:sticky;
top:1rem;
width:250px;
min-width:250px;
max-width:250px;
max-height:calc(100vh - 2rem);
display:flex;
flex-direction:column;
overflow:hidden
}

.uxdesc-toc-list {
flex:1;
overflow-y:auto;
overflow-x:hidden;
scroll-behavior:smooth;
overscroll-behavior:contain
}

.uxdesc-toc::before {
content:'';
position:absolute;
top:0;
left:-1rem;
right:-1rem;
height:100%;
background:inherit;
z-index:-1;
box-shadow:0 0 20px #0000001a;
opacity:0;
transition:opacity .3s;
pointer-events:none
}

.uxdesc-toc.scrolled::before {
opacity:1
}

@media (max-width: 1024px) {
.uxdesc-toc {
display:none
}

.uxdesc-shell {
display:block
}

.uxdesc-toc-toggle {
position:fixed;
bottom:2rem;
right:2rem;
z-index:1000
}
}

.ux-card:has(.uxdesc-root),.ux-card--auto:has(.uxdesc-root) {
overflow:visible!important
}

.uxdesc-insert-btn {
display:flex;
align-items:center;
justify-content:center;
gap:.5rem;
width:100%;
padding:.75rem;
background:transparent;
border:2px dashed var(--border-color,#333);
border-radius:8px;
color:var(--text-muted,#888);
cursor:pointer;
transition:all .2s ease;
font-size:14px;
font-weight:500
}

.uxdesc-insert-btn:hover {
border-color:var(--accent-color,#d4af37);
border-style:solid;
color:var(--accent-color,#d4af37);
background:#d4af370d
}

.uxdesc-insert-btn .icon {
font-size:1.25rem;
font-weight:700
}

.uxdesc-insert-popup-overlay {
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:#0009;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
animation:fadeIn .15s ease
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

.uxdesc-insert-popup {
position:fixed;
background:var(--bg-elevated,#1a1a1a);
border:1px solid var(--border-color,#333);
border-radius:12px;
box-shadow:0 8px 32px #00000080;
min-width:320px;
max-width:90vw;
max-height:70vh;
overflow-y:auto;
animation:slideUp .2s ease
}

@keyframes slideUp {
from {
transform:translateY(20px);
opacity:0
}

to {
transform:translateY(0);
opacity:1
}
}

.uxdesc-insert-header {
display:flex;
align-items:center;
justify-content:space-between;
padding:1rem 1.25rem;
border-bottom:1px solid var(--border-color,#333)
}

.uxdesc-insert-header h4 {
margin:0;
font-size:16px;
font-weight:600;
color:var(--text-primary,#e0e0e0)
}

.uxdesc-insert-close {
background:transparent;
border:none;
color:var(--text-muted,#888);
font-size:24px;
cursor:pointer;
padding:0;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:4px;
transition:all .15s ease
}

.uxdesc-insert-close:hover {
background:var(--bg-hover,#ffffff0d);
color:var(--text-primary,#e0e0e0)
}

.uxdesc-insert-body {
padding:.5rem
}

.uxdesc-insert-category {
margin-top:.75rem
}

.uxdesc-insert-category:first-child {
margin-top:0
}

.uxdesc-insert-category .category-title {
font-size:11px;
color:var(--text-muted,#888);
text-transform:uppercase;
font-weight:600;
letter-spacing:.5px;
padding:.5rem 1rem;
margin-bottom:.25rem
}

.uxdesc-insert-category button {
display:flex;
align-items:center;
gap:.75rem;
width:100%;
padding:.625rem 1rem;
background:transparent;
border:none;
border-radius:6px;
color:var(--text-primary,#e0e0e0);
cursor:pointer;
text-align:left;
font-size:14px;
transition:all .15s ease
}

.uxdesc-insert-category button:hover {
background:var(--bg-hover,#ffffff0d);
color:var(--accent-color,#d4af37)
}

.uxdesc-insert-category button .icon {
font-size:18px;
width:24px;
text-align:center;
flex-shrink:0
}

.uxdesc-edit .uxdesc-img.float {
float:none!important;
display:block;
margin:1rem 0;
border:2px dashed var(--accent-color,#d4af37);
padding:.5rem;
border-radius:8px;
position:relative
}

.uxdesc-edit .uxdesc-img.float::before {
display:block;
font-size:11px;
color:var(--accent-color,#d4af37);
font-weight:600;
margin-bottom:.5rem;
text-transform:uppercase;
letter-spacing:.5px
}

.uxdesc-edit .uxdesc-img.float.left::before {
content:"⬅ Float Left"
}

.uxdesc-edit .uxdesc-img.float.right::before {
content:"Float Right ➡"
}

.uxdesc-view .uxdesc-img.float.left {
float:left;
margin:0 1.5rem 1rem 0;
max-width:40%
}

.uxdesc-view .uxdesc-img.float.right {
float:right;
margin:0 0 1rem 1.5rem;
max-width:40%
}

.uxdesc-view .uxdesc-img.float::before {
display:none
}

.uxdesc-img.block.center {
display:block;
margin-left:auto;
margin-right:auto;
max-width:60%
}

.uxdesc-table .uxdesc-cell {
min-height:1.5rem
}

.uxdesc-table .uxdesc-cell:empty::before {
content:attr(data-placeholder);
color:var(--text-muted,#888);
opacity:.5
}

.uxdesc-add-block-row button[data-add]:not(.uxdesc-insert-btn) {
display:none
}

@media (max-width: 768px) {
.uxdesc-insert-popup {
min-width:280px;
max-width:95vw
}

.uxdesc-edit .uxdesc-img.float,.uxdesc-view .uxdesc-img.float {
float:none!important;
max-width:100%;
margin:1rem 0
}
}

.uxdesc-insert-popup * {
transition:background .15s ease,color .15s ease,border-color .15s ease
}

/* Image URL Input */
.uxdesc-image-input-wrap {
    padding: 1rem;
    background: var(--bg-secondary, #1a1a1a);
    border: 2px dashed var(--border-default, #333);
    border-radius: 8px;
    text-align: center;
}

.uxdesc-image-input {
    width: 100%;
    max-width: 400px;
    padding: 0.75rem 1rem;
    background: var(--bg-primary, #0f0f0f);
    border: 1px solid var(--border-default, #333);
    border-radius: 6px;
    color: var(--text-primary, #e8e8e8);
    font-size: 0.9rem;
}

.uxdesc-image-input:focus {
    outline: none;
    border-color: var(--accent-primary, #d4af37);
}

.uxdesc-image-input::placeholder {
    color: var(--text-muted, #666);
}

.uxdesc-image-input-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.uxdesc-image-browse-btn {
    padding: 0.75rem 1rem;
    background: var(--accent-primary, #d4af37);
    border: none;
    border-radius: 6px;
    color: #0f0f0f;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.uxdesc-image-browse-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* YouTube Embed Responsive Styling */
.uxdesc-youtube-container {
    margin: 16px 0;
    max-width: 100%;
}

.uxdesc-youtube-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-primary, #0a0e13);
    border: 1px solid var(--border-primary, #2a2f36);
    box-shadow: var(--shadow-md);
}

.uxdesc-youtube-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.uxdesc-youtube-input {
    width: 100%;
    max-width: 500px;
    padding: 0.75rem 1rem;
    background: var(--bg-primary, #0f0f0f);
    border: 1px solid var(--border-primary, #333);
    border-radius: 6px;
    color: var(--text-primary, #e8e8e8);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.uxdesc-youtube-input:focus {
    outline: none;
    border-color: var(--lb-accent-primary, #d4af37);
}

.uxdesc-youtube-input::placeholder {
    color: var(--text-muted, #666);
}

.uxdesc-youtube-caption {
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

.uxdesc-youtube-placeholder {
    padding: 2rem;
    text-align: center;
    color: var(--text-muted, #888);
    background: var(--bg-tertiary, #141a20);
    border: 1px dashed var(--border-primary, #333);
    border-radius: 8px;
}

/* ToC Toggle Button */
.uxdesc-toc-toggle {
    background: transparent;
    border: 1px solid var(--border-primary, #333);
    color: var(--text-muted, #888);
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}

.uxdesc-toc-toggle:hover {
    background: var(--bg-tertiary, #141a20);
    color: var(--text-primary, #e8e8e8);
    border-color: var(--lb-accent-primary, #d4af37);
}

/* Hidden ToC state */
.uxdesc-toc.collapsed {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0;
}

.uxdesc-toc.collapsed .uxdesc-toc-header h6,
.uxdesc-toc.collapsed .uxdesc-toc-search,
.uxdesc-toc.collapsed .uxdesc-toc-list {
    display: none;
}

.uxdesc-toc.collapsed .uxdesc-toc-header {
    padding: 8px;
    justify-content: center;
    border-bottom: none;
}

.uxdesc-toc.collapsed .uxdesc-toc-toggle {
    margin-left: 0;
}