* {
    box-sizing: border-box;
}

:root {
    --bg: #09090d;
    --sidebar: #0d0d12;
    --surface: #111118;
    --surface-2: #15151d;
    --surface-3: #1a1a24;
    --border: #252531;
    --border-soft: #1d1d27;

    --text: #f6f6fb;
    --muted: #8f8f9e;
    --muted-2: #646472;

    --accent: #765dff;
    --accent-light: #9a89ff;
    --accent-dark: #5c42ee;

    --blue: #4b8cff;
    --cyan: #43d5e8;
    --green: #43d88b;
    --orange: #f7a84b;

    --sidebar-width: 245px;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    overflow: hidden;
}

button,
textarea,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

button,
input,
textarea,
select {
    outline: none;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}


/* SIDEBAR */

.sidebar {
    height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;

    padding: 17px 13px 13px;

    border-right: 1px solid var(--border-soft);
    background:
        radial-gradient(
            circle at 0 0,
            rgba(117, 91, 255, .08),
            transparent 30%
        ),
        var(--sidebar);
}

.logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 4px 5px 19px;
}

.logo-mark {
    width: 38px;
    height: 38px;

    border-radius: 11px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            145deg,
            #8d78ff,
            #5e47ea
        );

    box-shadow:
        0 8px 28px rgba(112, 89, 255, .25);

    font-size: 18px;
}

.logo-text strong {
    display: block;
    font-size: 14px;
    letter-spacing: .4px;
}

.logo-text small {
    display: block;
    margin-top: 2px;

    color: var(--muted-2);
    font-size: 10px;
}

.new-project-btn {
    min-height: 42px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 0 10px;

    border: 1px solid #302b4c;
    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(113, 89, 255, .13),
            rgba(113, 89, 255, .07)
        );

    color: #ebe7ff;

    font-size: 12px;
    font-weight: 600;
}

.new-project-btn:hover {
    background: rgba(113, 89, 255, .16);
    border-color: #473d70;
}

.new-project-btn .plus {
    font-size: 17px;
}

.new-project-btn kbd {
    margin-left: auto;

    padding: 2px 5px;

    border: 1px solid #35303e;
    border-radius: 5px;

    background: #111118;

    color: #706d7d;
    font-size: 8px;
}

.nav-label {
    padding: 21px 8px 8px;

    color: #555564;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.15px;
}

.nav-label.second {
    padding-top: 19px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.nav-item {
    width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 10px;

    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #8d8d9a;

    text-align: left;
    font-size: 12px;
    font-weight: 500;

    transition: .16s ease;
}

.nav-item:hover {
    background: #15151c;
    color: #d9d9e0;
}

.nav-item.active {
    background:
        linear-gradient(
            90deg,
            rgba(119, 94, 255, .15),
            rgba(119, 94, 255, .07)
        );

    color: #f3f0ff;
}

.nav-item.active .nav-icon {
    color: #9c89ff;
}

.nav-icon {
    width: 17px;

    display: inline-flex;
    justify-content: center;

    color: #71717f;
    font-size: 15px;
}

.nav-count {
    margin-left: auto;

    min-width: 19px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 20px;

    background: #1d1d27;
    color: #767685;

    font-size: 9px;
}

.sidebar-spacer {
    flex: 1;
}

.plan-card {
    padding: 11px;

    border: 1px solid #252532;
    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #14141c,
            #101016
        );
}

.plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-top span {
    color: #7b7b8a;
    font-size: 9px;
    font-weight: 700;
}

.plan-top strong {
    color: #a18eff;
    font-size: 9px;
}

.plan-progress {
    width: 100%;
    height: 4px;

    margin: 9px 0;

    overflow: hidden;

    border-radius: 20px;

    background: #22222c;
}

.plan-progress span {
    width: 17%;
    height: 100%;

    display: block;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #6b51f6,
            #927cff
        );
}

.plan-card p {
    margin: 0;

    color: #686877;

    font-size: 9px;
    line-height: 1.45;
}

