#kaMandalaDesigner{
    --md-blue:#2e3f91;
    --md-pink:#f2308d;
    --md-text:#2f3150;
    --md-soft:#f6f7fb;
    --md-line:#d9deee;
    --md-white:#fff;
    --md-green:#19a99e;
    max-width:960px;
    margin:0 auto;
    color:var(--md-text);
    min-width:0;
}
#kaMandalaDesigner *{box-sizing:border-box}
#kaMandalaDesigner .md-card{
    background:#fff;
    border:1px solid var(--md-line);
    border-radius:22px;
    padding:18px;
    margin:0 0 18px;
    box-shadow:0 8px 24px rgba(35,48,105,.07);
    min-width:0;
}
#kaMandalaDesigner h2,#kaMandalaDesigner h3{
    margin:0 0 10px;
    color:var(--md-blue);
    line-height:1.2;
}
#kaMandalaDesigner p{margin:0 0 12px;line-height:1.6}
#kaMandalaDesigner button{font:inherit}
#kaMandalaDesigner .md-tools{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
    margin:0;
}
#kaMandalaDesigner .md-tool,
#kaMandalaDesigner .md-btn,
#kaMandalaDesigner .md-btn-secondary,
#kaMandalaDesigner .md-btn-danger{
    appearance:none;
    border-radius:999px;
    padding:11px 13px;
    font-weight:700;
    cursor:pointer;
    text-align:center;
}
#kaMandalaDesigner .md-tool,
#kaMandalaDesigner .md-btn-secondary{
    background:#eef1fa;
    color:var(--md-blue);
    border:1px solid var(--md-line);
}
#kaMandalaDesigner .md-tool.is-active{
    background:var(--md-blue);
    color:#fff;
    border-color:var(--md-blue);
}
#kaMandalaDesigner .md-btn{
    background:var(--md-pink);
    color:#fff;
    border:1px solid var(--md-pink);
}
#kaMandalaDesigner .md-btn-danger{
    background:#fff1f1;
    color:#9f3333;
    border:1px solid #f0caca;
}

#kaMandalaDesigner .md-btn-gallery{
    appearance:none;
    border-radius:999px;
    padding:11px 13px;
    font-weight:700;
    cursor:pointer;
    text-align:center;
    background:#eef9f7;
    color:#147c73;
    border:1px solid #bde6df;
    flex:1 1 210px;
}
#kaMandalaDesigner .md-btn-gallery:hover,
#kaMandalaDesigner .md-btn-gallery:focus-visible{
    background:#e2f5f1;
}
#kaMandalaDesigner .md-gallery-note{
    margin:10px 0 0;
    font-size:.88rem;
    color:#69718c;
}
#kaMandalaDesigner .md-submit-status{
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    background:#eef9f7;
    color:#176f68;
    font-size:.92rem;
    font-weight:700;
}
#kaMandalaDesigner .md-submit-status.is-error{
    background:#fff1f1;
    color:#9f3333;
}
#kaMandalaDesigner .md-tool-area{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);
    gap:16px;
    align-items:start;
}
#kaMandalaDesigner .md-tool-settings{
    border:1px solid var(--md-line);
    border-radius:18px;
    background:var(--md-soft);
    padding:14px;
}
#kaMandalaDesigner .md-block-gap{
    margin:14px 0;
}
#kaMandalaDesigner .md-colorbox,
#kaMandalaDesigner .md-motif-panel,
#kaMandalaDesigner .md-selection{
    border:1px solid var(--md-line);
    border-radius:18px;
    background:var(--md-soft);
    padding:14px;
}
#kaMandalaDesigner .md-color-head,
#kaMandalaDesigner .md-motif-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:10px;
}
#kaMandalaDesigner .md-color-preview{
    width:28px;
    height:28px;
    border-radius:50%;
    border:3px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.12);
    background:#2e3f91;
    flex:none;
}
#kaMandalaDesigner .md-palette{
    display:grid;
    grid-template-columns:repeat(10,34px);
    gap:8px;
    justify-content:start;
}
#kaMandalaDesigner .md-swatch{
    appearance:none;
    width:34px;
    height:34px;
    min-height:0;
    aspect-ratio:auto;
    border-radius:50%;
    border:2px solid #fff;
    box-shadow:0 0 0 1px rgba(0,0,0,.12);
    cursor:pointer;
    padding:0;
}
#kaMandalaDesigner .md-swatch.is-active{
    box-shadow:0 0 0 3px var(--md-blue);
}
#kaMandalaDesigner .md-color-more{
    margin-top:12px;
    border-top:1px solid var(--md-line);
    padding-top:10px;
}
#kaMandalaDesigner .md-color-more summary{
    cursor:pointer;
    color:var(--md-blue);
    font-weight:700;
}
#kaMandalaDesigner .md-field{min-width:0}
#kaMandalaDesigner .md-field label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
    color:var(--md-blue);
}
#kaMandalaDesigner .md-label-top{margin-top:16px}
#kaMandalaDesigner .md-field-top{margin-top:14px}
#kaMandalaDesigner .md-range{
    display:flex;
    align-items:center;
    gap:8px;
}
#kaMandalaDesigner .md-range input[type=range]{
    width:100%;
    min-width:0;
}
#kaMandalaDesigner .md-hue{
    accent-color:#7a3cff;
}
#kaMandalaDesigner output{
    min-width:44px;
    text-align:right;
    color:#6c7391;
    font-size:.9rem;
}
#kaMandalaDesigner .md-checks{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    font-size:.95rem;
    margin-top:12px;
}
#kaMandalaDesigner .md-checks-tight{margin-top:10px}
#kaMandalaDesigner .md-motif-panel{margin:14px 0}
#kaMandalaDesigner .md-small{
    color:#6b7390;
    font-size:.88rem;
    line-height:1.35;
}
#kaMandalaDesigner .md-stamps{
    display:grid;
    grid-template-columns:repeat(10,minmax(0,1fr));
    gap:7px;
}
#kaMandalaDesigner .md-stamp{
    appearance:none;
    background:#fff;
    border:1px solid var(--md-line);
    border-radius:12px;
    padding:7px;
    cursor:pointer;
    min-width:0;
}
#kaMandalaDesigner .md-stamp.is-active{
    border-color:var(--md-pink);
    box-shadow:0 0 0 3px rgba(242,48,141,.12);
}
#kaMandalaDesigner .md-stamp svg{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    fill:none;
    stroke:#111;
    stroke-width:2.4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
