/* Andis Schilderbude */
:root {
    --as-bg: #ffffff;
    --as-surface: #f6f5f2;
    --as-surface-2: #ededea;
    --as-text: #1a1a1a;
    --as-text-muted: #6b6b6b;
    --as-border: #d8d6d1;
    --as-accent: #c1272d;
    --as-accent-dark: #98171c;
    --as-accent-soft: #fce8e9;
    --as-success: #2e7d32;
    --as-warning: #ef6c00;
    --as-danger: #c62828;
    --as-shadow: 0 2px 14px rgba(0,0,0,0.08);
    --as-radius: 6px;
}

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: var(--as-bg);
    color: var(--as-text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--as-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.as-header {
    background: #111;
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 4px solid var(--as-accent);
}
.as-brand { display: flex; align-items: center; gap: 12px; }
.as-brand-mark {
    width: 38px; height: 38px;
    background: var(--as-accent);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 22px;
    box-shadow: 0 0 0 3px #fff inset;
}
.as-brand-name { font-size: 19px; font-weight: 700; letter-spacing: 0.5px; }
.as-brand-name small { display: block; font-size: 11px; font-weight: 400; opacity: 0.7; letter-spacing: 1px; text-transform: uppercase; }
.as-header-meta { font-size: 12px; opacity: 0.7; }

.as-layout {
    display: grid;
    grid-template-columns: 320px 1fr 320px;
    min-height: calc(100vh - 64px);
    gap: 0;
}
.as-sidebar { background: var(--as-surface); border-right: 1px solid var(--as-border); padding: 18px; overflow-y: auto; }
.as-sidebar.right { border-right: none; border-left: 1px solid var(--as-border); }
.as-stage-wrap { display: flex; flex-direction: column; align-items: center; padding: 24px; background: #f0eee9; }

@media (max-width: 1100px) {
    .as-layout { grid-template-columns: 1fr; }
    .as-sidebar, .as-sidebar.right { border: none; border-bottom: 1px solid var(--as-border); }
}

.as-h1 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--as-text-muted); margin: 0 0 10px; }
.as-section { background: #fff; border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 14px; margin-bottom: 14px; }
.as-section h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: #444; }
.as-help { font-size: 12px; color: var(--as-text-muted); margin: 4px 0 8px; }

label { display: block; font-size: 12px; color: #444; margin-bottom: 4px; font-weight: 600; }
input[type="text"], input[type="email"], input[type="number"], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--as-border);
    border-radius: 4px;
    background: #fff;
    color: var(--as-text);
    font-size: 14px;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--as-accent);
    box-shadow: 0 0 0 3px rgba(193,39,45,0.12);
}
textarea { resize: vertical; min-height: 70px; }

.as-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.as-pillgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.as-pill {
    display: inline-block;
    padding: 6px 11px;
    border: 1px solid var(--as-border);
    border-radius: 18px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: all 0.12s ease;
}
.as-pill:hover { border-color: var(--as-accent); }
.as-pill.active { background: var(--as-accent); color: #fff; border-color: var(--as-accent); }

.as-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.as-card {
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius);
    padding: 10px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: all 0.12s ease;
}
.as-card:hover { border-color: var(--as-accent); transform: translateY(-1px); }
.as-card.active { border-color: var(--as-accent); box-shadow: 0 0 0 3px var(--as-accent-soft); }
.as-card-thumb { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; background: var(--as-surface-2); border-radius: 3px; margin-bottom: 6px; overflow: hidden; }
.as-card-thumb svg { max-width: 90%; max-height: 90%; }
.as-card-name { font-size: 12px; font-weight: 600; }
.as-card-meta { font-size: 11px; color: var(--as-text-muted); }

.as-btn {
    display: inline-block;
    padding: 9px 16px;
    background: var(--as-accent);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.12s;
    font-family: inherit;
}
.as-btn:hover { background: var(--as-accent-dark); }
.as-btn:disabled { background: #aaa; cursor: not-allowed; }
.as-btn.ghost { background: #fff; color: var(--as-text); border: 1px solid var(--as-border); }
.as-btn.ghost:hover { background: var(--as-surface-2); border-color: var(--as-accent); }
.as-btn-block { display: block; width: 100%; }

.as-stage-frame {
    background: #fff;
    border: 1px solid var(--as-border);
    box-shadow: var(--as-shadow);
    border-radius: var(--as-radius);
    padding: 18px;
    display: flex; flex-direction: column; align-items: center;
}
.as-stage-frame .as-stage-title { font-size: 12px; color: var(--as-text-muted); margin-bottom: 6px; }
#stage { background: #fff; }

.as-toolbar {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px; justify-content: center;
}
.as-tool {
    background: #fff; border: 1px solid var(--as-border); border-radius: 4px;
    padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.as-tool:hover { border-color: var(--as-accent); }
.as-tool.danger { color: var(--as-danger); }

.as-stage-info { margin-top: 8px; font-size: 12px; color: var(--as-text-muted); text-align: center; }

.as-price-box {
    background: #111; color: #fff;
    border-radius: var(--as-radius);
    padding: 14px;
    text-align: center;
    margin-bottom: 14px;
}
.as-price-label { font-size: 12px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1.4px; }
.as-price-value { font-size: 26px; font-weight: 800; margin-top: 4px; }
.as-price-meta { font-size: 11px; opacity: 0.7; margin-top: 4px; }

.as-format-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.as-format-list label {
    border: 1px solid var(--as-border);
    border-radius: var(--as-radius);
    padding: 8px; cursor: pointer;
    background: #fff;
    text-align: center;
    font-size: 12px;
    transition: all 0.12s;
}
.as-format-list label:hover { border-color: var(--as-accent); }
.as-format-list input { display: none; }
.as-format-list input:checked + span { color: var(--as-accent); font-weight: 700; }
.as-format-list label:has(input:checked) { border-color: var(--as-accent); background: var(--as-accent-soft); }

.as-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.as-modal[hidden] { display: none; }
.as-modal-box {
    background: #fff; border-radius: 8px; padding: 24px;
    max-width: 460px; width: calc(100% - 32px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}
.as-modal h2 { margin: 0 0 8px; font-size: 18px; }
.as-modal p { color: var(--as-text-muted); margin: 6px 0 16px; font-size: 14px; }
.as-modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.as-toast {
    position: fixed; right: 18px; bottom: 18px;
    background: #111; color: #fff; padding: 12px 18px;
    border-radius: 4px; font-size: 13px;
    box-shadow: var(--as-shadow);
    z-index: 1100;
    transition: opacity 0.2s;
}
.as-toast.success { background: var(--as-success); }
.as-toast.error   { background: var(--as-danger); }

.as-footer {
    background: #111; color: #aaa;
    padding: 16px 24px; font-size: 12px;
    text-align: center;
}
.as-footer a { color: #fff; text-decoration: underline; }

.as-spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: inline-block;
    animation: as-spin 0.6s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes as-spin { to { transform: rotate(360deg); } }