.profile-mini {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-top: 11px;
    padding: 10px 5px 3px;

    border-top: 1px solid #1b1b23;
}

.avatar {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            145deg,
            #2a2541,
            #171521
        );

    color: #aa9cff;
    font-size: 11px;
    font-weight: 800;
}

.profile-info {
    min-width: 0;
    flex: 1;
}

.profile-info strong,
.profile-info small {
    display: block;
}

.profile-info strong {
    font-size: 10px;
}

.profile-info small {
    margin-top: 1px;

    color: #626271;
    font-size: 9px;
}

.profile-mini button {
    border: 0;
    background: transparent;

    color: #676775;
}


/* MAIN */

.main {
    min-width: 0;
    height: 100vh;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 70% -20%,
            rgba(103, 77, 240, .07),
            transparent 30%
        ),
        var(--bg);
}

.topbar {
    height: 71px;
    flex: 0 0 71px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 23px;

    border-bottom: 1px solid var(--border-soft);

    background: rgba(9, 9, 13, .87);
    backdrop-filter: blur(14px);
}

.mobile-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar h1 {
    margin: 0;

    font-size: 16px;
    font-weight: 650;
}

.topbar p {
    margin: 3px 0 0;

    color: var(--muted-2);

    font-size: 10px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.icon-btn {
    width: 35px;
    height: 35px;

    border: 1px solid var(--border-soft);
    border-radius: 9px;

    background: #101016;
    color: #8b8b99;
}

.icon-btn:hover {
    color: white;
    border-color: #32323f;
}

.notification {
    position: relative;
}

.notification span {
    width: 5px;
    height: 5px;

    position: absolute;
    right: 8px;
    top: 8px;

    border-radius: 50%;
    background: #8068ff;
}

.header-create {
    height: 35px;

    padding: 0 13px;

    border: 1px solid #6550da;
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #7259fb,
            #5d44df
        );

    color: white;

    font-size: 11px;
    font-weight: 600;
}

.mobile-menu {
    display: none;

    border: 0;
    background: transparent;

    color: white;
    font-size: 20px;
}

.content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    padding: 24px;
}

.page {
    display: none;
    animation: fadePage .18s ease;
}

.page.active {
    display: block;
}

