:root {

    --background-color: #f4f4f9;

    --editor-bg: #ffffff;

    --text-color: #333;

    --toolbar-bg: #ffffff;

    --toolbar-border: #ddd;

    --button-bg: #fff;

    --button-hover-bg: #e9e9e9;

    --panel-bg: #fff;

    --panel-border: #ccc;

    --separator-color: #ccc;

}



[data-theme="dark"] {

    --background-color: #1a1a2e;

    --editor-bg: #22223b;

    --text-color: #e0e0e0;

    --toolbar-bg: #161625;

    --toolbar-border: #3a3a4c;

    --button-bg: #333;

    --button-hover-bg: #444;

    --panel-bg: #161625;

    --panel-border: #555;

    --separator-color: #555;

}



body {

    font-family: 'Arial', sans-serif;

    margin: 0;

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

    color: var(--text-color);

    transition: background-color 0.3s, color 0.3s;

}



.toolbar {

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

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

    padding: 10px 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    position: sticky;

    top: 0;

    z-index: 1000;

}



.controls, .action-buttons {

    display: flex;

    align-items: center;

}



.controls button, .action-buttons button, .controls select {

    padding: 8px 12px;

    margin: 0 2px;

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

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

    color: var(--text-color);

    cursor: pointer;

    font-size: 14px;

    transition: background-color 0.2s, color 0.2s;

}



.controls button:hover, .action-buttons button:hover {

    background-color: var(--button-hover-bg);

}



.controls .separator {

    margin: 0 10px;

    color: var(--separator-color);

}



.document-editor {

    width: 800px;

    min-height: 600px;

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

    color: var(--text-color);

    margin: 30px auto;

    padding: 40px;

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

    box-shadow: 0 0 10px rgba(0,0,0,0.1);

    line-height: 1.6;

    outline: none;

    transition: background-color 0.3s, color 0.3s;

}



.settings-panel {

    position: fixed;

    top: 60px;

    right: 20px;

    width: 300px;

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

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

    padding: 20px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);

    z-index: 1010;

    display: none;

}



.setting-group {

    margin-bottom: 15px;

}



.settings-panel label {

    display: block;

    margin-bottom: 5px;

    font-weight: bold;

}



.settings-panel input[type="text"] {

    width: 100%;

    padding: 8px;

    box-sizing: border-box;

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

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

    color: var(--text-color);

}



.settings-panel button {

    width: 100%;

    padding: 10px;

    margin-top: 10px;

}



.modal-panel {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 350px;

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

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

    padding: 25px;

    box-shadow: 0 4px 15px rgba(0,0,0,0.3);

    z-index: 1020;

    display: none;

    text-align: center;

}



.modal-panel select, .modal-panel input[type="file"] {

    width: 100%;

    padding: 10px;

    margin-bottom: 15px;

    box-sizing: border-box;

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

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

    color: var(--text-color);

}



.modal-panel button {

    margin: 5px;

    padding: 10px 20px;

}



.view {

    display: none;

}



.active-view {

    display: block;

}



.dashboard-header {

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

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

    padding: 20px 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



#new-doc-btn {

    padding: 10px 15px;

    border: none;

    background-color: #007bff;

    color: white;

    cursor: pointer;

    border-radius: 5px;

    transition: background-color 0.2s;

}



#new-doc-btn:hover {

    background-color: #0056b3;

}



.document-grid {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    padding: 40px;

    max-width: 1200px;

    margin: 0 auto;

}



.document-card {

    width: 250px;

    min-height: 150px;

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

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

    border-radius: 8px;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);

    cursor: pointer;

    padding: 20px;

    transition: transform 0.2s, box-shadow 0.2s;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.document-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 16px rgba(0,0,0,0.2);

}



.document-card h3 {

    margin-top: 0;

    font-size: 1.2em;

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

    padding-bottom: 10px;

    color: var(--text-color);

}



.document-card p {

    font-size: 0.9em;

    color: var(--separator-color);

    flex-grow: 1;

}



.document-card button {

    margin-top: 10px;

    padding: 5px 10px;

    background-color: #dc3545;

    color: white;

    border: none;

    border-radius: 3px;

    cursor: pointer;

    align-self: flex-end;

}



#editor-view {

    min-height: 100vh;

}



#document-title-input {

    font-size: 1.5em;

    font-weight: bold;

    border: none;

    background: transparent;

    color: var(--text-color);

    padding: 0;

    margin: 0;

    outline: none;

    max-width: 300px;

    transition: background-color 0.2s;

}



#document-title-input:hover,

#document-title-input:focus {

    background-color: var(--button-hover-bg);

    border-radius: 3px;

}