.drawing-nav-links a {
    color: #fff;
    text-decoration: none;
    padding: .55vw 1.3vw;
    border-radius: .5vw;
    font-weight: 600;
    font-size: .95vw;
    transition: all .3s ease;
}

.drawing-nav-links a:hover,
.drawing-nav-links a.active {
    background-color: #2c7ffc;
}

.drawing-nav-settings {
    margin-right: 1.5vw;
    color: #fff;
    text-decoration: none;
    padding: .55vw 1.3vw;
    background-color: #2c7ffc;
    border-radius: .5vw;
    font-weight: 600;
    font-size: .95vw;
    transition: all .3s ease;
}

.drawing-page {
    min-height: calc(100vh - 7vw);
    padding: 8vw 4vw 8rem;
    background: radial-gradient(circle at 50% 0%, rgba(44,127,252,.14), transparent 38rem);
}

.drawing-heading {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    max-width: 1240px;
    margin: 0 auto 1.5rem;
}

.drawing-heading h1 { margin: .15rem 0 .45rem; color: #fff; font-size: clamp(2rem, 4vw, 3.8rem); letter-spacing: -.045em; }
.drawing-heading p { margin: 0; color: rgba(255,255,255,.62); line-height: 1.6; }
.drawing-eyebrow { color: #8ec5ff !important; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.drawing-eyebrow i { margin-right: .25rem; }
.drawing-back { flex: none; margin-top: .4rem; padding: .6rem .8rem; border: 1px solid rgba(125,184,255,.3); border-radius: 9px; color: #a9cbff; font-size: .72rem; font-weight: 700; text-decoration: none; }
.drawing-back:hover { background: rgba(44,127,252,.15); color: #fff; }

.drawing-workspace { max-width: 1240px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(125,184,255,.25); border-radius: 20px; background: rgba(9,15,29,.9); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.drawing-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding: .75rem; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(20,31,55,.82); }
.tool-group { display: flex; gap: .35rem; padding-right: .55rem; border-right: 1px solid rgba(255,255,255,.12); }
.tool-group.actions { border-right: 0; }
.tool-button, .icon-button, .secondary-button, .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 36px; border: 1px solid transparent; border-radius: 8px; padding: .5rem .65rem; color: #dbeafe; background: transparent; font: 700 .7rem Montserrat,sans-serif; cursor: pointer; }
.tool-button:hover, .icon-button:hover { background: rgba(255,255,255,.09); }
.tool-button.active { border-color: rgba(125,184,255,.35); background: rgba(44,127,252,.25); color: #fff; }
.tool-button i, .icon-button i { color: #8ec5ff; }
.tool-button.active i { color: #fff; }
.icon-button:disabled { opacity: .35; cursor: default; }
.control-field { display: flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.66); font: 700 .68rem Montserrat,sans-serif; }
.control-field input[type="color"] { width: 29px; height: 29px; padding: 2px; border: 1px solid rgba(255,255,255,.3); border-radius: 7px; background: transparent; cursor: pointer; }
.size-control { flex-direction: column; align-items: stretch; gap: .15rem; min-width: 125px; }
.size-control span { display: flex; justify-content: space-between; }
.size-control b { color: #fff; }
.size-control input { accent-color: #58a6ff; cursor: pointer; }
.file-actions { display: flex; flex: 1; justify-content: flex-end; gap: .45rem; padding: 0; border: 0; }
.secondary-button { border-color: rgba(125,184,255,.28); background: rgba(255,255,255,.06); }
.secondary-button:hover { background: rgba(255,255,255,.12); }
.primary-button { border-color: rgba(125,184,255,.38); background: linear-gradient(135deg,#2c7ffc,#1a5fd0); color: #fff; }
.primary-button:hover { filter: brightness(1.12); }
.upload-button { cursor: pointer; }
.canvas-stage { padding: clamp(.75rem, 2vw, 1.5rem); background: #070b15; }
#drawing-canvas { display: block; width: 100%; height: auto; border: 1px solid rgba(125,184,255,.22); border-radius: 10px; background: #fff; box-shadow: 0 12px 35px rgba(0,0,0,.35); cursor: crosshair; touch-action: none; }
.drawing-hint { margin: 0; padding: .75rem 1rem 1rem; color: rgba(255,255,255,.42); font-size: .68rem; text-align: center; }
.drawing-hint i { margin-right: .3rem; color: #8ec5ff; }

@media (max-width: 850px) {
    .drawing-page { padding: 24vw 3vw 6rem; }
    .drawing-heading { flex-direction: column; gap: .8rem; }
    .drawing-back { margin-top: 0; }
    .file-actions { flex-basis: 100%; justify-content: flex-start; padding-top: .3rem; }
}

@media (max-width: 520px) {
    .drawing-toolbar { align-items: stretch; }
    .tool-group, .control-field { flex: 1; }
    .tool-button span, .icon-button span { display: none; }
    .tool-button, .icon-button { flex: 1; }
    .control-field { justify-content: center; }
    .size-control { flex-basis: 100%; order: 5; }
    .file-actions { flex-wrap: wrap; }
    .secondary-button, .primary-button { flex: 1; }
}