@keyframes fadePage {
    from {
        opacity: .6;
        transform: translateY(3px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/* DASHBOARD */

.welcome-banner {
    min-height: 260px;

    display: grid;
    grid-template-columns: 1.12fr .88fr;

    position: relative;
    overflow: hidden;

    border: 1px solid #282538;
    border-radius: 17px;

    background:
        radial-gradient(
            circle at 79% 45%,
            rgba(117, 92, 255, .22),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #12111b,
            #101017 54%,
            #151125
        );
}

.welcome-banner::before {
    content: "";

    width: 600px;
    height: 600px;

    position: absolute;
    right: -260px;
    top: -300px;

    border-radius: 50%;
    border: 1px solid rgba(130, 104, 255, .11);
}

.welcome-copy {
    position: relative;
    z-index: 3;

    padding: 41px 43px;
}

.eyebrow {
    display: block;
    margin-bottom: 12px;

    color: #8f7cff;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.welcome-copy h2 {
    max-width: 490px;

    margin: 0;

    font-size: clamp(27px, 3vw, 43px);
    line-height: 1.03;
    letter-spacing: -1.6px;
}

.welcome-copy h2 span {
    background:
        linear-gradient(
            90deg,
            #a692ff,
            #715cff
        );

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-copy p {
    max-width: 500px;

    margin: 15px 0 0;

    color: #888896;

    font-size: 12px;
    line-height: 1.65;
}

.welcome-actions {
    display: flex;
    gap: 9px;

    margin-top: 24px;
}

.primary-btn,
.secondary-btn {
    min-height: 39px;

    padding: 0 15px;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 600;
}

.primary-btn {
    border: 1px solid #6a53e9;

    background:
        linear-gradient(
            135deg,
            #765dff,
            #5b42df
        );

    color: white;
}

.primary-btn:hover {
    filter: brightness(1.08);
}

.secondary-btn {
    border: 1px solid #2c2c37;

    background: #14141b;
    color: #bbb9c7;
}

.secondary-btn:hover {
    color: white;
    border-color: #3c3c48;
}

.welcome-visual {
    min-height: 260px;

    display: grid;
    place-items: center;

    position: relative;
}

.orb {
    position: absolute;

    border-radius: 50%;
    filter: blur(1px);
}

.orb-one {
    width: 215px;
    height: 215px;

    background:
        radial-gradient(
            circle,
            rgba(121, 92, 255, .34),
            transparent 67%
        );
}

.orb-two {
    width: 130px;
    height: 130px;

    right: 10%;
    top: 15%;

    border: 1px solid rgba(137, 112, 255, .18);
}

.ai-window {
    width: 260px;

    position: relative;
    z-index: 3;

    overflow: hidden;

    border: 1px solid rgba(132, 109, 255, .3);
    border-radius: 13px;

    background: rgba(13, 13, 20, .8);

    box-shadow:
        0 30px 70px rgba(0, 0, 0, .32),
        0 0 60px rgba(107, 83, 241, .09);

    transform: rotate(-2deg);
}

.ai-window-top {
    height: 34px;

    display: flex;
    align-items: center;
    gap: 5px;

    padding: 0 10px;

    border-bottom: 1px solid #252432;
}

.ai-window-top span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #454451;
}

.ai-window-top small {
    margin-left: auto;

    color: #737182;
    font-size: 8px;
}

.fake-code {
    padding: 16px;
}

.fake-code i {
    height: 7px;

    display: block;

    margin-bottom: 9px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #765fff,
            #352d5c
        );

    opacity: .65;
}

.fake-code i:nth-child(1) {
    width: 53%;
}

.fake-code i:nth-child(2) {
    width: 84%;
}

.fake-code i:nth-child(3) {
    width: 71%;
}

.fake-code i:nth-child(4) {
    width: 90%;
}

.fake-code i:nth-child(5) {
    width: 40%;
}

.magic-badge {
    position: absolute;
    right: 12px;
    bottom: 11px;

    padding: 6px 8px;

    border: 1px solid #3c3562;
    border-radius: 8px;

    background: #181527;

    color: #a89aff;

    font-size: 8px;
    font-weight: 700;
}

.section-head {
    margin: 27px 0 12px;

    display: flex;
    justify-content: space-between;
}

.section-head h3,
.panel-head h3 {
    margin: 0;

    font-size: 13px;
}

.section-head p,
.panel-head p {
    margin: 3px 0 0;

    color: var(--muted-2);
    font-size: 9px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.stat-card {
    min-height: 111px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 15px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #111118,
            #0f0f15
        );
}

.stat-card:hover {
    border-color: #2f2f3c;
}

.stat-icon {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-size: 15px;
}

.stat-icon.purple {
    background: rgba(118, 93, 255, .12);
    color: #9c89ff;
}

.stat-icon.blue {
    background: rgba(75, 140, 255, .11);
    color: #67a1ff;
}

.stat-icon.cyan {
    background: rgba(67, 213, 232, .1);
    color: #55d9e8;
}

.stat-icon.green {
    background: rgba(67, 216, 139, .1);
    color: #5ad895;
}

.stat-card small,
.stat-card strong,
.stat-card span {
    display: block;
}

.stat-card small {
    color: #7e7e8c;
    font-size: 9px;
}

.stat-card strong {
    margin: 3px 0;

    font-size: 20px;
    font-weight: 650;
}

.stat-card span {
    color: #5d5d6b;
    font-size: 8px;
}

.status-good {
    color: #59d594;
    font-size: 14px !important;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr);
    gap: 11px;

    margin-top: 12px;
}

.panel {
    min-height: 250px;

    padding: 16px;

    border: 1px solid var(--border-soft);
    border-radius: 12px;

    background: #101016;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 13px;
}

.text-btn {
    border: 0;
    background: transparent;

    color: #8473e4;

    font-size: 9px;
}

.empty-projects {
    height: 180px;

    display: grid;
    place-items: center;

    text-align: center;
}

.empty-projects div {
    max-width: 270px;
}

.empty-projects strong {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
}

.empty-projects p {
    margin: 0 0 13px;

    color: #676775;

    font-size: 9px;
}

.quick-panel {
    min-height: 250px;
}

.quick-item {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 8px;

    border: 0;
    border-bottom: 1px solid #1b1b23;

    background: transparent;
    color: #d4d4dd;

    text-align: left;
}

.quick-item:last-child {
    border-bottom: 0;
}

.quick-item:hover {
    background: #13131a;
    border-radius: 8px;
}

.quick-item > span {
    margin-left: auto;

    color: #575765;
}

.quick-icon {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #191821;
    color: #8e7bfa;
}

.quick-item strong,
.quick-item small {
    display: block;
}

.quick-item strong {
    font-size: 9px;
}

.quick-item small {
    margin-top: 2px;

    color: #656573;
    font-size: 8px;
}


/* BUILDER */

#page-builder {
    height: calc(100vh - 119px);
}

