body {
    background: #f5f7fb;
}

/* Overall layout */
.nct-layout {

    display: flex;

    gap: 20px;

    padding: 20px;

    background: #f5f7fb;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
}

/* Sidebar */
.nct-sidebar {

    width: 33%;

    background: #e9edf3;

    padding: 20px;

    border-radius: 12px;
}

/* Main area */
.nct-main {

    width: 67%;

    background: #fff;

    padding: 20px;

    border-radius: 12px;

    min-height: 650px;
}

/* Titles */
.nct-title {

    font-size: 22px;

    margin-bottom: 20px;
}

.nct-chart-title {

    text-align: center;

    margin-bottom: 20px;
}

/* Form */
.nct-item {

    margin-bottom: 18px;
}

.nct-item label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;
}

/* Inputs */
.nct-input {

    width: 100%;

    padding: 10px;

    border: 1px solid #d1d5db;

    border-radius: 8px;

    background: #fff;

    font-size: 14px;

    box-sizing: border-box;
}

textarea.nct-input {

    height: 120px;

    resize: vertical;
}

/* Chart */
.nct-chart-wrap {

    position: relative;

    height: 550px;
}

.nct-chart {

    width: 100%;

    height: 100%;
}

/* Buttons */
.nct-buttons {

    display: flex;

    gap: 12px;

    margin-top: 20px;
}

.nct-generate,
.nct-download,
.nct-share {

    flex: 1;

    padding: 12px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    color: #fff;

    font-size: 14px;

    transition: .2s;
}

.nct-generate {

    background: #2563eb;
}

.nct-download {

    background: #16a34a;
}

.nct-share {

    background: #7c3aed;
}

.nct-generate:hover,
.nct-download:hover,
.nct-share:hover {

    opacity: .9;
}