:root {
    --bg: #0f1117;
    --panel: #171b24;
    --panel-hover: #202633;
    --border: #2a3140;
    --text: #ffffff;
    --muted: #9ca3af;
    --accent: #3b82f6;
}


* {
    box-sizing: border-box;
}


body {
    margin: 0;
    min-height: 100vh;
    overflow: hidden;

    background: var(--bg);
    color: var(--text);

    font-family: "Inter", Arial, sans-serif;
}


/* TOPBAR */

.topbar {

    height: 64px;

    background: var(--panel);
    border-bottom: 1px solid var(--border);

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

    padding: 0 24px;
}

.logo {
    display:flex;
    align-items:center;
    gap:10px;
    font-size: 20px;
    font-weight: bold;
}


.logo img {
    width:28px;
    height:28px;
    display:block;
}

.topbar-right {

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

}


.topbar a {

    color: var(--text);
    text-decoration: none;

}


/* APP */

.app {

    display: flex;

    height: calc(100vh - 104px);

}


/* SIDEBAR */

.sidebar {

    width: 240px;

    background: var(--panel);

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

    padding: 16px;

}

.server-info h2 {

    margin: 0 0 5px;

}

.sidebar-item img {

    width:20px;
    height:20px;

}

.sidebar-item {

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

}

.server-info span {

    color: var(--muted);

}


.server-info {
    position: relative;

    background: #11151d;

    border-radius: 10px;

    padding: 14px;

    overflow: hidden;

    margin-bottom: 25px;
}


.server-status-bar {
    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #ef4444;
}

.servers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}


.server-card {

    position: relative;

    background: #11151d;

    border-radius: 12px;

    overflow: hidden;

    padding: 18px;

    text-decoration: none;

    color: var(--text);

}


.server-info-content {

    margin-left: 10px;

}


.server-info-content h2 {

    margin: 0;

}


.server-info-content p {

    margin: 5px 0;

    color: var(--muted);

}


.server-info-content span {

    color: var(--text);

}

.server-content {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.server-content h2 {
    margin: 0;
}


.server-content span {
    color: var(--muted);
}


.server-power {
    width: 28px;
    height: 28px;

    opacity: .8;
}

.sidebar a {

    display: flex;

    padding: 11px 14px;

    margin-bottom: 6px;

    border-radius: 8px;

    color: var(--text);

    text-decoration: none;

    transition: .15s;

}


.sidebar a:hover {

    background: var(--panel-hover);

}


.sidebar a.active {

    background: var(--accent);

}


/* CONTENT */

.content {

    flex: 1;

    padding: 25px;

    overflow-y: auto;

}


/* FOOTER */

footer {

    height: 40px;

    background: var(--panel);

    border-top: 1px solid var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 24px;

    color: var(--muted);

    font-size: 13px;

}

/* ACCOUNT DROPDOWN */

.account {
    position: relative;
}


.account button {
    background: transparent;
    border: none;

    color: var(--text);

    cursor: pointer;

    font-size: 15px;
}

.dropdown.show {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}

.dropdown {

    position: absolute;

    right: 0;
    top: 45px;

    width: 180px;

    background: var(--panel);

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

    border-radius: 10px;

    padding: 8px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-10px);

    transition:
        opacity .2s ease,
        transform .2s ease;

    z-index: 100;
}


.dropdown a {

    display: block;

    padding: 10px;

    border-radius: 7px;

    color: var(--text);

    text-decoration: none;

}


.dropdown a:hover {

    background: var(--panel-hover);

}


.account:hover .dropdown {

    display: block;

}