.builder-shell {
    height: 100%;

    display: grid;
    grid-template-columns: minmax(340px, 41%) minmax(0, 59%);

    overflow: hidden;

    border: 1px solid var(--border-soft);
    border-radius: 13px;

    background: #0c0c11;
}

.builder-left {
    min-width: 0;

    display: flex;
    flex-direction: column;

    border-right: 1px solid var(--border-soft);
}

.builder-intro {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 30px;

    text-align: center;
}

.builder-logo {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #8067ff,
            #5941da
        );

    box-shadow:
        0 18px 55px rgba(112, 86, 250, .21);

    font-size: 22px;
}

.builder-intro h2 {
    margin: 16px 0 6px;

    font-size: 21px;
}

.builder-intro > p {
    max-width: 390px;

    margin: 0;

    color: #777785;

    font-size: 10px;
    line-height: 1.6;
}

.prompt-suggestions {
    max-width: 430px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 20px;
}

.prompt-chip {
    padding: 7px 9px;

    border: 1px solid #252531;
    border-radius: 100px;

    background: #111117;
    color: #767684;

    font-size: 8px;
}

.prompt-chip:hover {
    color: #d9d7e0;
    border-color: #3b374c;
}

.builder-chat {
    display: none;

    flex: 1;
    overflow-y: auto;

    padding: 18px;
}

.builder-message {
    margin-bottom: 11px;
}

.builder-message small {
    display: block;

    margin-bottom: 5px;

    color: #626271;

    font-size: 8px;
}

.builder-message .bubble {
    padding: 11px;

    border: 1px solid #252530;
    border-radius: 10px;

    background: #121218;

    color: #bbb9c4;

    font-size: 10px;
    line-height: 1.6;
}

.builder-message.user .bubble {
    background: #171421;
    border-color: #302a4a;
}

.builder-composer {
    margin: 12px;

    overflow: hidden;

    border: 1px solid #2b2a36;
    border-radius: 12px;

    background: #121218;
}

.builder-composer:focus-within {
    border-color: #4c426a;
}

.builder-composer textarea {
    width: 100%;
    min-height: 92px;
    max-height: 190px;

    display: block;

    padding: 13px;

    resize: vertical;

    border: 0;

    background: transparent;
    color: white;

    font-size: 11px;
}

.builder-composer textarea::placeholder {
    color: #5b5b68;
}

.composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 6px 7px 7px 9px;
}

.composer-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-tools button {
    width: 27px;
    height: 27px;

    border: 1px solid #252530;
    border-radius: 7px;

    background: #101016;
    color: #71717d;
}

.composer-tools span {
    color: #595965;
    font-size: 8px;
}

