usermanagement/translation/calendar

static/css/base.css

@@ -120,6 +120,27 @@ body {
     align-items: center;
 }
 
+.nav-toggle {
+    display: none;
+    background: transparent;
+    border: 1px solid var(--panel-b);
+    color: var(--text);
+    padding: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+.nav-toggle span { display:block; width:20px; height:2px; background: var(--text); margin:4px 0; }
+
+@media (max-width: 768px) {
+    .nav-content { flex-wrap: wrap; gap: 10px; }
+    .nav-toggle { display: inline-block; }
+    .nav-links { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
+    .nav-links.open { display: flex; }
+    .nav-links a, .nav-links button, .nav-links .inline-form { width: 100%; }
+    .nav-links a, .nav-links button { justify-content: flex-start; padding: 10px 12px; border: 1px solid var(--panel-b); border-radius: 10px; }
+    .user-info { order: -1; margin: 0 0 4px 0; }
+}
+
 .nav-links a,
 .nav-links button {
     display: flex;
@@ -151,9 +172,9 @@ body {
     background: var(--accent);
 }
 
-.nav-logout {
-    color: #ef4444 !important;
-}
+.nav-logout { color: #ef4444 !important; }
+.btn-link { background: transparent; border: 1px solid var(--panel-b); border-radius: 8px; }
+.btn-link:hover { background: rgba(255,255,255,0.06); }
 
 .nav-admin {
     color: var(--accent) !important;

static/css/index.css

@@ -39,6 +39,14 @@ h1 {
     margin-bottom: 16px
 }
 
+@media (max-width: 640px) {
+    .controls { flex-direction: column; align-items: stretch; }
+    .controls form { width: 100%; }
+    .controls .seg { width: 100%; justify-content: space-between; }
+    .controls-actions { width: 100%; }
+    .controls-actions .btn { width: 100%; justify-content: center; }
+}
+
 .controls form {
     display: flex;
     align-items: center;
@@ -67,6 +75,24 @@ h1 {
     cursor: pointer
 }
 
+/* Calendar button */
+.controls-actions .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    border: 1px solid #2a2b44;
+    background: linear-gradient(180deg, #19213b 0%, #141a30 100%);
+    color: #e6e6e6;
+    text-decoration: none;
+    font-weight: 650;
+    box-shadow: 0 6px 18px rgba(0,0,0,.25);
+    transition: transform .08s ease, filter .12s ease, border-color .12s ease;
+}
+.controls-actions .btn:hover { filter: brightness(1.08); border-color: #3b4aa0; transform: translateY(-1px); }
+.controls-actions .btn:active { transform: translateY(0); }
+
 .seg {
     display: inline-flex;
     background: #0f0f17;
@@ -99,6 +125,10 @@ h1 {
     }
 }
 
+@media (max-width: 640px) {
+    .grid { grid-template-columns: 1fr; gap: 12px; }
+}
+
 .card {
     background: var(--panel);
     border: 1px solid var(--panel-b);
@@ -111,6 +141,12 @@ h1 {
     cursor: pointer
 }
 
+@media (max-width: 640px) {
+    .card { gap: 10px; }
+    .poster { width: 90px; height: 135px; }
+    .title { font-size: .98rem; }
+}
+
 .card:active,
 .card:hover {
     transform: translateY(-2px);
@@ -260,6 +296,12 @@ h1 {
     border-bottom: 1px solid #20223a
 }
 
+@media (max-width: 640px) {
+    .modal-header { grid-template-columns: 90px 1fr 36px; gap: 10px; }
+    .m-poster { width: 90px; height: 135px; }
+    .m-title { font-size: 1.05rem; }
+}
+
 .m-poster {
     display: flex;
     flex-direction: column;
@@ -344,6 +386,10 @@ h1 {
     }
 }
 
+@media (max-width: 640px) {
+    .modal-body { grid-template-columns: 1fr; }
+}
+
 .section-block {
     background: #101327;
     border: 1px solid #20223a;