.console-page {
    height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.console-output {
    flex: 1;

    background: #0b0f14;

    border-radius: 12px;

    padding: 15px;

    overflow-y: auto;

    font-family: "JetBrains Mono", monospace;
    font-size: 14px;

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


.console-line {
    padding: 3px 0;
    color: #d1d5db;
}


.console-input {
    display: flex;
    gap: 10px;
}


.console-input input {

    flex: 1;

    background: #111827;

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

    border-radius: 8px;

    padding: 12px;

    color: white;

    outline: none;
}


.console-input button {

    width: 45px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

}

.console-send {

    width: 42px;
    height: 42px;

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

    border: none;
    border-radius: 8px;

    background: var(--accent);

    cursor: pointer;
}


.console-send img {

    width: 20px;
    height: 20px;

}

.settings-page {
    max-width: 600px;
}


.settings-page form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.settings-page label {
    font-size: 14px;
    color: var(--muted);
}


.settings-page input,
.settings-page textarea {

    width: 100%;

    background: var(--panel);

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

    border-radius: 10px;

    padding: 12px;

    color: var(--text);

    font-size: 15px;

    outline: none;

}


.settings-page textarea {

    min-height: 120px;

    resize: vertical;

}


.settings-page input:focus,
.settings-page textarea:focus {

    border-color: var(--accent);

}


.settings-page button {

    width: fit-content;

    padding: 10px 20px;

    border: none;

    border-radius: 10px;

    background: var(--accent);

    color: white;

    cursor: pointer;

    font-weight: 600;

}


.settings-page button:hover {

    opacity: 0.85;

}

.settings-page select {

    width: 100%;

    background: var(--panel);

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

    border-radius: 10px;

    padding: 12px;

    color: var(--text);

    font-size: 15px;

    outline: none;

}

.software-page {
    max-width: 600px;
}


.software-page form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.software-page select,
.software-page input {

    width: 100%;

    background: var(--panel);

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

    border-radius: 10px;

    padding: 12px;

    color: var(--text);

}

.software-page select {

    width: 100%;

    background: var(--panel);

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

    border-radius: 10px;

    padding: 12px;

    color: var(--text);

    font-size: 15px;

    outline: none;

    appearance: none;

}


.software-page select:focus {

    border-color: var(--accent);

}


.software-page option {

    background: var(--panel);

    color: var(--text);

}

.plugins-list {

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

}


.plugin-card {

    display: grid !important;

    grid-template-columns: 64px 1fr;

    gap: 16px;

    width: 100%;

    background: var(--panel);

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

    border-radius: 14px;

    padding: 16px;

}


.plugin-icon {

    width: 64px !important;
    height: 64px !important;

    object-fit: cover !important;

    border-radius: 12px;

}


.plugin-content {

    min-width: 0;

}


.plugin-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.plugin-header h3 {

    margin: 0;

    font-size: 18px;

}


.plugin-meta {

    display: flex;

    gap: 15px;

    color: var(--muted);

    font-size: 14px;

}


.plugin-content p {

    margin: 8px 0;

    color: var(--muted);

}


.plugin-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.plugin-support {

    color: var(--muted);

    font-size: 14px;

}


.plugin-actions {

    display: flex;

    gap: 10px;

}


.plugin-install {

    height: 36px;

    padding: 0 18px;

    border-radius: 8px;

    border: none;

    background: var(--accent);

    color: white;

    cursor: pointer;

}

.plugins-toolbar {

    display: flex;

    align-items: center;

    gap: 12px;

    background: var(--panel);

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

    border-radius: 14px;

    padding: 12px;

    margin-bottom: 18px;

}


.plugins-toolbar select {

    height: 40px;

    min-width: 120px;

    background: var(--panel);

    color: var(--text);

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

    border-radius: 10px;

    padding: 0 35px 0 12px;

    font-size: 14px;

    outline: none;

    cursor: pointer;

    appearance: none;

    background-image: url("/assets/icons/chevron_down.svg");

    background-repeat: no-repeat;

    background-position: right 12px center;

    background-size: 14px;

}


.plugins-toolbar select:hover {

    background-color: var(--panel-hover);

}


.plugins-toolbar select:focus {

    border-color: var(--accent);

}


.plugins-toolbar form {

    display: flex;

    margin-left: auto;

    gap: 8px;

}


.plugins-toolbar input {

    height: 40px;

    width: 240px;

    background: var(--bg);

    color: var(--text);

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

    border-radius: 10px;

    padding: 0 12px;

    outline: none;

}


.plugins-toolbar input:focus {

    border-color: var(--accent);

}


.plugins-toolbar button {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 10px;

    background: var(--accent);

    color: white;

    cursor: pointer;

}


.plugins-toolbar button:hover {

    filter: brightness(1.1);

}

.plugin-card {

    cursor: pointer;

}

.plugin-card:hover {

    background: var(--panel-hover);

}

.plugin-actions a {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--bg);

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

    color: var(--text);

    text-decoration: none;

}


.plugin-actions a img {

    width: 18px;
    height: 18px;

}


.plugin-install {

    height: 36px;

    padding: 0 18px;

    border-radius: 8px;

    border: none;

    background: var(--accent);

    color: white;

}

.plugin-meta span {

    display: flex;

    align-items: center;

    gap: 5px;

}


.plugin-meta img {

    width: 16px;

    height: 16px;

}

.plugins-toolbar button img {

    width: 18px;

    height: 18px;

}

.plugins-toolbar select {

    transition:
        border-color .2s,
        background-color .2s,
        transform .15s;

}


.plugins-toolbar select:hover {

    transform: translateY(-1px);

}


.plugins-toolbar select:focus {

    border-color: var(--accent);

}

.custom-select {

    position: relative;

    width: 120px;

}


.select-button {

    width: 100%;
    height: 40px;

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

    background: var(--panel);

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

    border-radius: 10px;

    color: var(--text);

    padding: 0 12px;

    cursor: pointer;

}


.select-button img {

    width: 14px;
    height: 14px;

    transition: .2s;

}


.custom-select.open .select-button img {

    transform: rotate(180deg);

}


.select-menu {

    position: absolute;

    top: calc(100% + 6px);

    left: 0;

    width: 100%;

    background: var(--panel);

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

    border-radius: 10px;

    padding: 6px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    transition: .2s;

    z-index: 100;

}


.custom-select.open .select-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


.select-menu div {

    padding: 9px;

    border-radius: 7px;

    cursor: pointer;

}


.select-menu div:hover {

    background: var(--panel-hover);

}

/* AUTH */

.auth-page {
    min-height: calc(100vh - 104px);

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

    padding: 30px;
}


.auth-card {

    width: 420px;

    background: var(--panel);

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

    border-radius: 16px;

    padding: 32px;

    box-shadow: 0 20px 50px rgba(0,0,0,.25);

}


.auth-card h1 {

    margin: 0 0 8px;

    font-size: 28px;

}


.auth-card p {

    color: var(--muted);

    margin-bottom: 25px;

}



.auth-card form {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.auth-card label {

    font-size: 14px;

    color: var(--muted);

}


.auth-card input {

    width: 100%;

    background: #11151d;

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

    border-radius: 10px;

    padding: 13px;

    color: white;

    font-size: 15px;

    outline: none;

    transition: .15s;

}


.auth-card input:focus {

    border-color: var(--accent);

    box-shadow: 0 0 0 3px rgba(59,130,246,.15);

}


/* PASSWORD FIELD */

.password-field {

    position: relative;

}


.password-field input {

    padding-right: 45px;

}


.toggle-password {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    background: transparent;

    border: none;

    color: var(--muted);

    cursor: pointer;

    font-size: 18px;

}


.toggle-password:hover {

    color: white;

}



/* OPTIONS */

.auth-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 8px 0;

}


.auth-options a {

    color: var(--accent);

    text-decoration: none;

    font-size: 14px;

}


.auth-options a:hover {

    text-decoration: underline;

}



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

    margin-top:10px;
    margin-bottom:10px;

    color:#9ca3af;
    font-size:14px;

    cursor:pointer;
}