#kaMandalaDesigner .md-motif-settings,
#kaMandalaDesigner .md-edit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:14px;
}
#kaMandalaDesigner .md-stage{
    border:1px solid var(--md-line);
    border-radius:20px;
    padding:10px;
    background:#fff;
    overflow:hidden;
    margin-top:14px;
}
#kaMandalaDesigner .md-canvas-shell{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:#fff;
    border-radius:14px;
    overflow:hidden;
    touch-action:none;
}
#kaMandalaDesigner .md-canvas-shell canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    touch-action:none;
}
#mdFills{z-index:1}
#mdPaint{z-index:2}
#mdStamps{z-index:3;pointer-events:none}
#mdGuides{z-index:4;pointer-events:none}
#mdInteraction{z-index:5;background:transparent}
#kaMandalaDesigner .md-selection{
    margin-top:12px;
    background:#eef9f7;
    border-color:#bee5df;
}
#kaMandalaDesigner .md-selection p{
    margin:4px 0 0;
    font-size:.9rem;
    color:#58627f;
}
#kaMandalaDesigner .md-help{
    margin:10px 0 0;
    color:#69718c;
    font-size:.92rem;
}
#kaMandalaDesigner .md-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:14px;
}
#kaMandalaDesigner .md-actions .md-btn,
#kaMandalaDesigner .md-actions .md-btn-secondary{
    flex:1 1 145px;
}
#kaMandalaDesigner .md-calendar-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:12px 0;
}
#kaMandalaDesigner select{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--md-line);
    border-radius:12px;
    background:#fff;
    color:var(--md-text);
    font:inherit;
}
#kaMandalaDesigner .md-calendar-wrap{
    margin-top:14px;
    border:1px solid var(--md-line);
    border-radius:20px;
    padding:10px;
    background:#fff;
}
#kaMandalaDesigner .md-calendar-wrap canvas{
    display:block;
    width:100%;
    height:auto;
    background:#fff;
    border-radius:14px;
}
#kaMandalaDesigner .md-hidden{display:none!important}
@media(max-width:700px){
    #kaMandalaDesigner .md-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
    #kaMandalaDesigner .md-stamps{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:860px){
    #kaMandalaDesigner .md-tool-area{grid-template-columns:1fr}
}
@media(max-width:560px){
    #kaMandalaDesigner .md-card{padding:15px;border-radius:18px}
    #kaMandalaDesigner .md-motif-settings,
    #kaMandalaDesigner .md-edit-grid,
    #kaMandalaDesigner .md-calendar-form{grid-template-columns:1fr}
    #kaMandalaDesigner .md-palette{grid-template-columns:repeat(8,30px)}
    #kaMandalaDesigner .md-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}

#kaMandalaDesigner + .md-visitor-gallery,
.md-visitor-gallery{
    max-width:960px;
    margin:22px auto;
}
.md-visitor-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.md-visitor-grid img{
    display:block;
    width:100%;
    height:auto;
    border:1px solid #d9deee;
    border-radius:16px;
    background:#fff;
}
@media(max-width:700px){
    .md-visitor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}