.generate-btn {
    min-height: 31px;

    padding: 0 11px;

    border: 0;
    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #765cff,
            #5d43df
        );

    color: white;

    font-size: 9px;
    font-weight: 700;
}

.builder-right {
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: #09090d;
}

.workspace-toolbar {
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 8px;

    border-bottom: 1px solid #1c1c24;

    background: #0d0d12;
}

.workspace-tabs {
    display: flex;
    gap: 2px;
}

.workspace-tab {
    min-height: 29px;

    padding: 0 10px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #666673;

    font-size: 9px;
    font-weight: 600;
}

.workspace-tab.active {
    background: #181820;
    color: #dbdbe3;
}

.workspace-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-status {
    color: #5cba83;
    font-size: 8px;
}

.workspace-actions button {
    width: 28px;
    height: 28px;

    border: 1px solid #24242d;
    border-radius: 7px;

    background: #111117;
    color: #777784;
}

.workspace-view {
    display: none;

    flex: 1;
    min-height: 0;
}

.workspace-view.active {
    display: block;
}

.empty-preview {
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    padding: 30px;

    text-align: center;
}

.preview-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border: 1px solid #292833;
    border-radius: 12px;

    background: #111117;
    color: #645e76;

    font-size: 16px;
}

.empty-preview h3 {
    margin: 12px 0 5px;

    font-size: 11px;
}

.empty-preview p {
    max-width: 270px;

    margin: 0;

    color: #555561;

    font-size: 9px;
    line-height: 1.5;
}

.code-window {
    height: 100%;

    padding: 15px;

    background:
        linear-gradient(
            90deg,
            #0c0c10,
            #09090d
        );
}

.code-line {
    display: flex;
    gap: 17px;

    min-height: 20px;

    color: #787789;

    font-family:
        "SFMono-Regular",
        Consolas,
        monospace;

    font-size: 10px;
}

.code-line span {
    width: 15px;

    color: #393944;

    text-align: right;
}

.files-list {
    padding: 12px;
}

.file-item {
    min-height: 31px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 8px;

    border-radius: 7px;

    color: #92919e;

    font-size: 9px;
}

.file-item:hover {
    background: #121218;
}

.file-item.nested {
    padding-left: 28px;

    color: #71717e;
}


/* CHAT */

.chat-layout {
    height: calc(100vh - 119px);

    display: flex;
    justify-content: center;
}

.chat-main {
    width: min(850px, 100%);
    height: 100%;

    display: flex;
    flex-direction: column;
}

.chat-welcome {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    text-align: center;
}

.chat-ai-logo {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #7e65ff,
            #5940dc
        );

    box-shadow:
        0 20px 60px rgba(112, 87, 245, .2);

    font-size: 22px;
}

.chat-welcome h2 {
    margin: 15px 0 5px;

    font-size: 20px;
}

.chat-welcome p {
    max-width: 440px;

    margin: 0;

    color: #6f6f7d;

    font-size: 10px;
    line-height: 1.6;
}

.chat-messages {
    display: none;

    flex: 1;
    overflow-y: auto;

    padding: 18px;
}

.chat-composer {
    margin-bottom: 4px;

    overflow: hidden;

    border: 1px solid #292934;
    border-radius: 13px;

    background: #111117;
}

.chat-composer textarea {
    width: 100%;
    min-height: 90px;
    max-height: 190px;

    display: block;

    padding: 14px;

    resize: vertical;

    border: 0;

    background: transparent;
    color: white;

    font-size: 11px;
}

.chat-composer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px;
}

.chat-composer-bottom span {
    padding-left: 6px;

    color: #53535e;
    font-size: 8px;
}

.chat-composer-bottom button {
    min-height: 31px;

    padding: 0 12px;

    border: 0;
    border-radius: 8px;

    background: #6950ef;
    color: white;

    font-size: 9px;
}


/* PROJECTS */

.page-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 20px;
}

.page-heading-row h2 {
    margin: 0;

    font-size: 18px;
}