.checkbox input{
    width:18px;
    height:18px;

    margin:0;

    flex-shrink:0;

    accent-color:#3b82f6;
}



/* BUTTON */

.auth-button {

    margin-top: 10px;

    height: 45px;

    border: none;

    border-radius: 10px;

    background: var(--accent);

    color: white;

    font-weight: 600;

    font-size: 15px;

    cursor: pointer;

    transition: .15s;

}


.auth-button:hover {

    filter: brightness(1.1);

}



/* FOOTER */

.auth-footer {

    margin-top: 25px;

    text-align: center;

    color: var(--muted);

    font-size: 14px;

}


.auth-footer a {

    color: var(--accent);

    text-decoration: none;

    font-weight: 600;

}


.auth-footer a:hover {

    text-decoration: underline;

}

.eye-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.verify-card {
    text-align:center;
}

.verify-icon {
    width: 90px;
    height: 90px;

    margin: 0 auto 12px;

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

    border-radius: 12px;
}

.verify-icon img {
    width: 48px;
    height: 48px;

    display: block;

    object-fit: contain;
}

}

.verify-card p {

    color:#9ca3af;

    line-height:1.6;

    margin-bottom:30px;

}

.server-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;
}


.create-server{

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

    padding:10px 18px;

    background:#3b82f6;
    color:white;

    border-radius:10px;

    text-decoration:none;

    font-weight:600;

    transition:.2s;
}


