:root {
    --white: #ffffff;
    --black: #000000;
    --ink: #2a5a80;
    --glass: rgba(255, 255, 255, 0.68);
}

* {
    box-sizing: border-box;
}


body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background:
        /*linear-gradient(180deg, #f9feff 0%, #d7f8ff 59%, #e2ffc9 100%);*/
        linear-gradient(180deg, #f9feff 0%, #ffd7f3 59%, #dcc9ff 100%);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    overflow-x: hidden;
}

.main-frame {
    /*width: min(92vw, 1248px);*/
    width: 98%;
    height: 96%;
    /*height: 992px;*/
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 28px 32px;

    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 20px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(254, 228, 255, 0.58) 8%, rgba(255, 255, 255, 0.74));

    box-shadow:
        0 28px 80px rgba(118, 0, 106, 0.32),
        inset 0 0 0 1px rgba(230, 230, 230, 0.45),
        inset 0 1px 20px rgba(255, 255, 255, 0.95);
}

.left-panel {
    height: 100%;
    border: 1px solid #fff;
    border-radius: 12px;
    padding: 16px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(242, 242, 242, 0.62) 45%, rgba(243, 243, 243, 0.56)),
        linear-gradient(135deg, rgba(246, 246, 246, 0.34), rgba(255, 140, 198, 0.16));
    box-shadow:
        0 15px 28px rgba(60, 60, 60, 0.18),
        inset 0 0 0 1px rgba(230, 230, 230, 0.45),
        inset 0 16px 20px rgba(255, 255, 255, 0.72);
}

.panel-frame {
    height: 100%;

    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.panel-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 0 0 auto;
}

.column-width-sm {
    width: 237px;
}

.column-width-md {
    width: 340px;
}

.panel {
    width: 100%;
    min-height: 86px;
    border: 1px solid #ffffff;
    border-radius: 12px;
    padding: 16px;

    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(242, 242, 242, 0.62) 45%, rgba(243, 243, 243, 0.56)),
        linear-gradient(135deg, rgba(246, 246, 246, 0.34), rgba(255, 140, 198, 0.16));
    box-shadow:
        0 15px 28px rgba(60, 60, 60, 0.18),
        inset 0 0 0 1px rgba(230, 230, 230, 0.45),
        inset 0 16px 20px rgba(255, 255, 255, 0.72);
}

.panel h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.panel p {
    margin: 0;
    line-height: 1.4;
}