.page-heading-row p {
    margin: 4px 0 0;

    color: #686876;
    font-size: 10px;
}

.project-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 13px;
}

.search-box {
    width: min(360px, 100%);
    height: 37px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 0 10px;

    border: 1px solid #23232d;
    border-radius: 9px;

    background: #101016;
    color: #62626e;
}

.search-box input {
    width: 100%;

    border: 0;

    background: transparent;
    color: white;

    font-size: 10px;
}

.project-toolbar select {
    min-width: 125px;

    padding: 0 9px;

    border: 1px solid #23232d;
    border-radius: 9px;

    background: #101016;
    color: #858591;

    font-size: 9px;
}

.projects-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(225px, 1fr)
        );

    gap: 12px;
}

.project-card {
    overflow: hidden;

    border: 1px solid #202029;
    border-radius: 12px;

    background: #101016;
}

.project-thumb {
    height: 132px;

    position: relative;

    display: grid;
    place-items: center;

    border-bottom: 1px solid #202029;

    background:
        radial-gradient(
            circle at 60% 50%,
            rgba(117, 93, 255, .16),
            transparent 45%
        ),
        #0d0d12;
}

.project-thumb span {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #17141f;
    color: #8f7cff;
}

.project-card-info {
    padding: 11px;
}

.project-card-info strong {
    display: block;

    font-size: 10px;
}

.project-card-info small {
    display: block;

    margin-top: 4px;

    color: #62626e;
    font-size: 8px;
}

.project-card-actions {
    display: flex;
    gap: 6px;

    margin-top: 10px;
}

.project-card-actions button {
    padding: 5px 8px;

    border: 1px solid #292934;
    border-radius: 6px;

    background: #15151c;
    color: #82828e;

    font-size: 8px;
}

.project-card-actions button:hover {
    color: white;
}

.no-projects-large {
    grid-column: 1 / -1;

    min-height: 370px;

    display: grid;
    place-items: center;

    border: 1px dashed #252530;
    border-radius: 13px;

    text-align: center;
}

.no-projects-large strong {
    display: block;

    margin-bottom: 5px;
}

.no-projects-large p {
    margin: 0 0 14px;

    color: #666673;

    font-size: 10px;
}


/* TEMPLATES */

.template-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 15px;
}

.filter-chip {
    padding: 7px 11px;

    border: 1px solid #25252f;
    border-radius: 100px;

    background: #101016;
    color: #72727e;

    font-size: 9px;
}

.filter-chip.active {
    border-color: #3d3560;

    background: #181522;
    color: #a594ff;
}

.templates-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(245px, 1fr)
        );

    gap: 13px;
}

.template-card {
    overflow: hidden;

    border: 1px solid #202029;
    border-radius: 13px;

    background: #101016;

    transition: .18s ease;
}

.template-card:hover {
    transform: translateY(-2px);

    border-color: #343341;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .13);
}

.template-preview {
    height: 150px;

    position: relative;
    overflow: hidden;

    padding: 25px;

    border-bottom: 1px solid #202029;
}

.purple-preview {
    background:
        radial-gradient(
            circle at 50% 10%,
            rgba(132, 94, 255, .23),
            transparent 55%
        ),
        #0c0c12;
}

.blue-preview {
    background:
        radial-gradient(
            circle at 20% 40%,
            rgba(63, 134, 255, .2),
            transparent 55%
        ),
        #0c0d13;
}

.dark-preview {
    display: flex;
    gap: 9px;

    background: #0c0c10;
}

.store-preview {
    background:
        linear-gradient(
            145deg,
            #17131a,
            #0e0d11
        );
}

.orange-preview {
    background:
        radial-gradient(
            circle,
            rgba(244, 156, 75, .15),
            transparent 58%
        ),
        #100e0d;
}

.green-preview {
    background:
        radial-gradient(
            circle,
            rgba(63, 205, 130, .13),
            transparent 58%
        ),
        #0d100e;
}