.create-server:hover{

    background:#2563eb;

}

.modal-overlay{
    position:fixed;
    inset:0;

    display:none;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px);

    z-index:999;
}


.modal-overlay.open{
    display:flex;
}

@keyframes openModal{

    from{
        opacity:0;
        transform:scale(.95) translateY(20px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.server-modal {
    width: 420px;

    background: #111827;
    color: white;

    border: 1px solid #263244;
    border-radius: 18px;

    padding: 30px;

    box-shadow: 0 20px 60px rgba(0,0,0,.5);

    animation: modalOpen .2s ease;
}


.server-modal h2 {
    margin-top:0;
    margin-bottom:25px;
}


.server-modal input,
.server-modal textarea,
.server-modal select {

    width:100%;

    box-sizing:border-box;

    padding:12px;

    margin-bottom:15px;

    background:#0b1220;

    color:white;

    border:1px solid #263244;

    border-radius:10px;

}


.server-modal textarea {
    resize:none;
    height:100px;
}


.server-modal button {

    padding:12px 22px;

    border:none;
    border-radius:10px;

    background:#3b82f6;

    color:white;

    font-weight:600;

    cursor:pointer;

}

.create-server.disabled {

    background:#374151;
    color:#9ca3af;

    cursor:not-allowed;

}


.create-server.disabled:hover {

    background:#4b5563;

}

.delete-server {

    background:#ef4444;
    color:white;

    cursor:pointer;

    margin-top:30px;
    border-radius:8px;

}


nav .delete-server:hover {

    background:#dc2626 !important;

}

.delete-server:hover {

    background:#dc2626 !important;

}

.file-manager {
    display:flex;
    overflow: hidden;
    height:calc(100vh - 160px);
    max-height: calc(100vh - 160px);
}


/* LEFT TREE */

.file-tree {
    width:260px;
    border-right:1px solid var(--border);
    overflow:auto;
}


.tree-item {
    display:flex;
    align-items:center;
    gap:8px;

    padding:7px 12px;

    cursor:pointer;
    border-radius:6px;

    transition:.15s;
}


.tree-item:hover {
    background:var(--hover);
}


/* RIGHT CONTENT */

.file-content {
    flex:1;
    width:100%;
    display:flex;
    flex-direction:column;
    overflow: hidden;
}


/* TOOLBAR */

.file-toolbar-box,
.breadcrumbs-box {

    background:var(--surface);

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

    border-radius:12px;

    margin:12px;

}


.file-toolbar-box {
    width:fit-content;
    max-width:1100px;
    padding:10px;
}


.file-toolbar {

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

}


.toolbar-action {

    display:flex;
    align-items:center;

    gap:10px;

    height:48px;

    padding:10px 14px;

    background:var(--accent);

    border-radius:10px;
    border:none;
    cursor:pointer;
    color:white;

}


.toolbar-action:hover {

    filter:brightness(1.15);

}


.toolbar-action img {

    width:24px;
    height:24px;

}


.toolbar-action span {

    display:block;

}


.toolbar-action b {

    font-size:16px;
    font-weight:700;

}


/* BREADCRUMBS */

.breadcrumbs-box {

    max-width:1075px;
    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

}


.breadcrumb-icon,
.breadcrumb-arrow {

    width:16px;
    height:16px;

}


#breadcrumbs span {

    cursor:pointer;

    color:#9ca3af;

}


#breadcrumbs span:hover {

    color:white;

}


/* SELECT CHECKBOX */

.select-all,
.file-checkbox {

    appearance:none;
    -webkit-appearance:none;

    width:16px;
    height:16px;

    border:1px solid #5c5c5c;

    border-radius:4px;

    background:#2b2b2b;

    cursor:pointer;

    transition:.15s;

}


.select-all:hover,
.file-checkbox:hover {

    background:#3a3a3a;

    border-color:#777;

}


.select-all:checked,
.file-checkbox:checked {

    background:#9ca3af;

    border-color:#9ca3af;

}


.select-all:checked:hover,
.file-checkbox:checked:hover {

    background:#c0c4cc;

    border-color:#c0c4cc;

}


/* FILE LIST */

.file-list {
    overflow: hidden;
    flex:1;

    display:flex;

    flex-direction:column;

    gap:6px;

    padding:16px;

    max-width:1100px;

}


.file-header,
.file-row {
    display:grid;

    grid-template-columns:
        32px
        24px
        1fr
        auto
        90px
        140px;

    align-items:center;

    gap:10px;

}

.file-header > :nth-child(4) {
    transform: translateX(-10px);
}

.file-actions {

    display:flex;
    gap:4px;

}


.file-actions button {

    display:flex;

    align-items:center;
    justify-content:center;

    width:30px;
    height:30px;

    border:none;
    border-radius:6px;

    background:transparent;

    cursor:pointer;

}


.file-actions button:hover {

    background:var(--panel-hover);

}


.file-actions img {

    width:16px;
    height:16px;

}

.file-header {

    color:#7d8796;

    font-size:13px;

    font-weight:600;

    padding:0 14px 10px;

}


.file-row {

    background:var(--surface);

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

    border-radius:00px;

    padding:12px 14px;

    cursor:pointer;

    transition:.15s;

}


.file-row:hover {

    background:var(--surface-hover);

    border-color:var(--accent);

}


.file-icon {

    width:24px;
    height:24px;

}


.file-checkbox {

    justify-self:center;

}


.file-size,
.file-modified {

    color:#8b8b8b;

    font-size:13px;

}

nav a {

    display:flex;
    align-items:center;

    gap:12px;

    font-size:16px;
    font-weight:600;

    justify-content:flex-start;

    line-height:1;

}


nav a img {

    width:24px;
    height:24px;

}

nav a span{

    display:flex;

    align-items:center;

}

.file-view-toolbar button {
    width: 34px;
    height: 34px;

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

    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;

    cursor: pointer;
}

.file-view-toolbar button img {
    width: 18px;
    height: 18px;

    object-fit: contain;
}

.file-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px);
    max-height: calc(100vh - 160px);
    overflow: hidden;
    min-height: 0;
    padding: 12px;
    gap: 12px;
}

