/* Panel administracyjny */
.panel-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; max-width: var(--s-wrap); margin: 0 auto; padding: 0 1.5rem; align-items: start; }
.panel-side { position: sticky; top: 6rem; display: grid; gap: 1.25rem; }
.panel-user { padding: .9rem 1rem; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-bg-2); display: grid; }
.panel-user small { color: var(--s-dim); }
.panel-side nav { display: grid; gap: .25rem; }
.panel-side nav a { display: flex; align-items: center; gap: .65rem; padding: .6rem .85rem; border-radius: 10px; color: var(--s-dim); text-decoration: none; font-size: .95rem; }
.panel-side nav a:hover { color: var(--s-ink); background: rgba(168, 85, 247, .08); }
.panel-side nav a.is-active { color: #fff; background: rgba(168, 85, 247, .18); font-weight: 600; }
.panel-side nav i { width: 1.1rem; text-align: center; }
.panel-main { min-width: 0; }
.panel-login { max-width: 26rem; margin: 3rem auto 0; padding: 0 1.5rem; }

.panel-h1 { font: 700 clamp(1.7rem, 3vw, 2.2rem)/1.2 var(--s-head); color: #fff; margin: 0 0 1.5rem; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.panel-head .panel-h1 { margin: 0; }
.panel-card { background: var(--s-bg-2); border: 1px solid var(--s-line); border-radius: 14px; padding: 1.4rem; margin-bottom: 1.5rem; }
.panel-card h1, .panel-card h2 { font-family: var(--s-head); color: #fff; margin: 0 0 1rem; }
.panel-muted { color: var(--s-dim); font-size: .9rem; }
.panel-tag { display: inline-block; margin-left: .4rem; padding: .1rem .5rem; border-radius: 99px; background: rgba(168, 85, 247, .18); color: #d4b8ff; font-size: .72rem; font-weight: 600; vertical-align: middle; }

.panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.panel-tile { display: grid; gap: .4rem; text-decoration: none; color: var(--s-ink); transition: border-color .15s, transform .15s; margin: 0; }
.panel-tile:hover { border-color: var(--s-purple); transform: translateY(-2px); }
.panel-tile i { font-size: 1.4rem; color: var(--s-purple); }
.panel-tile span { color: var(--s-dim); font-size: .92rem; }

.panel-form { display: grid; gap: 1rem; }
.panel-form label, .panel-form .panel-checks label { display: grid; gap: .35rem; font-size: .9rem; color: var(--s-dim); }
.panel-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.panel-checks { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.panel-checks label { display: flex !important; align-items: center; gap: .5rem; }
.panel-form input[type=text], .panel-form input[type=password], .panel-form select, .panel-table input[type=password], .panel-table select {
    width: 100%; padding: .65rem .85rem; border-radius: 10px; background: var(--s-bg); border: 1px solid var(--s-line); color: var(--s-ink); font: inherit;
}
.panel-form input:focus, .panel-form select:focus, .panel-form textarea:focus, .panel-table input:focus, .panel-table select:focus { outline: none; border-color: var(--s-purple); }
.panel-actions-bar { display: flex; gap: .75rem; flex-wrap: wrap; }

.panel-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .65rem 1.2rem; border-radius: 10px; border: 1px solid transparent;
    background: var(--s-purple); color: #fff; font: 600 .92rem var(--s-font); text-decoration: none; cursor: pointer; transition: filter .15s;
}
.panel-btn:hover { filter: brightness(1.15); }
.panel-btn--ghost { background: transparent; border-color: var(--s-line); color: var(--s-ink); }
.panel-btn--danger { background: #b91c1c; }
.panel-btn--small { padding: .35rem .75rem; font-size: .82rem; }
.panel-btn--block { width: 100%; }
.panel-icon { width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--s-line); background: transparent; color: var(--s-ink); cursor: pointer; }
.panel-icon:disabled { opacity: .3; cursor: default; }
.panel-danger { margin-top: -.5rem; }

.panel-flash { padding: .85rem 1.1rem; border-radius: 10px; margin-bottom: 1.25rem; border: 1px solid; }
.panel-flash--ok { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .5); }
.panel-flash--error { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .5); }

.panel-table-wrap { padding: 0; overflow-x: auto; }
.panel-table { width: 100%; border-collapse: collapse; }
.panel-table th, .panel-table td { padding: .75rem .9rem; border-bottom: 1px solid var(--s-line); text-align: left; vertical-align: middle; }
.panel-table tr:last-child td { border-bottom: 0; }
.panel-table th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--s-dim); }
.panel-table a { color: #d4b8ff; text-decoration: none; }
.panel-table a.panel-btn { color: #fff; }
.panel-table a.panel-btn--ghost { color: var(--s-ink); }
.panel-actions { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.panel-actions form { display: inline-flex; gap: .3rem; }
.panel-table--users input[type=password] { min-width: 9rem; }

.editor { display: grid; gap: .6rem; }
.editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .4rem; border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-bg); }
.editor-toolbar button { min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; border: 0; border-radius: 8px; background: transparent; color: var(--s-ink); font: 700 .85rem var(--s-font); cursor: pointer; }
.editor-toolbar button:hover { background: rgba(168, 85, 247, .18); }
.editor-toolbar .sep { width: 1px; height: 1.3rem; background: var(--s-line); margin: 0 .25rem; }
.editor-status { margin-left: auto; font-size: .82rem; color: var(--s-dim); padding-right: .5rem; }
.editor-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor-panes textarea {
    width: 100%; min-height: 32rem; resize: vertical; padding: .9rem 1rem; border-radius: 10px; background: var(--s-bg); border: 1px solid var(--s-line);
    color: var(--s-ink); font: .88rem/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace; tab-size: 4;
}
.editor-preview { min-height: 32rem; max-height: 60rem; overflow: auto; padding: .9rem 1.2rem; border-radius: 10px; border: 1px solid var(--s-line); background: rgba(255, 255, 255, .02); }
.editor-help { font-size: .84rem; color: var(--s-dim); margin: 0; }
.editor-help code { padding: .1em .35em; border-radius: 5px; background: rgba(168, 85, 247, .14); }

@media (max-width: 1100px) { .editor-panes { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
    .panel-shell { grid-template-columns: minmax(0, 1fr); }
    .panel-side { position: static; }
    .panel-side nav { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}

/* Edytor wizualny, zakładki, ściągawka */
.editor-tabs { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.editor-tabs button { padding: .55rem 1rem; border-radius: 10px 10px 0 0; border: 1px solid var(--s-line); border-bottom: 0; background: transparent; color: var(--s-dim); font: 600 .9rem var(--s-font); cursor: pointer; }
.editor-tabs button[aria-selected="true"] { background: var(--s-bg); color: #fff; border-color: var(--s-purple); }
.editor-tabs .editor-status { margin-left: auto; }
.editor-view { display: grid; gap: .6rem; }
.editor-view[hidden] { display: none; }
.editor-visual { min-height: 32rem; max-height: 70vh; overflow: auto; padding: 1.1rem 1.4rem; border-radius: 10px; border: 1px solid var(--s-line); background: rgba(10, 6, 18, .93); outline: none; }
.editor-visual:focus { border-color: var(--s-purple); }
.editor-visual details > summary { cursor: text; }
.editor-guide { margin-top: .4rem; border: 1px solid var(--s-line); border-radius: 12px; background: rgba(168, 85, 247, .06); }
.editor-guide > summary { cursor: pointer; padding: .8rem 1.1rem; font-weight: 600; color: #fff; }
.editor-guide > summary i { color: var(--s-purple); margin-right: .4rem; }
.editor-guide-body { padding: 0 1.2rem 1.1rem; font-size: .92rem; line-height: 1.65; color: var(--s-ink); }
.editor-guide-body h4 { margin: 1.3rem 0 .4rem; color: #fff; font-size: 1rem; }
.editor-guide-body p, .editor-guide-body ul { margin: 0 0 .6rem; }
.editor-guide-body ul { padding-left: 1.3rem; }
.editor-guide-body a { color: #d4b8ff; }
.editor-guide-body code { padding: .1em .4em; border-radius: 5px; background: rgba(168, 85, 247, .16); font-size: .88em; }
.editor-guide-body pre { margin: .4rem 0 .6rem; padding: .8rem 1rem; border-radius: 10px; background: var(--s-bg); border: 1px solid var(--s-line); overflow-x: auto; font-size: .84rem; line-height: 1.5; }
.editor-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .5rem .9rem; margin: .8rem 0; }
.editor-guide-grid > div { display: grid; gap: .15rem; padding: .55rem .8rem; border: 1px solid var(--s-line); border-radius: 10px; background: var(--s-bg); }
.editor-guide-grid span { color: var(--s-dim); }

/* Zmiana rozmiaru obrazów w edytorze wizualnym */
.editor-view[data-view="visual"] { position: relative; }
.editor-visual img { cursor: pointer; }
.editor-visual img.is-selected { outline: 2px solid var(--s-purple); outline-offset: 2px; }
.img-bar { position: absolute; z-index: 5; display: flex; gap: .2rem; padding: .25rem; border-radius: 10px; background: var(--s-bg-2); border: 1px solid var(--s-purple); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.img-bar button { padding: .25rem .6rem; border: 0; border-radius: 7px; background: transparent; color: var(--s-ink); font: 600 .8rem var(--s-font); cursor: pointer; }
.img-bar button:hover { background: rgba(168, 85, 247, .25); }
.img-bar[hidden], .img-handle[hidden] { display: none; }
.img-handle { position: absolute; z-index: 5; width: 16px; height: 16px; border-radius: 4px; background: var(--s-purple); border: 2px solid #fff; cursor: nwse-resize; touch-action: none; }

.img-bar .sep { width: 1px; background: var(--s-line); margin: 0 .2rem; }
.editor-toolbar .hint-btn--info i { color: #60a5fa; }
.editor-toolbar .hint-btn--success i { color: #4ade80; }
.editor-toolbar .hint-btn--warning i { color: #fbbf24; }
.editor-toolbar .hint-btn--danger i { color: #f87171; }
.editor-visual .wk-clear { height: 0; margin: 1.1rem 0; border-top: 1px dashed var(--s-dim); position: relative; }
.editor-visual .wk-clear::after { content: "koniec opływania"; position: absolute; right: 0; top: -.65rem; padding: 0 .4rem; font-size: .7rem; color: var(--s-dim); background: rgba(10, 6, 18, .93); }

/* Menu rozwijane w pasku narzędzi */
.editor-toolbar { position: relative; }
.tb-drop { position: relative; display: inline-flex; }
.editor-toolbar .tb-drop-btn { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .82rem; }
.editor-toolbar .tb-drop-btn .fa-caret-down { font-size: .75rem; opacity: .6; }
.tb-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 14rem; display: grid; gap: .1rem; padding: .35rem; border-radius: 12px; background: var(--s-bg-2); border: 1px solid var(--s-purple); box-shadow: 0 12px 32px rgba(0, 0, 0, .55); }
.tb-menu[hidden] { display: none; }
.tb-menu button { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; width: 100%; height: auto; padding: .5rem .7rem; text-align: left; font-weight: 500; font-size: .88rem; }
.tb-menu button i { width: 1.1rem; text-align: center; color: var(--s-purple); }
.tb-menu small { padding: .3rem .7rem .15rem; color: var(--s-dim); font-size: .74rem; }
.tb-menu--grid { grid-template-columns: repeat(8, 2.2rem); min-width: 0; }
.tb-menu--grid button { justify-content: center; padding: .45rem 0; }
.hint-ico--info { color: #60a5fa !important; }
.hint-ico--success { color: #4ade80 !important; }
.hint-ico--warning { color: #fbbf24 !important; }
.hint-ico--danger { color: #f87171 !important; }
.swatch { display: block; width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.tb-text { font-weight: 700; }
.tb-text small { font-size: .7rem; vertical-align: baseline; margin-left: .05rem; }
.size-sample--0 { font-size: .8rem; }
.size-sample--1 { font-size: .95rem; }
.size-sample--2 { font-size: 1.15rem; }
.size-sample--3 { font-size: 1.4rem; }
.size-sample--4 { font-size: 1.8rem; line-height: 1.1; }
@media (max-width: 640px) { .tb-menu--grid { grid-template-columns: repeat(6, 2.2rem); } }
.tb-menu--right { left: auto; right: 0; }