.mock-nav {
    width: 90%;
    height: 8px;

    margin: 0 auto 19px;

    border-radius: 5px;

    background: #24222c;
}

.mock-title {
    width: 60%;
    height: 13px;

    margin: 0 auto 8px;

    border-radius: 6px;

    background: #51457e;
}

.mock-title.short {
    width: 45%;
}

.mock-text {
    width: 72%;
    height: 5px;

    margin: 0 auto 20px;

    border-radius: 5px;

    background: #24222e;
}

.mock-row {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.mock-row span {
    width: 45px;
    height: 28px;

    border-radius: 6px;

    background: #1c1b23;
}

.mock-circle {
    width: 39px;
    height: 39px;

    margin: 0 auto 13px;

    border-radius: 50%;

    background: #1b2a42;
}

.dash-side {
    width: 35px;
    height: 100%;

    border-radius: 7px;

    background: #17171e;
}

.dash-content {
    flex: 1;
}

.dash-content > div {
    width: 80%;
    height: 10px;

    margin-bottom: 16px;

    border-radius: 5px;

    background: #272731;
}

.dash-content section {
    display: flex;
    gap: 5px;
}

.dash-content section span {
    flex: 1;
    height: 43px;

    border-radius: 7px;

    background: #17171e;
}

.store-header {
    width: 80%;
    height: 8px;

    margin: 0 auto 22px;

    border-radius: 4px;

    background: #372a3a;
}

.products-mini {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.products-mini span {
    width: 50px;
    height: 62px;

    border-radius: 8px;

    background: #211a23;
}

.restaurant-card {
    width: 105px;
    height: 55px;

    margin: 0 auto 13px;

    border-radius: 50px 50px 8px 8px;

    background: #2b1e16;
}

.restaurant-line {
    width: 60%;
    height: 7px;

    margin: 0 auto 7px;

    border-radius: 6px;

    background: #39251c;
}

.restaurant-line.small {
    width: 43%;
}

.game-logo {
    width: 40px;
    height: 40px;

    margin: 0 auto 13px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #173624;
    color: #65db98;

    font-weight: 800;
}

.game-cards {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.game-cards span {
    width: 44px;
    height: 31px;

    border-radius: 6px;

    background: #16231b;
}

.template-info {
    padding: 12px;
}

.template-info strong {
    font-size: 10px;
}

.template-info p {
    margin: 4px 0 10px;

    color: #646471;
    font-size: 8px;
}

.template-info button {
    padding: 0;

    border: 0;

    background: transparent;
    color: #8775ea;

    font-size: 8px;
}


/* USAGE */

.usage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.usage-card {
    padding: 17px;

    border: 1px solid #202029;
    border-radius: 12px;

    background: #101016;
}

.usage-card span,
.usage-card strong,
.usage-card small {
    display: block;
}

.usage-card span {
    color: #777784;
    font-size: 9px;
}

.usage-card strong {
    margin: 7px 0;

    font-size: 25px;
}

.usage-card small {
    color: #5b5b68;
    font-size: 8px;
}

.pending-text {
    color: #f4ad63;
    font-size: 16px !important;
}

.usage-panel {
    margin-top: 12px;
}

.fake-chart {
    height: 240px;

    display: flex;
    align-items: flex-end;
    gap: 9px;

    padding: 24px 10px 0;

    border-top: 1px solid #1d1d25;
}

.fake-chart div {
    flex: 1;

    min-width: 7px;

    border-radius: 5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            #725bfb,
            rgba(114, 91, 251, .12)
        );

    opacity: .75;
}


/* SETTINGS */

.settings-layout {
    display: grid;
    grid-template-columns: 190px minmax(0, 720px);
    gap: 12px;
}

.settings-menu {
    height: max-content;

    display: flex;
    flex-direction: column;
    gap: 3px;

    padding: 8px;

    border: 1px solid #202029;
    border-radius: 11px;

    background: #101016;
}

.settings-tab {
    min-height: 36px;

    padding: 0 10px;

    border: 0;
    border-radius: 7px;

    background: transparent;
    color: #757582;

    text-align: left;
    font-size: 9px;
}

.settings-tab.active {
    background: #181820;
    color: #dedde5;
}

.settings-card {
    padding: 20px;

    border: 1px solid #202029;
    border-radius: 11px;

    background: #101016;
}

.settings-card > h3 {
    margin: 0;

    font-size: 14px;
}

.settings-card > p {
    margin: 5px 0 20px;

    color: #656572;
    font-size: 9px;
}

.setting-row {
    min-height: 69px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    border-top: 1px solid #1d1d25;
}

.setting-row strong,
.setting-row span {
    display: block;
}

.setting-row strong {
    font-size: 9px;
}

.setting-row span {
    margin-top: 3px;

    color: #62626e;
    font-size: 8px;
}

.setting-row input,
.setting-row select {
    width: 190px;
    height: 34px;

    padding: 0 9px;

    border: 1px solid #292934;
    border-radius: 8px;

    background: #15151c;
    color: #aeacb7;

    font-size: 9px;
}

.switch input {
    display: none;
}

.switch span {
    width: 35px;
    height: 20px;

    position: relative;

    display: block;

    border-radius: 100px;

    background: #282833;

    cursor: pointer;
}

.switch span::after {
    content: "";

    width: 14px;
    height: 14px;

    position: absolute;
    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #777784;

    transition: .2s;
}

.switch input:checked + span {
    background: #5d49cc;
}

.switch input:checked + span::after {
    left: 18px;

    background: white;
}

.save-settings {
    margin-top: 18px;
}


/* TOAST */

.toast {
    position: fixed;
    right: 20px;
    bottom: 20px;

    z-index: 1000;

    padding: 10px 14px;

    opacity: 0;
    pointer-events: none;

    border: 1px solid #363246;
    border-radius: 9px;

    background: #181621;
    color: #c8c0fb;

    font-size: 9px;

    transform: translateY(10px);

    transition: .2s ease;
}

.toast.show {
    opacity: 1;
    transform: none;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    :root {
        --sidebar-width: 210px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-banner {
        grid-template-columns: 1fr .65fr;
    }

    .welcome-visual {
        transform: scale(.87);
    }

}

@media (max-width: 820px) {

    body {
        overflow: auto;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        width: 235px;

        position: fixed;
        left: -250px;
        top: 0;

        z-index: 100;

        transition: .22s;
    }

    .sidebar.open {
        left: 0;

        box-shadow:
            15px 0 50px rgba(0, 0, 0, .42);
    }

    .mobile-menu {
        display: block;
    }

    .main {
        height: auto;
        min-height: 100vh;
    }

    .content {
        overflow: visible;
    }

    .welcome-banner {
        display: block;
    }

    .welcome-visual {
        display: none;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    #page-builder {
        height: auto;
    }

    .builder-shell {
        display: block;
        height: auto;
    }

    .builder-left {
        min-height: 600px;

        border-right: 0;
        border-bottom: 1px solid #202029;
    }

    .builder-right {
        height: 600px;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 560px) {

    .content {
        padding: 14px;
    }

    .topbar {
        padding: 0 13px;
    }

    .topbar p {
        display: none;
    }

    .icon-btn {
        display: none;
    }

    .stats-grid,
    .usage-grid {
        grid-template-columns: 1fr;
    }

    .welcome-copy {
        padding: 28px 24px;
    }

    .welcome-copy h2 {
        font-size: 31px;
    }

    .welcome-actions {
        flex-direction: column;
    }

    .project-toolbar {
        flex-direction: column;
    }

    .project-toolbar select {
        height: 37px;
    }

    .page-heading-row {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .setting-row {
        align-items: flex-start;
        flex-direction: column;

        padding: 14px 0;
        gap: 9px;
    }

    .setting-row input,
    .setting-row select {
        width: 100%;
    }

}