.file-view-toolbar {
    flex: 0 0 auto;
}

.file-view-header {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;

    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;

    flex-shrink: 0;
}

.file-view-header button {
    width: 34px;
    height: 34px;

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

    padding: 0;
    border: 0;
    border-radius: 7px;

    background: transparent;
    cursor: pointer;
}

.file-view-header button:hover {
    background: var(--hover);
}

.file-view-header button img {
    width: 18px;
    height: 18px;
}

.file-view-title {
    display: flex;
    align-items: center;
    gap: 9px;

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

.file-view-title img {
    width: 20px;
    height: 20px;
}

.file-editor {
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 160px);
    overflow: hidden;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.selection-bar{

    position:fixed;

    left:50%;
    bottom:85px;

    transform:translateX(-50%);

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

    padding:8px;

    background:rgba(26,26,30,.92);

    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:14px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.45),
        inset 0 1px rgba(255,255,255,.05);

    z-index:1000;

}

.selection-bar button{

    display:flex;

    align-items:center;

    gap:8px;

    height:42px;

    padding:0 16px;

    border:none;

    border-radius:10px;

    font-size:14px;
    font-weight:700;

    color:white;

    cursor:pointer;

    transition:.15s;

}

.selection-bar img{

    width:18px;
    height:18px;

}

#cutSelected,
#copySelected,
#pasteSelected{
    background:var(--accent);
}

#cutSelected:hover,
#copySelected:hover,
#pasteSelected:hover{
    filter:brightness(1.1);
}

#deleteSelected{
    background:#dc2626;
}

#deleteSelected:hover{
    background:#ef4444;
}

[hidden] {
    display:none !important;
}

.modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    align-items:center;
    justify-content:center;

    z-index:9999;

}


.modal.open {

    display:flex;

}


.modal-box {

    width:380px;

    background:var(--surface);

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

    border-radius:14px;

    padding:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}


.modal-box p {

    margin:0 0 14px;

    font-size:16px;

    font-weight:600;

}


.modal-box input {

    width:100%;

    box-sizing:border-box;

    padding:10px 12px;

    border-radius:8px;

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

    background:var(--background);

    color:var(--text);

    outline:none;

    font-size:14px;

}


.modal-box input:focus {

    border-color:var(--accent);

}


.modal-actions {

    display:flex;

    justify-content:flex-end;

    gap:8px;

    margin-top:18px;

}


.modal-actions button {

    padding:9px 16px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-weight:600;

    background:var(--surface-hover);

    color:var(--text);

}


.modal-actions button:hover {

    background:var(--border);

}


#promptConfirm {

    background:var(--accent);

    color:white;

}


#promptConfirm:hover {

    filter:brightness(1.1);

}

.modal,
.modal input,
.modal button {

    font-family:"Inter", sans-serif;

}

.file-row:hover .file-icon {
    transform: scale(1.1);
}

.file-icon {
    transition: .15s;
}

.editor-toolbar button {

    width:34px;
    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:none;

    border-radius:8px;

    background:transparent;

    cursor:pointer;

}


.editor-toolbar button:hover {

    background:var(--surface-hover);

}


.editor-toolbar button img {

    width:18px;
    height:18px;

}

.editor-toolbar {

    height:48px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 14px;

    background:var(--surface);

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

}


.toolbar-group {

    display:flex;

    gap:4px;

    padding:4px;

    background:var(--background);

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

    border-radius:10px;

}


.toolbar-group button {

    width:32px;
    height:32px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:none;

    border-radius:7px;

    background:transparent;

    cursor:pointer;

}


.toolbar-group button:hover {

    background:var(--surface-hover);

}


.toolbar-group img {

    width:17px;
    height:17px;

}


.toolbar-divider {

    width:1px;

    height:24px;

    background:var(--border);

}


.editor-file-title {

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

}


.editor-file-title img {

    width:20px;
    height:20px;

}


.toolbar-spacer {

    flex:1;

}

#editorStatus {

    display:flex;

    align-items:center;

    gap:6px;

    font-size:13px;

    font-weight:500;

    color:#8b8b8b;

    transition:.2s;

    user-select:none;

}

#editorStatus.unsaved {

    color:#ef4444;

}


#editorStatus.saved {

    color:#22c55e;

}