WebOrbiton
v3.0.0.0

FlatlyPage

← Changes All versions
4,281 lines · 87.8 KB
  1. *,
  2. *::before,
  3. *::after {
  4. box-sizing: border-box;
  5. margin: 0;
  6. padding: 0;
  7. }
  8. ​
  9. :root {
  10. --bg: #040405;
  11. --bg-elevated: #09090b;
  12. --bg-card: #0f0f12;
  13. --bg-hover: #16161a;
  14. --border: #1a1a1f;
  15. --border-focus: #2a2a31;
  16. --text: #f2f2f4;
  17. --text-muted: #8a8a95;
  18. --text-subtle: #62626c;
  19. --accent: #7c6df2;
  20. --accent-hover: #8f82f5;
  21. --accent-dim: rgba(124, 109, 242, 0.14);
  22. --success: #34c48c;
  23. --error: #f0546a;
  24. --blue: #4fb2e8;
  25. --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 22px rgba(0, 0, 0, 0.45);
  26. --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  27. --radius: 12px;
  28. --radius-sm: 8px;
  29. color-scheme: dark;
  30. ​
  31. --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  32. --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  33. --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  34. --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  35. }
  36. ​
  37. [data-theme="light"] {
  38. color-scheme: light;
  39. --bg: #f7f7f9;
  40. --bg-elevated: #ffffff;
  41. --bg-card: #f1f1f4;
  42. --bg-hover: #e9e9ee;
  43. --border: #e4e4ea;
  44. --border-focus: #d3d3dc;
  45. --text: #17171b;
  46. --text-muted: #6a6a76;
  47. --text-subtle: #9a9aa5;
  48. --accent: #6c5ce7;
  49. --accent-hover: #5c4bd6;
  50. --accent-dim: rgba(108, 92, 231, 0.1);
  51. --success: #34c48c;
  52. --error: #f0546a;
  53. --blue: #4fb2e8;
  54. --shadow-card: 0 1px 2px rgba(20, 20, 30, 0.04), 0 6px 16px rgba(20, 20, 30, 0.05);
  55. --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  56. --radius: 12px;
  57. --radius-sm: 8px;
  58. ​
  59. --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  60. --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  61. --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  62. --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  63. }
  64. ​
  65. body {
  66. font-family: var(--font-interface, 'Space Grotesk'), -apple-system, BlinkMacSystemFont, sans-serif;
  67. background: var(--bg);
  68. color: var(--text);
  69. line-height: 1.5;
  70. -webkit-font-smoothing: antialiased;
  71. }
  72. ​
  73. button,
  74. input,
  75. select,
  76. textarea {
  77. font-family: inherit;
  78. }
  79. ​
  80. a {
  81. color: inherit;
  82. text-decoration: none;
  83. }
  84. ​
  85. select option,
  86. select optgroup {
  87. background-color: var(--bg-elevated);
  88. color: var(--text);
  89. }
  90. ​
  91. .app {
  92. display: flex;
  93. min-height: 100vh;
  94. }
  95. ​
  96. .sidebar {
  97. width: 260px;
  98. background: var(--bg-elevated);
  99. border-right: 1px solid var(--border);
  100. display: flex;
  101. flex-direction: column;
  102. position: fixed;
  103. top: 0;
  104. left: 0;
  105. bottom: 0;
  106. z-index: 100;
  107. transition: transform var(--transition-smooth);
  108. will-change: transform;
  109. }
  110. ​
  111. .sidebar-header {
  112. padding: 20px 20px 16px;
  113. height: 64.5px;
  114. border-bottom: 1px solid var(--border);
  115. }
  116. ​
  117. .sidebar-logo {
  118. font-size: 1.125rem;
  119. font-weight: 700;
  120. display: flex;
  121. align-items: center;
  122. gap: 10px;
  123. }
  124. ​
  125. .sidebar-logo span {
  126. font-size: 0.75rem;
  127. font-weight: 500;
  128. background: var(--bg-card);
  129. padding: 2px 8px;
  130. border-radius: 4px;
  131. color: var(--text-muted);
  132. transition: background var(--transition-base), color var(--transition-base);
  133. }
  134. ​
  135. .sidebar-nav {
  136. padding: 16px 12px;
  137. flex: 1;
  138. overflow-y: auto;
  139. }
  140. ​
  141. .nav-section {
  142. margin-bottom: 24px;
  143. }
  144. ​
  145. .nav-label {
  146. font-size: 0.6875rem;
  147. font-weight: 600;
  148. text-transform: uppercase;
  149. letter-spacing: 0.05em;
  150. color: var(--text-subtle);
  151. padding: 0 12px;
  152. margin-bottom: 8px;
  153. }
  154. ​
  155. .nav-item {
  156. display: flex;
  157. align-items: center;
  158. gap: 12px;
  159. padding: 10px 12px;
  160. font-size: 0.875rem;
  161. color: var(--text-muted);
  162. border-radius: var(--radius-sm);
  163. transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  164. margin-bottom: 2px;
  165. will-change: background, color;
  166. }
  167. ​
  168. .nav-item:hover {
  169. background: var(--bg-hover);
  170. color: var(--text);
  171. transform: translateX(2px);
  172. }
  173. ​
  174. .nav-item.active {
  175. background: var(--bg-card);
  176. color: var(--text);
  177. }
  178. ​
  179. .nav-item svg {
  180. width: 18px;
  181. height: 18px;
  182. flex-shrink: 0;
  183. transition: transform var(--transition-fast);
  184. }
  185. ​
  186. .nav-item:hover svg {
  187. transform: scale(1.05);
  188. }
  189. ​
  190. .sidebar-footer {
  191. padding: 16px;
  192. border-top: 1px solid var(--border);
  193. }
  194. ​
  195. .user-menu {
  196. display: flex;
  197. align-items: center;
  198. gap: 12px;
  199. padding: 10px 12px;
  200. border-radius: var(--radius-sm);
  201. transition: background var(--transition-base);
  202. }
  203. ​
  204. .user-menu:hover {
  205. background: var(--bg-hover);
  206. }
  207. ​
  208. .user-avatar {
  209. width: 32px;
  210. height: 32px;
  211. background: linear-gradient(135deg, #94a3b8, #cbd5e1);
  212. border-radius: 8px;
  213. display: flex;
  214. align-items: center;
  215. justify-content: center;
  216. font-size: 0.75rem;
  217. font-weight: 600;
  218. transition: transform var(--transition-base);
  219. }
  220. ​
  221. .user-menu:hover .user-avatar {
  222. transform: scale(1.05);
  223. }
  224. ​
  225. [data-theme="dark"] .user-avatar {
  226. background: linear-gradient(135deg, #333, #555);
  227. }
  228. ​
  229. .user-info {
  230. flex: 1;
  231. }
  232. ​
  233. .user-name {
  234. font-size: 0.875rem;
  235. font-weight: 500;
  236. }
  237. ​
  238. .user-role {
  239. font-size: 0.75rem;
  240. color: var(--text-muted);
  241. }
  242. ​
  243. .main {
  244. flex: 1;
  245. margin-left: 260px;
  246. transition: margin-left var(--transition-smooth);
  247. }
  248. ​
  249. .main-header {
  250. position: sticky;
  251. top: 0;
  252. z-index: 50;
  253. background: rgba(248, 250, 252, 0.8);
  254. backdrop-filter: blur(12px);
  255. border-bottom: 1px solid var(--border);
  256. padding: 0 32px;
  257. transition: background var(--transition-base), border-color var(--transition-base);
  258. }
  259. ​
  260. [data-theme="dark"] .main-header {
  261. background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
  262. }
  263. ​
  264. .main-header-inner {
  265. display: flex;
  266. align-items: center;
  267. justify-content: space-between;
  268. height: 64px;
  269. }
  270. ​
  271. .main-header h1 {
  272. font-size: 1rem;
  273. font-weight: 600;
  274. }
  275. ​
  276. .header-actions {
  277. display: flex;
  278. align-items: center;
  279. gap: 12px;
  280. }
  281. ​
  282. .mobile-nav-toggle {
  283. display: none;
  284. align-items: center;
  285. justify-content: center;
  286. width: 44px;
  287. height: 44px;
  288. padding: 0;
  289. background: transparent;
  290. border: none;
  291. border-radius: var(--radius-sm);
  292. cursor: pointer;
  293. color: var(--text);
  294. transition: background var(--transition-base), transform var(--transition-fast);
  295. }
  296. ​
  297. .mobile-nav-toggle:hover {
  298. background: var(--bg-hover);
  299. }
  300. ​
  301. .mobile-nav-toggle:active {
  302. transform: scale(0.95);
  303. }
  304. ​
  305. .mobile-nav-toggle svg {
  306. width: 24px;
  307. height: 24px;
  308. transition: transform var(--transition-base);
  309. }
  310. ​
  311. @media (max-width: 768px) {
  312. .mobile-nav-toggle {
  313. display: flex;
  314. }
  315. }
  316. ​
  317. .main-content {
  318. padding: 32px;
  319. max-width: 2100px;
  320. }
  321. ​
  322. .btn {
  323. display: inline-flex;
  324. align-items: center;
  325. justify-content: center;
  326. gap: 8px;
  327. padding: 10px 18px;
  328. font-size: 0.875rem;
  329. font-weight: 500;
  330. border-radius: var(--radius-sm);
  331. cursor: pointer;
  332. transition: all var(--transition-base);
  333. border: none;
  334. font-family: inherit;
  335. will-change: transform, opacity;
  336. }
  337. ​
  338. .btn:active {
  339. transform: scale(0.98);
  340. }
  341. ​
  342. .btn svg {
  343. width: 16px;
  344. height: 16px;
  345. transition: transform var(--transition-fast);
  346. }
  347. ​
  348. .btn:hover svg {
  349. transform: scale(1.1);
  350. }
  351. ​
  352. .btn-primary {
  353. background: var(--text);
  354. color: var(--bg);
  355. }
  356. ​
  357. .btn-primary:hover {
  358. opacity: 0.9;
  359. transform: translateY(-1px);
  360. }
  361. ​
  362. .btn-secondary {
  363. background: var(--bg-elevated);
  364. color: var(--text);
  365. border: 1px solid var(--border);
  366. }
  367. ​
  368. .btn-secondary:hover {
  369. background: var(--bg-hover);
  370. border-color: var(--border-focus);
  371. transform: translateY(-1px);
  372. }
  373. ​
  374. .btn-ghost {
  375. background: transparent;
  376. color: var(--text-muted);
  377. }
  378. ​
  379. .btn-ghost:hover {
  380. background: var(--bg-hover);
  381. color: var(--text);
  382. }
  383. ​
  384. .btn-danger {
  385. background: var(--error);
  386. color: white;
  387. }
  388. ​
  389. .btn-danger:hover {
  390. opacity: 0.9;
  391. transform: translateY(-1px);
  392. }
  393. ​
  394. .btn-sm {
  395. padding: 6px 12px;
  396. font-size: 0.8125rem;
  397. }
  398. ​
  399. .btn-icon {
  400. padding: 8px;
  401. }
  402. ​
  403. .message {
  404. padding: 14px 18px;
  405. border-radius: var(--radius-sm);
  406. margin-bottom: 24px;
  407. font-size: 0.875rem;
  408. display: flex;
  409. align-items: center;
  410. gap: 12px;
  411. animation: slideIn var(--transition-smooth) ease-out;
  412. }
  413. ​
  414. @keyframes slideIn {
  415. from {
  416. opacity: 0;
  417. transform: translateY(-10px);
  418. }
  419. ​
  420. to {
  421. opacity: 1;
  422. transform: translateY(0);
  423. }
  424. }
  425. ​
  426. .message.success {
  427. background: rgba(34, 197, 94, 0.1);
  428. border: 1px solid rgba(34, 197, 94, 0.3);
  429. color: var(--success);
  430. }
  431. ​
  432. [data-theme="light"] .message.success {
  433. background: rgba(22, 163, 74, 0.1);
  434. border: 1px solid rgba(22, 163, 74, 0.3);
  435. }
  436. ​
  437. .message.error {
  438. background: rgba(239, 68, 68, 0.1);
  439. border: 1px solid rgba(239, 68, 68, 0.3);
  440. color: var(--error);
  441. }
  442. ​
  443. [data-theme="light"] .message.error {
  444. background: rgba(220, 38, 38, 0.1);
  445. border: 1px solid rgba(220, 38, 38, 0.3);
  446. }
  447. ​
  448. .form-section {
  449. margin-bottom: 32px;
  450. }
  451. ​
  452. .form-section-title {
  453. font-size: 0.9375rem;
  454. font-weight: 600;
  455. margin-bottom: 16px;
  456. }
  457. ​
  458. .form-row {
  459. display: grid;
  460. grid-template-columns: repeat(2, 1fr);
  461. gap: 16px;
  462. }
  463. ​
  464. .form-row-3 {
  465. display: grid;
  466. grid-template-columns: repeat(3, 1fr);
  467. gap: 16px;
  468. }
  469. ​
  470. .form-group {
  471. margin-bottom: 20px;
  472. }
  473. ​
  474. .form-group:last-child {
  475. margin-bottom: 0;
  476. }
  477. ​
  478. .form-label {
  479. display: block;
  480. font-size: 0.8125rem;
  481. font-weight: 500;
  482. margin-bottom: 8px;
  483. color: var(--text-muted);
  484. transition: color var(--transition-fast);
  485. }
  486. ​
  487. .form-input,
  488. .form-textarea,
  489. .form-select {
  490. width: 100%;
  491. padding: 12px 14px;
  492. background: var(--bg-elevated);
  493. border: 1px solid var(--border);
  494. border-radius: var(--radius-sm);
  495. color: var(--text);
  496. font-size: 0.875rem;
  497. font-family: inherit;
  498. transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-fast);
  499. }
  500. ​
  501. .form-input:focus,
  502. .form-textarea:focus,
  503. .form-select:focus {
  504. outline: none;
  505. border-color: var(--border-focus);
  506. transform: translateY(-1px);
  507. }
  508. ​
  509. .form-textarea {
  510. min-height: 100px;
  511. resize: vertical;
  512. }
  513. ​
  514. .form-textarea.form-code {
  515. min-height: 280px;
  516. font-family: ui-monospace, Consolas, monospace;
  517. font-size: 0.8rem;
  518. line-height: 1.55;
  519. white-space: pre;
  520. overflow-x: auto;
  521. tab-size: 4;
  522. }
  523. ​
  524. .custom-html-item {
  525. padding: 16px;
  526. margin-top: 16px;
  527. border: 1px solid var(--border);
  528. border-radius: var(--radius, 12px);
  529. }
  530. ​
  531. .custom-html-head {
  532. display: flex;
  533. gap: 8px;
  534. align-items: center;
  535. margin-bottom: 10px;
  536. }
  537. ​
  538. .custom-html-head .form-input {
  539. flex: 1;
  540. min-width: 0;
  541. }
  542. ​
  543. .custom-html-item .form-textarea.form-code {
  544. min-height: 140px;
  545. }
  546. ​
  547. .analytics-switch {
  548. display: flex;
  549. align-items: center;
  550. gap: 12px;
  551. }
  552. ​
  553. .analytics-switch .form-switch {
  554. flex-shrink: 0;
  555. }
  556. ​
  557. .analytics-switch > label {
  558. font-size: 0.875rem;
  559. color: var(--text-muted);
  560. cursor: pointer;
  561. }
  562. ​
  563. .analytics-table {
  564. width: 100%;
  565. }
  566. ​
  567. .analytics-table th:last-child,
  568. .analytics-row-actions {
  569. text-align: right;
  570. white-space: nowrap;
  571. }
  572. ​
  573. .analytics-row-actions .btn + .btn {
  574. margin-left: 6px;
  575. }
  576. ​
  577. .analytics-name,
  578. .analytics-empty {
  579. font-weight: 600;
  580. }
  581. ​
  582. .analytics-actions {
  583. display: flex;
  584. align-items: center;
  585. flex-wrap: wrap;
  586. gap: 8px;
  587. }
  588. ​
  589. .analytics-actions [hidden] {
  590. display: none !important;
  591. }
  592. ​
  593. .analytics-status {
  594. font-size: 0.8rem;
  595. color: var(--text-muted);
  596. }
  597. ​
  598. .analytics-status.is-error {
  599. color: var(--error, #ef4444);
  600. }
  601. ​
  602. .card:has(> .analytics-table) {
  603. overflow-x: auto;
  604. }
  605. ​
  606. .form-hint {
  607. font-size: 0.75rem;
  608. color: var(--text-subtle);
  609. margin-top: 6px;
  610. }
  611. ​
  612. .form-switch {
  613. display: inline-block;
  614. position: relative;
  615. width: 48px;
  616. height: 24px;
  617. }
  618. ​
  619. .form-switch input {
  620. opacity: 0;
  621. width: 0;
  622. height: 0;
  623. }
  624. ​
  625. .form-switch label {
  626. position: absolute;
  627. cursor: pointer;
  628. top: 0;
  629. left: 0;
  630. right: 0;
  631. bottom: 0;
  632. background-color: var(--border);
  633. transition: background-color var(--transition-smooth);
  634. border-radius: 24px;
  635. }
  636. ​
  637. .form-switch label:before {
  638. position: absolute;
  639. content: "";
  640. height: 16px;
  641. width: 16px;
  642. left: 4px;
  643. bottom: 4px;
  644. background-color: white;
  645. transition: transform var(--transition-smooth);
  646. border-radius: 50%;
  647. will-change: transform;
  648. }
  649. ​
  650. .form-switch input:checked+label {
  651. background-color: var(--blue);
  652. }
  653. ​
  654. .form-switch input:checked+label:before {
  655. transform: translateX(24px);
  656. }
  657. ​
  658. .card {
  659. background: var(--bg-elevated);
  660. border: 1px solid var(--border);
  661. border-radius: var(--radius);
  662. overflow: hidden;
  663. transition: border-color var(--transition-base), transform var(--transition-base);
  664. }
  665. ​
  666. .card:hover {
  667. border-color: var(--border-focus);
  668. }
  669. ​
  670. .card-header {
  671. padding: 20px 24px;
  672. border-bottom: 1px solid var(--border);
  673. display: flex;
  674. align-items: center;
  675. justify-content: space-between;
  676. }
  677. ​
  678. .card-title {
  679. font-size: 0.9375rem;
  680. font-weight: 600;
  681. }
  682. ​
  683. .card-body {
  684. padding: 24px;
  685. }
  686. ​
  687. .checkbox-label {
  688. display: inline-flex;
  689. align-items: center;
  690. gap: 12px;
  691. cursor: pointer;
  692. font-size: 0.875rem;
  693. font-weight: 500;
  694. color: var(--text);
  695. transition: all var(--transition-fast);
  696. padding: 2px 0;
  697. }
  698. ​
  699. .checkbox-label:hover {
  700. color: var(--accent);
  701. }
  702. ​
  703. .checkbox-label input[type="checkbox"] {
  704. position: relative;
  705. width: 20px;
  706. height: 20px;
  707. cursor: pointer;
  708. appearance: none;
  709. -webkit-appearance: none;
  710. background: var(--bg-card);
  711. border: 2px solid var(--border);
  712. border-radius: 6px;
  713. transition: all var(--transition-base);
  714. flex-shrink: 0;
  715. }
  716. ​
  717. .checkbox-label input[type="checkbox"]:hover {
  718. border-color: var(--border-focus);
  719. transform: scale(1.05);
  720. }
  721. ​
  722. .checkbox-label input[type="checkbox"]:checked {
  723. background: var(--blue);
  724. border-color: var(--blue);
  725. }
  726. ​
  727. .checkbox-label input[type="checkbox"]:checked::after {
  728. content: '';
  729. position: absolute;
  730. left: 6px;
  731. top: 2px;
  732. width: 4px;
  733. height: 9px;
  734. border: solid white;
  735. border-width: 0 2px 2px 0;
  736. transform: rotate(45deg);
  737. }
  738. ​
  739. .checkbox-label input[type="checkbox"]:focus {
  740. outline: none;
  741. box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  742. }
  743. ​
  744. .checkbox-label input[type="checkbox"]:active {
  745. transform: scale(0.95);
  746. }
  747. ​
  748. .checkbox-label span {
  749. user-select: none;
  750. transition: color var(--transition-fast);
  751. }
  752. ​
  753. .table {
  754. width: 100%;
  755. border-collapse: collapse;
  756. }
  757. ​
  758. .table th,
  759. .table td {
  760. padding: 14px 20px;
  761. text-align: left;
  762. }
  763. ​
  764. .table th {
  765. font-size: 0.75rem;
  766. font-weight: 600;
  767. text-transform: uppercase;
  768. letter-spacing: 0.05em;
  769. color: var(--text-subtle);
  770. background: var(--bg-card);
  771. border-bottom: 1px solid var(--border);
  772. }
  773. ​
  774. .table td {
  775. border-bottom: 1px solid var(--border);
  776. font-size: 0.875rem;
  777. transition: background var(--transition-fast);
  778. }
  779. ​
  780. .table tr:hover td {
  781. background: var(--bg-hover);
  782. }
  783. ​
  784. .table tr:last-child td {
  785. border-bottom: none;
  786. }
  787. ​
  788. .product-title {
  789. font-weight: 500;
  790. }
  791. ​
  792. .product-slug {
  793. color: var(--text-muted);
  794. font-size: 0.75rem;
  795. font-family: ui-monospace, monospace;
  796. }
  797. ​
  798. .product-date {
  799. color: var(--text-muted);
  800. font-size: 0.8125rem;
  801. }
  802. ​
  803. .product-actions {
  804. display: flex;
  805. gap: 8px;
  806. }
  807. ​
  808. .empty-state {
  809. text-align: center;
  810. padding: 64px 24px;
  811. color: var(--text-muted);
  812. animation: fadeIn var(--transition-smooth) ease-out;
  813. }
  814. ​
  815. @keyframes fadeIn {
  816. from {
  817. opacity: 0;
  818. }
  819. ​
  820. to {
  821. opacity: 1;
  822. }
  823. }
  824. ​
  825. .empty-state-icon {
  826. width: 48px;
  827. height: 48px;
  828. margin: 0 auto 16px;
  829. opacity: 0.3;
  830. transition: opacity var(--transition-base), transform var(--transition-base);
  831. }
  832. ​
  833. .empty-state:hover .empty-state-icon {
  834. opacity: 0.5;
  835. transform: scale(1.05);
  836. }
  837. ​
  838. .empty-state h3 {
  839. font-size: 1rem;
  840. margin-bottom: 8px;
  841. color: var(--text);
  842. }
  843. ​
  844. .empty-state p {
  845. font-size: 0.875rem;
  846. margin-bottom: 24px;
  847. }
  848. ​
  849. .editor-wrapper {
  850. background: var(--bg-elevated);
  851. border-radius: var(--radius);
  852. border: 1px solid var(--border);
  853. }
  854. ​
  855. .editor-toolbar {
  856. display: flex;
  857. align-items: center;
  858. justify-content: space-between;
  859. padding: 12px 16px;
  860. border-bottom: 1px solid var(--border);
  861. background: var(--bg-card);
  862. border-radius: var(--radius) var(--radius) 0 0;
  863. flex-wrap: wrap;
  864. gap: 12px;
  865. }
  866. ​
  867. .editor-toolbar-left {
  868. display: flex;
  869. align-items: center;
  870. gap: 12px;
  871. }
  872. ​
  873. .editor-toolbar-right {
  874. display: flex;
  875. align-items: center;
  876. gap: 8px;
  877. flex-wrap: wrap;
  878. }
  879. ​
  880. .blocks-container {
  881. padding: 24px;
  882. min-height: 400px;
  883. }
  884. ​
  885. .block-item {
  886. background: var(--bg-card);
  887. border: 1px solid var(--border);
  888. border-radius: var(--radius-sm);
  889. margin-bottom: 12px;
  890. transition: border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  891. position: relative;
  892. will-change: transform, border-color;
  893. }
  894. ​
  895. .block-item:hover {
  896. border-color: var(--border-focus);
  897. }
  898. ​
  899. .block-item.dragging {
  900. opacity: 0.5;
  901. border-color: var(--blue);
  902. transform: scale(0.98);
  903. }
  904. ​
  905. .block-item.drag-over {
  906. border-color: var(--blue);
  907. background: rgba(59, 130, 246, 0.05);
  908. transform: scale(1.02);
  909. }
  910. ​
  911. .block-item.expanded {
  912. border-color: var(--blue);
  913. }
  914. ​
  915. .block-header {
  916. display: flex;
  917. align-items: center;
  918. gap: 12px;
  919. padding: 12px 16px;
  920. border-bottom: 1px solid transparent;
  921. cursor: pointer;
  922. user-select: none;
  923. transition: background var(--transition-fast);
  924. }
  925. ​
  926. ​
  927. .block-item.expanded .block-header {
  928. border-bottom-color: var(--border);
  929. }
  930. ​
  931. .block-drag {
  932. cursor: grab;
  933. color: var(--text-subtle);
  934. padding: 4px;
  935. display: flex;
  936. align-items: center;
  937. transition: color var(--transition-fast), transform var(--transition-fast);
  938. }
  939. ​
  940. .block-drag:hover {
  941. color: var(--text);
  942. transform: scale(1.1);
  943. }
  944. ​
  945. .block-drag:active {
  946. cursor: grabbing;
  947. }
  948. ​
  949. .block-type {
  950. font-size: 0.6875rem;
  951. font-weight: 600;
  952. text-transform: uppercase;
  953. letter-spacing: 0.05em;
  954. color: var(--text-muted);
  955. background: var(--bg-elevated);
  956. padding: 4px 8px;
  957. border-radius: 4px;
  958. transition: background var(--transition-base), color var(--transition-base);
  959. }
  960. ​
  961. .block-title {
  962. flex: 1;
  963. font-size: 0.875rem;
  964. font-weight: 500;
  965. white-space: nowrap;
  966. overflow: hidden;
  967. text-overflow: ellipsis;
  968. }
  969. ​
  970. .block-id-input {
  971. background: var(--bg-elevated);
  972. border: 1px solid var(--border);
  973. color: var(--text-muted);
  974. padding: 4px 8px;
  975. border-radius: 4px;
  976. font-size: 0.75rem;
  977. transition: all var(--transition-base);
  978. }
  979. ​
  980. .block-id-input:focus {
  981. outline: none;
  982. border-color: var(--blue);
  983. color: var(--text);
  984. background: var(--bg-card);
  985. transform: scale(1.02);
  986. }
  987. ​
  988. .block-id-input::placeholder {
  989. color: var(--text-subtle);
  990. }
  991. ​
  992. .block-actions {
  993. display: flex;
  994. gap: 4px;
  995. opacity: 0;
  996. transition: opacity var(--transition-base);
  997. }
  998. ​
  999. .block-item:hover .block-actions {
  1000. opacity: 1;
  1001. }
  1002. ​
  1003. .block-toggle {
  1004. background: none;
  1005. border: none;
  1006. color: var(--text-muted);
  1007. cursor: pointer;
  1008. padding: 4px;
  1009. transition: color var(--transition-fast), transform var(--transition-fast);
  1010. display: flex;
  1011. align-items: center;
  1012. }
  1013. ​
  1014. .block-toggle:hover {
  1015. color: var(--text);
  1016. transform: scale(1.1);
  1017. }
  1018. ​
  1019. .block-toggle:active {
  1020. transform: scale(0.95);
  1021. }
  1022. ​
  1023. .block-toggle svg {
  1024. width: 18px;
  1025. height: 18px;
  1026. transition: transform var(--transition-smooth);
  1027. }
  1028. ​
  1029. .block-content {
  1030. padding: 16px;
  1031. display: none;
  1032. background: var(--bg-elevated);
  1033. animation: expandContent var(--transition-smooth) ease-out;
  1034. }
  1035. ​
  1036. @keyframes expandContent {
  1037. from {
  1038. opacity: 0;
  1039. transform: translateY(-10px);
  1040. }
  1041. ​
  1042. to {
  1043. opacity: 1;
  1044. transform: translateY(0);
  1045. }
  1046. }
  1047. ​
  1048. .block-item.expanded .block-content {
  1049. display: block;
  1050. }
  1051. ​
  1052. .block-item.expanded .block-toggle-arrow svg {
  1053. transform: rotate(180deg);
  1054. }
  1055. ​
  1056. .block-field {
  1057. margin-bottom: 16px;
  1058. }
  1059. ​
  1060. .block-field:last-child {
  1061. margin-bottom: 0;
  1062. }
  1063. ​
  1064. .block-field-label {
  1065. font-size: 0.75rem;
  1066. font-weight: 500;
  1067. color: var(--text-muted);
  1068. margin-bottom: 6px;
  1069. display: flex;
  1070. align-items: center;
  1071. gap: 8px;
  1072. }
  1073. ​
  1074. .block-field-input {
  1075. width: 100%;
  1076. padding: 10px 12px;
  1077. background: var(--bg-card);
  1078. border: 1px solid var(--border);
  1079. border-radius: 6px;
  1080. color: var(--text);
  1081. font-size: 0.875rem;
  1082. font-family: inherit;
  1083. transition: border-color var(--transition-base), background var(--transition-base), transform var(--transition-fast);
  1084. }
  1085. ​
  1086. .block-field-input:focus {
  1087. outline: none;
  1088. border-color: var(--border-focus);
  1089. transform: translateY(-1px);
  1090. box-shadow: 0 0 0 3px rgba(64, 64, 64, 0.1);
  1091. }
  1092. ​
  1093. .block-field-textarea {
  1094. min-height: 80px;
  1095. resize: vertical;
  1096. }
  1097. ​
  1098. .link-input-wrapper {
  1099. position: relative;
  1100. }
  1101. ​
  1102. .link-input-wrapper .form-input {
  1103. padding-right: 40px;
  1104. }
  1105. ​
  1106. .link-page-btn {
  1107. position: absolute;
  1108. right: 4px;
  1109. top: 50%;
  1110. transform: translateY(-50%);
  1111. background: var(--bg-hover);
  1112. border: none;
  1113. padding: 6px 8px;
  1114. border-radius: 4px;
  1115. cursor: pointer;
  1116. color: var(--text-muted);
  1117. display: flex;
  1118. align-items: center;
  1119. transition: color var(--transition-base), background var(--transition-base), transform var(--transition-fast);
  1120. }
  1121. ​
  1122. .link-page-btn:hover {
  1123. color: var(--text);
  1124. background: var(--border);
  1125. transform: translateY(-50%) scale(1.05);
  1126. }
  1127. ​
  1128. .link-page-btn:active {
  1129. transform: translateY(-50%) scale(0.95);
  1130. }
  1131. ​
  1132. .repeater-items {
  1133. margin-top: 12px;
  1134. }
  1135. ​
  1136. .repeater-item {
  1137. background: var(--bg-elevated);
  1138. border: 1px solid var(--border);
  1139. border-radius: 6px;
  1140. margin-bottom: 8px;
  1141. overflow: hidden;
  1142. transition: border-color var(--transition-base), transform var(--transition-fast);
  1143. }
  1144. ​
  1145. .repeater-item:hover {
  1146. border-color: var(--border-focus);
  1147. }
  1148. ​
  1149. .repeater-item-header {
  1150. display: flex;
  1151. align-items: center;
  1152. justify-content: space-between;
  1153. padding: 10px 12px;
  1154. background: var(--bg-card);
  1155. border-bottom: 1px solid transparent;
  1156. cursor: pointer;
  1157. transition: background var(--transition-fast);
  1158. }
  1159. ​
  1160. .repeater-item-header:hover {
  1161. background: var(--bg-hover);
  1162. }
  1163. ​
  1164. .repeater-item.expanded .repeater-item-header {
  1165. border-bottom-color: var(--border);
  1166. }
  1167. ​
  1168. .repeater-item-title {
  1169. font-size: 0.8125rem;
  1170. font-weight: 500;
  1171. }
  1172. ​
  1173. .repeater-item-actions {
  1174. display: flex;
  1175. gap: 4px;
  1176. }
  1177. ​
  1178. .repeater-item-content {
  1179. padding: 12px;
  1180. display: none;
  1181. animation: expandContent var(--transition-smooth) ease-out;
  1182. }
  1183. ​
  1184. .repeater-item.expanded .repeater-item-content {
  1185. display: block;
  1186. }
  1187. ​
  1188. .repeater-add {
  1189. display: flex;
  1190. align-items: center;
  1191. justify-content: center;
  1192. gap: 6px;
  1193. width: 100%;
  1194. padding: 10px;
  1195. background: transparent;
  1196. border: 1px dashed var(--border);
  1197. border-radius: 6px;
  1198. color: var(--text-muted);
  1199. font-size: 0.8125rem;
  1200. cursor: pointer;
  1201. transition: all var(--transition-base);
  1202. margin-top: 8px;
  1203. }
  1204. ​
  1205. .repeater-add:hover {
  1206. border-color: var(--border-focus);
  1207. color: var(--text);
  1208. background: var(--bg-hover);
  1209. transform: scale(1.01);
  1210. }
  1211. ​
  1212. .repeater-add:active {
  1213. transform: scale(0.99);
  1214. }
  1215. ​
  1216. .add-block-btn {
  1217. display: flex;
  1218. align-items: center;
  1219. justify-content: center;
  1220. gap: 8px;
  1221. width: 100%;
  1222. padding: 16px;
  1223. background: transparent;
  1224. border: 2px dashed var(--border);
  1225. border-radius: var(--radius-sm);
  1226. color: var(--text-muted);
  1227. font-size: 0.875rem;
  1228. font-weight: 500;
  1229. cursor: pointer;
  1230. transition: all var(--transition-base);
  1231. }
  1232. ​
  1233. .add-block-btn:hover {
  1234. border-color: var(--border-focus);
  1235. color: var(--text);
  1236. background: var(--bg-hover);
  1237. transform: scale(1.01);
  1238. }
  1239. ​
  1240. .add-block-btn:active {
  1241. transform: scale(0.99);
  1242. }
  1243. ​
  1244. .modal-overlay {
  1245. display: none;
  1246. position: fixed;
  1247. inset: 0;
  1248. background: rgba(0, 0, 0, 0.75);
  1249. z-index: 1000;
  1250. align-items: center;
  1251. justify-content: center;
  1252. padding: 20px;
  1253. animation: fadeIn var(--transition-base) ease-out;
  1254. backdrop-filter: blur(4px);
  1255. transition: backdrop-filter var(--transition-base);
  1256. }
  1257. ​
  1258. [data-theme="light"] .modal-overlay {
  1259. background: rgba(15, 23, 42, 0.5);
  1260. }
  1261. ​
  1262. .modal-overlay.active {
  1263. display: flex;
  1264. }
  1265. ​
  1266. .modal {
  1267. background: var(--bg-elevated);
  1268. border: 1px solid var(--border);
  1269. border-radius: var(--radius);
  1270. width: 100%;
  1271. max-width: 700px;
  1272. max-height: 85vh;
  1273. overflow: hidden;
  1274. display: flex;
  1275. flex-direction: column;
  1276. animation: modalSlideIn var(--transition-smooth) cubic-bezier(0.16, 1, 0.3, 1);
  1277. will-change: transform, opacity;
  1278. }
  1279. ​
  1280. @keyframes modalSlideIn {
  1281. from {
  1282. opacity: 0;
  1283. transform: scale(0.95) translateY(20px);
  1284. }
  1285. ​
  1286. to {
  1287. opacity: 1;
  1288. transform: scale(1) translateY(0);
  1289. }
  1290. }
  1291. ​
  1292. [data-theme="light"] .modal {
  1293. box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  1294. }
  1295. ​
  1296. .modal-header {
  1297. display: flex;
  1298. align-items: center;
  1299. justify-content: space-between;
  1300. padding: 20px 24px;
  1301. border-bottom: 1px solid var(--border);
  1302. flex-shrink: 0;
  1303. }
  1304. ​
  1305. .modal-title {
  1306. font-size: 1rem;
  1307. font-weight: 600;
  1308. }
  1309. ​
  1310. .modal-close {
  1311. background: none;
  1312. border: none;
  1313. color: var(--text-muted);
  1314. cursor: pointer;
  1315. padding: 4px;
  1316. display: flex;
  1317. transition: color var(--transition-fast), transform var(--transition-fast);
  1318. }
  1319. ​
  1320. .modal-close:hover {
  1321. color: var(--text);
  1322. transform: scale(1.1);
  1323. }
  1324. ​
  1325. .modal-close:active {
  1326. transform: scale(0.95);
  1327. }
  1328. ​
  1329. .modal-body {
  1330. padding: 24px;
  1331. overflow-y: auto;
  1332. flex: 1;
  1333. scrollbar-width: thin;
  1334. scrollbar-color: var(--border-focus) transparent;
  1335. }
  1336. ​
  1337. .modal-body::-webkit-scrollbar {
  1338. width: 6px;
  1339. }
  1340. ​
  1341. .modal-body::-webkit-scrollbar-track {
  1342. background: transparent;
  1343. margin-block: 4px;
  1344. }
  1345. ​
  1346. .modal-body::-webkit-scrollbar-thumb {
  1347. background-color: var(--border);
  1348. border-radius: 10px;
  1349. transition: background-color var(--transition-base);
  1350. }
  1351. ​
  1352. .modal-body::-webkit-scrollbar-thumb:hover {
  1353. background-color: var(--text-muted);
  1354. }
  1355. ​
  1356. .block-types-grid {
  1357. display: grid;
  1358. grid-template-columns: repeat(3, 1fr);
  1359. gap: 12px;
  1360. }
  1361. ​
  1362. .block-type-card {
  1363. background: var(--bg-card);
  1364. border: 1px solid var(--border);
  1365. border-radius: var(--radius-sm);
  1366. padding: 20px;
  1367. text-align: center;
  1368. cursor: pointer;
  1369. transition: all var(--transition-base);
  1370. will-change: transform, border-color;
  1371. }
  1372. ​
  1373. .block-type-card:hover {
  1374. border-color: var(--border-focus);
  1375. background: var(--bg-hover);
  1376. transform: translateY(-4px);
  1377. }
  1378. ​
  1379. .block-type-card:active {
  1380. transform: translateY(-2px);
  1381. }
  1382. ​
  1383. [data-theme="light"] .block-type-card:hover {
  1384. box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  1385. }
  1386. ​
  1387. .block-type-card svg {
  1388. width: 32px;
  1389. height: 32px;
  1390. margin-bottom: 12px;
  1391. color: var(--text-muted);
  1392. transition: transform var(--transition-base), color var(--transition-base);
  1393. }
  1394. ​
  1395. .block-type-card:hover svg {
  1396. transform: scale(1.1);
  1397. color: var(--text);
  1398. }
  1399. ​
  1400. .block-type-card h4 {
  1401. font-size: 0.875rem;
  1402. font-weight: 500;
  1403. margin-bottom: 4px;
  1404. }
  1405. ​
  1406. .block-type-card p {
  1407. font-size: 0.75rem;
  1408. color: var(--text-muted);
  1409. }
  1410. ​
  1411. .modal-actions {
  1412. display: flex;
  1413. gap: 12px;
  1414. justify-content: flex-end;
  1415. margin-top: 24px;
  1416. }
  1417. ​
  1418. .icon-select {
  1419. display: flex;
  1420. gap: 8px;
  1421. flex-wrap: wrap;
  1422. margin-top: 8px;
  1423. }
  1424. ​
  1425. .icon-option {
  1426. width: 36px;
  1427. height: 36px;
  1428. display: flex;
  1429. align-items: center;
  1430. justify-content: center;
  1431. background: var(--bg-elevated);
  1432. border: 1px solid var(--border);
  1433. border-radius: 6px;
  1434. cursor: pointer;
  1435. transition: all var(--transition-base);
  1436. }
  1437. ​
  1438. .icon-option:hover {
  1439. border-color: var(--border-focus);
  1440. transform: scale(1.1);
  1441. }
  1442. ​
  1443. .icon-option:active {
  1444. transform: scale(0.95);
  1445. }
  1446. ​
  1447. .icon-option.selected {
  1448. border-color: var(--blue);
  1449. background: rgba(59, 130, 246, 0.1);
  1450. transform: scale(1.05);
  1451. }
  1452. ​
  1453. .icon-option svg {
  1454. width: 18px;
  1455. height: 18px;
  1456. color: var(--text-muted);
  1457. transition: color var(--transition-fast);
  1458. }
  1459. ​
  1460. .icon-option:hover svg {
  1461. color: var(--text);
  1462. }
  1463. ​
  1464. .page-selector {
  1465. position: absolute;
  1466. top: 100%;
  1467. left: 0;
  1468. right: 0;
  1469. background: var(--bg-elevated);
  1470. border: 1px solid var(--border);
  1471. border-radius: var(--radius-sm);
  1472. box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  1473. z-index: 100;
  1474. display: none;
  1475. max-height: 200px;
  1476. overflow-y: auto;
  1477. animation: dropdownSlideIn var(--transition-base) ease-out;
  1478. }
  1479. ​
  1480. @keyframes dropdownSlideIn {
  1481. from {
  1482. opacity: 0;
  1483. transform: translateY(-10px);
  1484. }
  1485. ​
  1486. to {
  1487. opacity: 1;
  1488. transform: translateY(0);
  1489. }
  1490. }
  1491. ​
  1492. [data-theme="light"] .page-selector {
  1493. box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  1494. }
  1495. ​
  1496. .page-selector.active {
  1497. display: block;
  1498. }
  1499. ​
  1500. .page-selector-item {
  1501. padding: 10px 12px;
  1502. cursor: pointer;
  1503. font-size: 0.875rem;
  1504. border-bottom: 1px solid var(--border);
  1505. transition: background var(--transition-fast), transform var(--transition-fast);
  1506. }
  1507. ​
  1508. .page-selector-item:last-child {
  1509. border-bottom: none;
  1510. }
  1511. ​
  1512. .page-selector-item:hover {
  1513. background: var(--bg-hover);
  1514. transform: translateX(4px);
  1515. }
  1516. ​
  1517. .page-selector-item small {
  1518. color: var(--text-muted);
  1519. display: block;
  1520. font-size: 0.75rem;
  1521. }
  1522. ​
  1523. .settings-tabs {
  1524. display: flex;
  1525. gap: 4px;
  1526. margin-bottom: 24px;
  1527. background: var(--bg-card);
  1528. padding: 4px;
  1529. border-radius: var(--radius-sm);
  1530. }
  1531. ​
  1532. .settings-tab {
  1533. flex: 1;
  1534. padding: 10px 16px;
  1535. background: transparent;
  1536. border: none;
  1537. color: var(--text-muted);
  1538. font-size: 0.875rem;
  1539. font-weight: 500;
  1540. border-radius: 6px;
  1541. cursor: pointer;
  1542. transition: all var(--transition-base);
  1543. position: relative;
  1544. }
  1545. ​
  1546. .settings-tab:hover {
  1547. color: var(--text);
  1548. }
  1549. ​
  1550. .settings-tab.active {
  1551. background: var(--bg-elevated);
  1552. color: var(--text);
  1553. }
  1554. ​
  1555. .settings-panel {
  1556. display: none;
  1557. animation: fadeIn var(--transition-base) ease-out;
  1558. }
  1559. ​
  1560. .settings-panel.active {
  1561. display: block;
  1562. }
  1563. ​
  1564. .image-text {
  1565. padding: 60px 0;
  1566. }
  1567. ​
  1568. .image-text-grid {
  1569. display: grid;
  1570. grid-template-columns: 1fr 1fr;
  1571. gap: 60px;
  1572. align-items: center;
  1573. }
  1574. ​
  1575. .image-text-grid.image-text-right {
  1576. grid-template-columns: 1fr 1fr;
  1577. direction: rtl;
  1578. }
  1579. ​
  1580. .image-text-grid.image-text-right>* {
  1581. direction: ltr;
  1582. }
  1583. ​
  1584. .image-text-image img {
  1585. width: 100%;
  1586. height: auto;
  1587. border-radius: 12px;
  1588. display: block;
  1589. transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
  1590. }
  1591. ​
  1592. .image-text-image:hover img {
  1593. transform: scale(1.02);
  1594. }
  1595. ​
  1596. [data-theme="light"] .image-text-image:hover img {
  1597. box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  1598. }
  1599. ​
  1600. .image-text-content h2 {
  1601. font-size: 2.5rem;
  1602. font-weight: 700;
  1603. margin: 16px 0 12px;
  1604. line-height: 1.2;
  1605. }
  1606. ​
  1607. .image-text-content .text-content {
  1608. font-size: 1rem;
  1609. line-height: 1.6;
  1610. color: var(--text-muted);
  1611. margin: 20px 0 24px;
  1612. }
  1613. ​
  1614. .image-text-content .btn {
  1615. display: inline-block;
  1616. margin-top: 12px;
  1617. }
  1618. ​
  1619. .product-cards {
  1620. padding: 60px 0;
  1621. }
  1622. ​
  1623. .product-cards .section-header {
  1624. margin-bottom: 48px;
  1625. text-align: center;
  1626. }
  1627. ​
  1628. .products-grid {
  1629. display: grid;
  1630. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  1631. gap: 32px;
  1632. }
  1633. ​
  1634. .product-card {
  1635. background: var(--bg-card);
  1636. border: 1px solid var(--border);
  1637. border-radius: 12px;
  1638. padding: 32px 24px;
  1639. text-align: center;
  1640. transition: all var(--transition-smooth);
  1641. will-change: transform, border-color;
  1642. }
  1643. ​
  1644. .product-card:hover {
  1645. border-color: var(--blue);
  1646. box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1);
  1647. transform: translateY(-8px);
  1648. }
  1649. ​
  1650. [data-theme="light"] .product-card:hover {
  1651. box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  1652. }
  1653. ​
  1654. .product-image {
  1655. margin-bottom: 20px;
  1656. display: flex;
  1657. justify-content: center;
  1658. height: 48px;
  1659. }
  1660. ​
  1661. .product-image img {
  1662. width: 48px;
  1663. height: 48px;
  1664. object-fit: contain;
  1665. transition: transform var(--transition-base);
  1666. }
  1667. ​
  1668. .product-card:hover .product-image img {
  1669. transform: scale(1.1);
  1670. }
  1671. ​
  1672. .product-card h3 {
  1673. font-size: 1.125rem;
  1674. font-weight: 600;
  1675. margin: 16px 0 8px;
  1676. }
  1677. ​
  1678. .product-description {
  1679. font-size: 0.875rem;
  1680. color: var(--text-muted);
  1681. line-height: 1.5;
  1682. margin: 12px 0 16px;
  1683. }
  1684. ​
  1685. .product-features {
  1686. list-style: none;
  1687. padding: 0;
  1688. margin: 16px 0 24px;
  1689. text-align: left;
  1690. }
  1691. ​
  1692. .product-features li {
  1693. font-size: 0.875rem;
  1694. color: var(--text-muted);
  1695. padding: 6px 0 6px 24px;
  1696. position: relative;
  1697. }
  1698. ​
  1699. .product-features li::before {
  1700. content: "✓";
  1701. position: absolute;
  1702. left: 0;
  1703. color: var(--success);
  1704. font-weight: 600;
  1705. }
  1706. ​
  1707. .product-card .btn-sm {
  1708. font-size: 0.8125rem;
  1709. padding: 8px 16px;
  1710. }
  1711. ​
  1712. ::selection {
  1713. background-color: rgba(56, 115, 44, 0.855);
  1714. color: #fafafa;
  1715. }
  1716. ​
  1717. ::-moz-selection {
  1718. background-color: rgba(56, 115, 44, 0.855);
  1719. color: #fafafa;
  1720. }
  1721. ​
  1722. [data-theme="light"] ::selection {
  1723. background-color: rgba(37, 99, 235, 0.3);
  1724. color: #0f172a;
  1725. }
  1726. ​
  1727. [data-theme="light"] ::-moz-selection {
  1728. background-color: rgba(37, 99, 235, 0.3);
  1729. color: #0f172a;
  1730. }
  1731. ​
  1732. .form-input::selection,
  1733. .form-textarea::selection,
  1734. .block-field-input::selection,
  1735. .blocks-container ::selection {
  1736. background-color: rgb(69, 71, 177);
  1737. color: #fafafa;
  1738. }
  1739. ​
  1740. .form-input::-moz-selection,
  1741. .form-textarea::-moz-selection,
  1742. .block-field-input::-moz-selection,
  1743. .blocks-container ::-moz-selection {
  1744. background-color: rgb(69, 71, 177);
  1745. color: #fafafa;
  1746. }
  1747. ​
  1748. [data-theme="light"] .form-input::selection,
  1749. [data-theme="light"] .form-textarea::selection,
  1750. [data-theme="light"] .block-field-input::selection,
  1751. [data-theme="light"] .blocks-container ::selection {
  1752. background-color: rgba(37, 99, 235, 0.3);
  1753. color: #0f172a;
  1754. }
  1755. ​
  1756. [data-theme="light"] .form-input::-moz-selection,
  1757. [data-theme="light"] .form-textarea::-moz-selection,
  1758. [data-theme="light"] .block-field-input::-moz-selection,
  1759. [data-theme="light"] .blocks-container ::-moz-selection {
  1760. background-color: rgba(37, 99, 235, 0.3);
  1761. color: #0f172a;
  1762. }
  1763. ​
  1764. @media (max-width: 1024px) {
  1765. .sidebar {
  1766. width: 220px;
  1767. }
  1768. ​
  1769. .main {
  1770. margin-left: 220px;
  1771. }
  1772. ​
  1773. .block-types-grid {
  1774. grid-template-columns: repeat(2, 1fr);
  1775. }
  1776. ​
  1777. .main-content {
  1778. padding: 24px;
  1779. }
  1780. }
  1781. ​
  1782. @media (max-width: 768px) {
  1783. ​
  1784. .sidebar {
  1785. transform: translateX(-100%);
  1786. width: 85%;
  1787. max-width: 320px;
  1788. transition: transform var(--transition-smooth) cubic-bezier(0.4, 0, 0.2, 1);
  1789. box-shadow: none;
  1790. }
  1791. ​
  1792. .sidebar.open {
  1793. transform: translateX(0);
  1794. box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  1795. }
  1796. ​
  1797. .sidebar::before {
  1798. content: '';
  1799. position: fixed;
  1800. inset: 0;
  1801. background: rgba(0, 0, 0, 0.6);
  1802. opacity: 0;
  1803. visibility: hidden;
  1804. transition: opacity var(--transition-smooth), visibility var(--transition-smooth);
  1805. z-index: -1;
  1806. left: 100%;
  1807. width: 100vw;
  1808. }
  1809. ​
  1810. [data-theme="light"] .sidebar::before {
  1811. background: rgba(15, 23, 42, 0.4);
  1812. }
  1813. ​
  1814. .sidebar.open::before {
  1815. opacity: 1;
  1816. visibility: visible;
  1817. }
  1818. ​
  1819. .nav-item {
  1820. padding: 14px 16px;
  1821. font-size: 0.9375rem;
  1822. margin-bottom: 4px;
  1823. }
  1824. ​
  1825. .nav-item svg {
  1826. width: 20px;
  1827. height: 20px;
  1828. }
  1829. ​
  1830. .nav-label {
  1831. font-size: 0.75rem;
  1832. padding: 0 16px;
  1833. margin-bottom: 12px;
  1834. }
  1835. ​
  1836. .sidebar-nav {
  1837. padding: 20px 16px;
  1838. }
  1839. ​
  1840. .sidebar-header {
  1841. padding: 24px 20px 20px;
  1842. }
  1843. ​
  1844. .sidebar-footer {
  1845. padding: 20px;
  1846. }
  1847. ​
  1848. .user-menu {
  1849. padding: 14px 16px;
  1850. }
  1851. ​
  1852. .user-avatar {
  1853. width: 40px;
  1854. height: 40px;
  1855. font-size: 0.875rem;
  1856. }
  1857. ​
  1858. .user-name {
  1859. font-size: 0.9375rem;
  1860. }
  1861. ​
  1862. .main {
  1863. margin-left: 0;
  1864. }
  1865. ​
  1866. .main-header {
  1867. padding: 0 16px;
  1868. }
  1869. ​
  1870. .main-header-inner {
  1871. height: 60px;
  1872. }
  1873. ​
  1874. .main-header h1 {
  1875. font-size: 0.9375rem;
  1876. }
  1877. ​
  1878. .header-actions {
  1879. gap: 8px;
  1880. }
  1881. ​
  1882. .main-content {
  1883. padding: 20px 16px;
  1884. }
  1885. ​
  1886. .btn {
  1887. padding: 12px 20px;
  1888. font-size: 0.9375rem;
  1889. min-height: 44px;
  1890. }
  1891. ​
  1892. .btn-sm {
  1893. padding: 10px 14px;
  1894. font-size: 0.875rem;
  1895. min-height: 40px;
  1896. }
  1897. ​
  1898. .btn-icon {
  1899. padding: 10px;
  1900. min-width: 44px;
  1901. min-height: 44px;
  1902. }
  1903. ​
  1904. .form-row,
  1905. .form-row-3 {
  1906. grid-template-columns: 1fr;
  1907. gap: 0;
  1908. }
  1909. ​
  1910. .form-group {
  1911. margin-bottom: 24px;
  1912. }
  1913. ​
  1914. .form-label {
  1915. font-size: 0.875rem;
  1916. margin-bottom: 10px;
  1917. }
  1918. ​
  1919. .form-input,
  1920. .form-textarea,
  1921. .form-select {
  1922. padding: 14px 16px;
  1923. font-size: 1rem;
  1924. min-height: 48px;
  1925. border-radius: var(--radius);
  1926. }
  1927. ​
  1928. .form-textarea {
  1929. min-height: 120px;
  1930. }
  1931. ​
  1932. .form-hint {
  1933. font-size: 0.8125rem;
  1934. margin-top: 8px;
  1935. }
  1936. ​
  1937. .card {
  1938. border-radius: var(--radius);
  1939. }
  1940. ​
  1941. .card-header {
  1942. padding: 16px 20px;
  1943. flex-direction: column;
  1944. align-items: flex-start;
  1945. gap: 12px;
  1946. }
  1947. ​
  1948. .card-title {
  1949. font-size: 1rem;
  1950. }
  1951. ​
  1952. .card-body {
  1953. padding: 20px;
  1954. }
  1955. ​
  1956. .table {
  1957. display: block;
  1958. }
  1959. ​
  1960. .table thead {
  1961. display: none;
  1962. }
  1963. ​
  1964. .table tbody {
  1965. display: flex;
  1966. flex-direction: column;
  1967. gap: 12px;
  1968. }
  1969. ​
  1970. .table tr {
  1971. display: flex;
  1972. flex-direction: column;
  1973. background: var(--bg-card);
  1974. border: 1px solid var(--border);
  1975. border-radius: var(--radius-sm);
  1976. padding: 16px;
  1977. }
  1978. ​
  1979. .table tr:hover td {
  1980. background: transparent;
  1981. }
  1982. ​
  1983. .table td {
  1984. padding: 8px 0;
  1985. border-bottom: none;
  1986. display: flex;
  1987. justify-content: space-between;
  1988. align-items: center;
  1989. }
  1990. ​
  1991. .table td::before {
  1992. content: attr(data-label);
  1993. font-size: 0.75rem;
  1994. font-weight: 600;
  1995. text-transform: uppercase;
  1996. letter-spacing: 0.05em;
  1997. color: var(--text-subtle);
  1998. }
  1999. ​
  2000. .product-actions {
  2001. justify-content: flex-end;
  2002. padding-top: 12px;
  2003. border-top: 1px solid var(--border);
  2004. margin-top: 8px;
  2005. }
  2006. ​
  2007. .product-title {
  2008. font-size: 1rem;
  2009. }
  2010. ​
  2011. .editor-toolbar {
  2012. padding: 16px;
  2013. flex-direction: column;
  2014. align-items: stretch;
  2015. }
  2016. ​
  2017. .editor-toolbar-left,
  2018. .editor-toolbar-right {
  2019. width: 100%;
  2020. justify-content: space-between;
  2021. }
  2022. ​
  2023. .editor-toolbar-right {
  2024. flex-wrap: wrap;
  2025. gap: 8px;
  2026. }
  2027. ​
  2028. .blocks-container {
  2029. padding: 16px;
  2030. min-height: 300px;
  2031. }
  2032. ​
  2033. .block-header {
  2034. padding: 14px 16px;
  2035. gap: 10px;
  2036. flex-wrap: wrap;
  2037. }
  2038. ​
  2039. .block-type {
  2040. font-size: 0.625rem;
  2041. padding: 3px 6px;
  2042. }
  2043. ​
  2044. .block-title {
  2045. flex: 1 1 100%;
  2046. order: 3;
  2047. margin-top: 8px;
  2048. white-space: normal;
  2049. }
  2050. ​
  2051. .block-id-input {
  2052. display: none;
  2053. }
  2054. ​
  2055. .block-actions {
  2056. opacity: 1;
  2057. }
  2058. ​
  2059. .block-content {
  2060. padding: 16px;
  2061. }
  2062. ​
  2063. .block-field {
  2064. margin-bottom: 20px;
  2065. }
  2066. ​
  2067. .block-field-input {
  2068. padding: 12px 14px;
  2069. font-size: 1rem;
  2070. min-height: 48px;
  2071. }
  2072. ​
  2073. .block-field-textarea {
  2074. min-height: 100px;
  2075. }
  2076. ​
  2077. .block-types-grid {
  2078. grid-template-columns: 1fr;
  2079. gap: 10px;
  2080. }
  2081. ​
  2082. .block-type-card {
  2083. padding: 16px;
  2084. display: flex;
  2085. align-items: center;
  2086. text-align: left;
  2087. gap: 16px;
  2088. }
  2089. ​
  2090. .block-type-card svg {
  2091. margin-bottom: 0;
  2092. width: 28px;
  2093. height: 28px;
  2094. flex-shrink: 0;
  2095. }
  2096. ​
  2097. .block-type-card h4 {
  2098. margin-bottom: 2px;
  2099. }
  2100. ​
  2101. .modal-overlay {
  2102. padding: 0;
  2103. align-items: flex-end;
  2104. }
  2105. ​
  2106. .modal {
  2107. max-width: 100%;
  2108. max-height: 90vh;
  2109. border-radius: var(--radius) var(--radius) 0 0;
  2110. border-bottom: none;
  2111. }
  2112. ​
  2113. .modal-header {
  2114. padding: 20px;
  2115. }
  2116. ​
  2117. .modal-title {
  2118. font-size: 1.125rem;
  2119. }
  2120. ​
  2121. .modal-close {
  2122. padding: 8px;
  2123. }
  2124. ​
  2125. .modal-body {
  2126. padding: 20px;
  2127. }
  2128. ​
  2129. .modal-actions {
  2130. flex-direction: column;
  2131. gap: 10px;
  2132. }
  2133. ​
  2134. .modal-actions .btn {
  2135. width: 100%;
  2136. }
  2137. ​
  2138. .add-block-btn {
  2139. padding: 20px;
  2140. font-size: 0.9375rem;
  2141. }
  2142. ​
  2143. .repeater-item-header {
  2144. padding: 14px 16px;
  2145. }
  2146. ​
  2147. .repeater-item-title {
  2148. font-size: 0.875rem;
  2149. }
  2150. ​
  2151. .repeater-item-content {
  2152. padding: 16px;
  2153. }
  2154. ​
  2155. .repeater-add {
  2156. padding: 14px;
  2157. font-size: 0.875rem;
  2158. }
  2159. ​
  2160. .settings-tabs {
  2161. overflow-x: auto;
  2162. -webkit-overflow-scrolling: touch;
  2163. scrollbar-width: none;
  2164. padding: 6px;
  2165. }
  2166. ​
  2167. .settings-tabs::-webkit-scrollbar {
  2168. display: none;
  2169. }
  2170. ​
  2171. .settings-tab {
  2172. padding: 12px 16px;
  2173. white-space: nowrap;
  2174. flex: none;
  2175. }
  2176. ​
  2177. .message {
  2178. padding: 16px;
  2179. font-size: 0.9375rem;
  2180. flex-direction: column;
  2181. text-align: center;
  2182. gap: 8px;
  2183. }
  2184. ​
  2185. ​
  2186. .empty-state {
  2187. padding: 48px 20px;
  2188. }
  2189. ​
  2190. .empty-state-icon {
  2191. width: 56px;
  2192. height: 56px;
  2193. }
  2194. ​
  2195. .empty-state h3 {
  2196. font-size: 1.125rem;
  2197. }
  2198. ​
  2199. .empty-state p {
  2200. font-size: 0.9375rem;
  2201. }
  2202. ​
  2203. .icon-option {
  2204. width: 44px;
  2205. height: 44px;
  2206. }
  2207. ​
  2208. .icon-option svg {
  2209. width: 20px;
  2210. height: 20px;
  2211. }
  2212. ​
  2213. .page-selector-item {
  2214. padding: 14px 16px;
  2215. font-size: 0.9375rem;
  2216. }
  2217. ​
  2218. .page-selector-item small {
  2219. font-size: 0.8125rem;
  2220. margin-top: 4px;
  2221. }
  2222. ​
  2223. .link-page-btn {
  2224. padding: 10px 12px;
  2225. }
  2226. ​
  2227. .image-text {
  2228. padding: 40px 0;
  2229. }
  2230. ​
  2231. .image-text-grid,
  2232. .image-text-grid.image-text-right {
  2233. grid-template-columns: 1fr;
  2234. gap: 32px;
  2235. }
  2236. ​
  2237. .image-text-grid.image-text-right {
  2238. direction: ltr;
  2239. }
  2240. ​
  2241. .image-text-content h2 {
  2242. font-size: 1.75rem;
  2243. margin: 12px 0 8px;
  2244. }
  2245. ​
  2246. .image-text-content .text-content {
  2247. font-size: 0.9375rem;
  2248. margin: 16px 0 20px;
  2249. }
  2250. ​
  2251. .image-text-image img {
  2252. border-radius: 10px;
  2253. }
  2254. ​
  2255. .product-cards {
  2256. padding: 40px 0;
  2257. }
  2258. ​
  2259. .product-cards .section-header {
  2260. margin-bottom: 32px;
  2261. }
  2262. ​
  2263. .products-grid {
  2264. grid-template-columns: 1fr;
  2265. gap: 20px;
  2266. }
  2267. ​
  2268. .product-card {
  2269. padding: 24px 20px;
  2270. }
  2271. ​
  2272. .product-card:hover {
  2273. transform: translateY(-4px);
  2274. }
  2275. ​
  2276. .product-card h3 {
  2277. font-size: 1.0625rem;
  2278. }
  2279. ​
  2280. .product-description {
  2281. font-size: 0.9375rem;
  2282. }
  2283. ​
  2284. .product-features li {
  2285. font-size: 0.9375rem;
  2286. padding: 8px 0 8px 28px;
  2287. }
  2288. ​
  2289. .product-card .btn-sm {
  2290. width: 100%;
  2291. justify-content: center;
  2292. padding: 12px 16px;
  2293. font-size: 0.9375rem;
  2294. }
  2295. }
  2296. ​
  2297. @media (max-width: 380px) {
  2298. .main-content {
  2299. padding: 16px 12px;
  2300. }
  2301. ​
  2302. .card-header,
  2303. .card-body {
  2304. padding: 16px;
  2305. }
  2306. ​
  2307. .block-header {
  2308. padding: 12px 14px;
  2309. }
  2310. ​
  2311. .blocks-container {
  2312. padding: 12px;
  2313. }
  2314. ​
  2315. .modal-header,
  2316. .modal-body {
  2317. padding: 16px;
  2318. }
  2319. ​
  2320. .btn {
  2321. padding: 12px 16px;
  2322. }
  2323. }
  2324. ​
  2325. .sidebar,
  2326. .modal,
  2327. .block-item,
  2328. .nav-item,
  2329. .btn,
  2330. .form-input,
  2331. .form-switch label:before,
  2332. .product-card {
  2333. -webkit-backface-visibility: hidden;
  2334. backface-visibility: hidden;
  2335. -webkit-perspective: 1000;
  2336. perspective: 1000;
  2337. }
  2338. ​
  2339. @media (prefers-reduced-motion: reduce) {
  2340. ​
  2341. *,
  2342. *::before,
  2343. *::after {
  2344. animation-duration: 0.01ms !important;
  2345. animation-iteration-count: 1 !important;
  2346. transition-duration: 0.01ms !important;
  2347. }
  2348. }
  2349. ​
  2350. .app {
  2351. gap: 14px;
  2352. padding: 14px;
  2353. }
  2354. ​
  2355. .sidebar {
  2356. position: sticky;
  2357. top: 14px;
  2358. left: auto;
  2359. bottom: auto;
  2360. height: calc(100vh - 28px);
  2361. flex-shrink: 0;
  2362. border: 1px solid var(--border);
  2363. border-radius: var(--radius);
  2364. box-shadow: var(--shadow-card), var(--inset-hairline);
  2365. }
  2366. ​
  2367. .sidebar-header {
  2368. height: auto;
  2369. padding: 18px 14px 16px;
  2370. margin: 0 8px;
  2371. }
  2372. ​
  2373. .sidebar-nav {
  2374. padding: 12px 10px;
  2375. }
  2376. ​
  2377. .nav-item {
  2378. padding: 9px 12px;
  2379. font-size: 0.84rem;
  2380. font-weight: 500;
  2381. }
  2382. ​
  2383. .nav-item:hover {
  2384. background: var(--bg-card);
  2385. }
  2386. ​
  2387. .nav-item.active {
  2388. background: var(--accent-dim);
  2389. color: var(--accent);
  2390. font-weight: 600;
  2391. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
  2392. }
  2393. ​
  2394. .nav-item.active:hover {
  2395. transform: none;
  2396. }
  2397. ​
  2398. .sidebar-footer {
  2399. padding: 14px 10px 4px;
  2400. margin-top: 10px;
  2401. }
  2402. ​
  2403. .user-avatar,
  2404. [data-theme="dark"] .user-avatar {
  2405. background: var(--accent-dim);
  2406. color: var(--accent);
  2407. border-radius: 50%;
  2408. font-weight: 700;
  2409. }
  2410. ​
  2411. .main {
  2412. margin-left: 0;
  2413. min-width: 0;
  2414. background: var(--bg-elevated);
  2415. border: 1px solid var(--border);
  2416. border-radius: var(--radius);
  2417. box-shadow: var(--shadow-card), var(--inset-hairline);
  2418. }
  2419. ​
  2420. .main-header,
  2421. [data-theme="dark"] .main-header {
  2422. background: color-mix(in srgb, var(--bg-elevated) 85%, transparent);
  2423. border-radius: var(--radius) var(--radius) 0 0;
  2424. }
  2425. ​
  2426. .main-header h1 {
  2427. font-size: 1.15rem;
  2428. font-weight: 700;
  2429. letter-spacing: -0.01em;
  2430. }
  2431. ​
  2432. .btn {
  2433. font-weight: 600;
  2434. }
  2435. ​
  2436. .btn-primary {
  2437. background: linear-gradient(155deg, var(--accent-hover), var(--accent));
  2438. color: #fff;
  2439. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), var(--inset-hairline);
  2440. }
  2441. ​
  2442. .btn-primary:hover {
  2443. opacity: 1;
  2444. box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent), var(--inset-hairline);
  2445. }
  2446. ​
  2447. .btn-secondary {
  2448. background: var(--bg-card);
  2449. border-color: var(--border-focus);
  2450. }
  2451. ​
  2452. .btn-secondary:hover {
  2453. background: var(--bg-hover);
  2454. }
  2455. ​
  2456. .btn-danger {
  2457. background: transparent;
  2458. border: 1px solid var(--error);
  2459. color: var(--error);
  2460. }
  2461. ​
  2462. .btn-danger:hover {
  2463. opacity: 1;
  2464. background: color-mix(in srgb, var(--error) 14%, transparent);
  2465. }
  2466. ​
  2467. .card {
  2468. border-radius: 14px;
  2469. box-shadow: var(--shadow-card), var(--inset-hairline);
  2470. }
  2471. ​
  2472. .table th {
  2473. background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-elevated));
  2474. font-size: 0.6875rem;
  2475. letter-spacing: 0.07em;
  2476. }
  2477. ​
  2478. .table td {
  2479. border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent);
  2480. }
  2481. ​
  2482. .table tr:hover td {
  2483. background: color-mix(in srgb, var(--bg-card) 65%, transparent);
  2484. }
  2485. ​
  2486. .table tr:hover td:first-child {
  2487. box-shadow: inset 2px 0 0 var(--accent);
  2488. }
  2489. ​
  2490. .form-input:focus,
  2491. .form-select:focus,
  2492. .form-textarea:focus,
  2493. .block-field-input:focus {
  2494. border-color: var(--accent);
  2495. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  2496. outline: none;
  2497. }
  2498. ​
  2499. .settings-tab.active {
  2500. border-bottom-color: var(--accent);
  2501. }
  2502. ​
  2503. @media (max-width: 1024px) {
  2504. .sidebar {
  2505. width: 220px;
  2506. }
  2507. }
  2508. ​
  2509. @media (max-width: 768px) {
  2510. .app {
  2511. padding: 0;
  2512. gap: 0;
  2513. }
  2514. ​
  2515. .sidebar {
  2516. position: fixed;
  2517. top: 0;
  2518. left: 0;
  2519. bottom: 0;
  2520. height: auto;
  2521. border-radius: 0 var(--radius) var(--radius) 0;
  2522. }
  2523. ​
  2524. .main {
  2525. border: none;
  2526. border-radius: 0;
  2527. box-shadow: none;
  2528. width: 100%;
  2529. }
  2530. ​
  2531. .main-header {
  2532. border-radius: 0;
  2533. }
  2534. }
  2535. ​
  2536. .form-label,
  2537. .block-field-label {
  2538. font-size: 0.8125rem;
  2539. font-weight: 600;
  2540. color: var(--text-muted);
  2541. }
  2542. ​
  2543. .form-input,
  2544. .form-textarea,
  2545. .form-select,
  2546. .block-field-input {
  2547. background: var(--bg);
  2548. border: 1px solid var(--border);
  2549. border-radius: var(--radius);
  2550. padding: 13px 16px;
  2551. font-weight: 500;
  2552. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  2553. }
  2554. ​
  2555. .form-input::placeholder,
  2556. .form-textarea::placeholder,
  2557. .block-field-input::placeholder {
  2558. color: var(--text-subtle);
  2559. font-weight: 400;
  2560. }
  2561. ​
  2562. .form-input:focus,
  2563. .form-textarea:focus,
  2564. .form-select:focus,
  2565. .block-field-input:focus {
  2566. transform: none;
  2567. }
  2568. ​
  2569. .checkbox-label {
  2570. gap: 14px;
  2571. font-weight: 600;
  2572. color: var(--text-muted);
  2573. }
  2574. ​
  2575. .checkbox-label:hover {
  2576. color: var(--text);
  2577. }
  2578. ​
  2579. .checkbox-label input[type="checkbox"] {
  2580. width: 38px;
  2581. height: 22px;
  2582. border-radius: 999px;
  2583. background: var(--bg-card);
  2584. border: 1px solid var(--border);
  2585. margin: 0;
  2586. }
  2587. ​
  2588. .checkbox-label input[type="checkbox"]::before {
  2589. content: "";
  2590. position: absolute;
  2591. top: 2px;
  2592. left: 2px;
  2593. width: 16px;
  2594. height: 16px;
  2595. border-radius: 50%;
  2596. background: var(--text-muted);
  2597. transition: transform var(--transition-base), background var(--transition-base);
  2598. }
  2599. ​
  2600. .checkbox-label input[type="checkbox"]:hover {
  2601. transform: none;
  2602. border-color: var(--border-focus);
  2603. }
  2604. ​
  2605. .checkbox-label input[type="checkbox"]:checked {
  2606. background: var(--accent);
  2607. border-color: var(--accent);
  2608. box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
  2609. }
  2610. ​
  2611. .checkbox-label input[type="checkbox"]:checked::before {
  2612. transform: translateX(16px);
  2613. background: #fff;
  2614. }
  2615. ​
  2616. .checkbox-label input[type="checkbox"]:checked::after {
  2617. display: none;
  2618. }
  2619. ​
  2620. .checkbox-label input[type="checkbox"]:focus-visible {
  2621. outline: 2px solid var(--accent);
  2622. outline-offset: 2px;
  2623. box-shadow: none;
  2624. }
  2625. ​
  2626. .form-switch {
  2627. width: 38px;
  2628. height: 22px;
  2629. }
  2630. ​
  2631. .form-switch label {
  2632. background-color: var(--bg-card);
  2633. border: 1px solid var(--border);
  2634. border-radius: 999px;
  2635. }
  2636. ​
  2637. .form-switch label:before {
  2638. height: 16px;
  2639. width: 16px;
  2640. left: 2px;
  2641. bottom: 2px;
  2642. background-color: var(--text-muted);
  2643. }
  2644. ​
  2645. .form-switch input:checked+label {
  2646. background-color: var(--accent);
  2647. border-color: var(--accent);
  2648. box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
  2649. }
  2650. ​
  2651. .form-switch input:checked+label:before {
  2652. transform: translateX(16px);
  2653. background-color: #fff;
  2654. }
  2655. ​
  2656. .card,
  2657. .block-item,
  2658. .editor-wrapper {
  2659. background: linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated) 92%, #fff) 0%, var(--bg-elevated) 100%);
  2660. border-radius: 14px;
  2661. }
  2662. ​
  2663. .card {
  2664. padding: 0;
  2665. }
  2666. ​
  2667. .card-body {
  2668. padding: 22px 24px;
  2669. }
  2670. ​
  2671. .card:hover {
  2672. border-color: var(--border-focus);
  2673. }
  2674. ​
  2675. .settings-tabs {
  2676. background: transparent;
  2677. padding: 0;
  2678. border-radius: 0;
  2679. border-bottom: 1px solid var(--border);
  2680. gap: 4px;
  2681. }
  2682. ​
  2683. .settings-tab {
  2684. flex: 0 0 auto;
  2685. font-weight: 600;
  2686. border-radius: 0;
  2687. border-bottom: 2px solid transparent;
  2688. }
  2689. ​
  2690. .settings-tab.active {
  2691. background: transparent;
  2692. color: var(--text);
  2693. border-bottom-color: var(--accent);
  2694. }
  2695. ​
  2696. .modal {
  2697. border-radius: 14px;
  2698. box-shadow: var(--shadow-md), var(--inset-hairline);
  2699. }
  2700. ​
  2701. :root,
  2702. [data-theme="light"] {
  2703. --blue: var(--accent);
  2704. }
  2705. ​
  2706. ::selection,
  2707. [data-theme="light"] ::selection,
  2708. .form-input::selection,
  2709. .form-textarea::selection,
  2710. .block-field-input::selection,
  2711. .blocks-container ::selection,
  2712. [data-theme="light"] .form-input::selection,
  2713. [data-theme="light"] .form-textarea::selection,
  2714. [data-theme="light"] .block-field-input::selection,
  2715. [data-theme="light"] .blocks-container ::selection {
  2716. background-color: color-mix(in srgb, var(--accent) 35%, transparent);
  2717. color: var(--text);
  2718. }
  2719. ​
  2720. .block-item.drag-over,
  2721. .icon-option.selected {
  2722. background: var(--accent-dim);
  2723. }
  2724. ​
  2725. .checkbox-label input[type="checkbox"]:focus {
  2726. box-shadow: none;
  2727. }
  2728. ​
  2729. .form-input,
  2730. .form-textarea,
  2731. .form-select,
  2732. .block-field-input {
  2733. background: var(--bg);
  2734. box-shadow: none;
  2735. border-radius: 10px;
  2736. padding: 11px 14px;
  2737. }
  2738. ​
  2739. [data-theme="light"] .form-input,
  2740. [data-theme="light"] .form-textarea,
  2741. [data-theme="light"] .form-select,
  2742. [data-theme="light"] .block-field-input {
  2743. background: var(--bg-card);
  2744. }
  2745. ​
  2746. .form-input:hover,
  2747. .form-textarea:hover,
  2748. .form-select:hover,
  2749. .block-field-input:hover {
  2750. border-color: var(--border-focus);
  2751. }
  2752. ​
  2753. .form-input:focus,
  2754. .form-textarea:focus,
  2755. .form-select:focus,
  2756. .block-field-input:focus {
  2757. border-color: var(--accent);
  2758. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  2759. }
  2760. ​
  2761. .form-hint {
  2762. font-size: 0.75rem;
  2763. }
  2764. ​
  2765. .btn {
  2766. border-radius: 10px;
  2767. padding: 9px 16px;
  2768. font-size: 0.8125rem;
  2769. border: 1px solid transparent;
  2770. }
  2771. ​
  2772. .btn-sm {
  2773. padding: 6px 12px;
  2774. font-size: 0.78rem;
  2775. border-radius: 8px;
  2776. }
  2777. ​
  2778. .btn-primary {
  2779. border-color: var(--accent);
  2780. }
  2781. ​
  2782. .btn-primary:hover {
  2783. transform: translateY(-1px);
  2784. background: linear-gradient(155deg, var(--accent-hover), var(--accent-hover));
  2785. border-color: var(--accent-hover);
  2786. }
  2787. ​
  2788. .btn-secondary {
  2789. background: var(--bg-card);
  2790. border-color: var(--border-focus);
  2791. color: var(--text);
  2792. }
  2793. ​
  2794. .btn-secondary:hover {
  2795. background: var(--bg-hover);
  2796. border-color: var(--border-focus);
  2797. transform: none;
  2798. }
  2799. ​
  2800. .btn-ghost {
  2801. border-color: transparent;
  2802. }
  2803. ​
  2804. .btn-danger {
  2805. background: transparent;
  2806. border-color: color-mix(in srgb, var(--error) 55%, transparent);
  2807. color: var(--error);
  2808. }
  2809. ​
  2810. .btn-danger:hover {
  2811. transform: none;
  2812. border-color: var(--error);
  2813. }
  2814. ​
  2815. .btn:focus-visible {
  2816. outline: 2px solid var(--accent);
  2817. outline-offset: 2px;
  2818. }
  2819. ​
  2820. .btn:disabled {
  2821. opacity: 0.5;
  2822. cursor: not-allowed;
  2823. }
  2824. ​
  2825. .main-header {
  2826. border-bottom: 1px solid var(--border);
  2827. }
  2828. ​
  2829. .main-header-inner {
  2830. height: 60px;
  2831. }
  2832. ​
  2833. .main-header h1 {
  2834. font-size: 1.05rem;
  2835. }
  2836. ​
  2837. .header-actions .btn {
  2838. padding: 7px 12px;
  2839. }
  2840. ​
  2841. .sidebar-logo {
  2842. font-size: 1rem;
  2843. }
  2844. ​
  2845. .sidebar-header {
  2846. border-bottom: 1px solid var(--border);
  2847. }
  2848. ​
  2849. .nav-label {
  2850. font-size: 0.65rem;
  2851. letter-spacing: 0.08em;
  2852. }
  2853. ​
  2854. .nav-item svg {
  2855. opacity: 0.85;
  2856. }
  2857. ​
  2858. .nav-item.active svg {
  2859. opacity: 1;
  2860. }
  2861. ​
  2862. .sidebar-footer {
  2863. border-top: 1px solid var(--border);
  2864. }
  2865. ​
  2866. .editor-wrapper,
  2867. .card {
  2868. border: 1px solid var(--border);
  2869. }
  2870. ​
  2871. .editor-toolbar {
  2872. background: color-mix(in srgb, var(--bg-card) 55%, var(--bg-elevated));
  2873. border-radius: 14px 14px 0 0;
  2874. }
  2875. ​
  2876. .block-item {
  2877. background: var(--bg-card);
  2878. border-radius: 12px;
  2879. box-shadow: none;
  2880. }
  2881. ​
  2882. .block-item.expanded {
  2883. border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  2884. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  2885. }
  2886. ​
  2887. .block-item.expanded .block-header,
  2888. .block-header {
  2889. border-radius: 12px 12px 0 0;
  2890. }
  2891. ​
  2892. .block-content {
  2893. background: transparent;
  2894. }
  2895. ​
  2896. .block-type {
  2897. background: var(--bg-elevated);
  2898. border: 1px solid var(--border);
  2899. color: var(--text-muted);
  2900. border-radius: 6px;
  2901. letter-spacing: 0.06em;
  2902. }
  2903. ​
  2904. .block-id-input {
  2905. background: var(--bg);
  2906. border-radius: 6px;
  2907. }
  2908. ​
  2909. .block-id-input:focus {
  2910. border-color: var(--accent);
  2911. transform: none;
  2912. }
  2913. ​
  2914. .repeater-item {
  2915. background: var(--bg-elevated);
  2916. border-radius: 10px;
  2917. }
  2918. ​
  2919. .repeater-item-header {
  2920. background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-elevated));
  2921. }
  2922. ​
  2923. .add-block-btn,
  2924. .repeater-add {
  2925. border: 1px dashed var(--border-focus);
  2926. border-radius: 12px;
  2927. }
  2928. ​
  2929. .add-block-btn:hover,
  2930. .repeater-add:hover {
  2931. border-color: var(--accent);
  2932. color: var(--accent);
  2933. background: var(--accent-dim);
  2934. transform: none;
  2935. }
  2936. ​
  2937. .link-page-btn {
  2938. background: var(--bg-card);
  2939. border: 1px solid var(--border);
  2940. }
  2941. ​
  2942. .page-selector {
  2943. border-radius: 12px;
  2944. box-shadow: var(--shadow-md);
  2945. }
  2946. ​
  2947. .block-type-card {
  2948. border-radius: 12px;
  2949. background: var(--bg-card);
  2950. }
  2951. ​
  2952. .block-type-card:hover {
  2953. border-color: var(--accent);
  2954. background: var(--accent-dim);
  2955. transform: none;
  2956. }
  2957. ​
  2958. .block-type-card:hover svg {
  2959. color: var(--accent);
  2960. }
  2961. ​
  2962. .product-card:hover {
  2963. box-shadow: var(--shadow-md);
  2964. }
  2965. ​
  2966. .message {
  2967. border-radius: 10px;
  2968. }
  2969. ​
  2970. .message.success,
  2971. [data-theme="light"] .message.success {
  2972. background: color-mix(in srgb, var(--success) 12%, transparent);
  2973. border-color: color-mix(in srgb, var(--success) 35%, transparent);
  2974. }
  2975. ​
  2976. .message.error,
  2977. [data-theme="light"] .message.error {
  2978. background: color-mix(in srgb, var(--error) 12%, transparent);
  2979. border-color: color-mix(in srgb, var(--error) 35%, transparent);
  2980. }
  2981. ​
  2982. * {
  2983. scrollbar-width: thin;
  2984. scrollbar-color: var(--border-focus) transparent;
  2985. }
  2986. ​
  2987. ::-webkit-scrollbar {
  2988. width: 10px;
  2989. height: 10px;
  2990. }
  2991. ​
  2992. ::-webkit-scrollbar-track {
  2993. background: transparent;
  2994. }
  2995. ​
  2996. ::-webkit-scrollbar-thumb {
  2997. background: var(--border-focus);
  2998. border-radius: 999px;
  2999. border: 2px solid var(--bg-elevated);
  3000. background-clip: padding-box;
  3001. }
  3002. ​
  3003. [data-theme="light"] .checkbox-label input[type="checkbox"]:checked,
  3004. [data-theme="light"] .form-switch input:checked+label {
  3005. background: color-mix(in srgb, var(--accent) 22%, #fff);
  3006. border-color: color-mix(in srgb, var(--accent) 55%, #fff);
  3007. box-shadow: none;
  3008. }
  3009. ​
  3010. [data-theme="light"] .checkbox-label input[type="checkbox"]:checked::before,
  3011. [data-theme="light"] .form-switch input:checked+label:before {
  3012. background: var(--accent);
  3013. }
  3014. ​
  3015. [data-theme="light"] .checkbox-label input[type="checkbox"]::before,
  3016. [data-theme="light"] .form-switch label:before {
  3017. background: var(--text-subtle);
  3018. }
  3019. ​
  3020. @media (min-width: 769px) {
  3021. html,
  3022. body {
  3023. height: 100%;
  3024. overflow: hidden;
  3025. }
  3026. ​
  3027. .app {
  3028. height: 100vh;
  3029. min-height: 0;
  3030. overflow: hidden;
  3031. }
  3032. ​
  3033. .sidebar {
  3034. position: relative;
  3035. top: 0;
  3036. height: 100%;
  3037. }
  3038. ​
  3039. .main {
  3040. height: 100%;
  3041. overflow-y: auto;
  3042. overflow-x: hidden;
  3043. }
  3044. ​
  3045. .main-header {
  3046. border-radius: 0;
  3047. }
  3048. }
  3049. ​
  3050. :root {
  3051. --ease-out: cubic-bezier(.22, 1, .36, 1);
  3052. --ease-soft: cubic-bezier(.4, 0, .2, 1);
  3053. --dur: .28s;
  3054. }
  3055. ​
  3056. .btn {
  3057. transition:
  3058. background-color var(--dur) var(--ease-soft),
  3059. border-color var(--dur) var(--ease-soft),
  3060. color var(--dur) var(--ease-soft),
  3061. box-shadow var(--dur) var(--ease-soft),
  3062. transform var(--dur) var(--ease-out),
  3063. opacity var(--dur) var(--ease-soft);
  3064. }
  3065. ​
  3066. .btn:active {
  3067. transform: scale(.97);
  3068. transition-duration: .08s;
  3069. }
  3070. ​
  3071. .btn-primary {
  3072. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 11%, transparent));
  3073. border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  3074. color: var(--accent-hover);
  3075. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent), var(--inset-hairline);
  3076. -webkit-backdrop-filter: blur(6px);
  3077. backdrop-filter: blur(6px);
  3078. }
  3079. ​
  3080. [data-theme="light"] .btn-primary {
  3081. color: var(--accent);
  3082. }
  3083. ​
  3084. .btn-primary:hover {
  3085. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  3086. border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  3087. color: var(--accent-hover);
  3088. box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent), var(--inset-hairline);
  3089. transform: translateY(-1px);
  3090. opacity: 1;
  3091. }
  3092. ​
  3093. [data-theme="light"] .btn-primary:hover {
  3094. color: var(--accent);
  3095. }
  3096. ​
  3097. .btn-primary:active {
  3098. transform: translateY(0) scale(.98);
  3099. }
  3100. ​
  3101. .btn-success {
  3102. background: linear-gradient(180deg, color-mix(in srgb, var(--success) 22%, transparent), color-mix(in srgb, var(--success) 10%, transparent));
  3103. border-color: color-mix(in srgb, var(--success) 34%, transparent);
  3104. color: var(--success);
  3105. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 10%, transparent), var(--inset-hairline);
  3106. }
  3107. ​
  3108. .btn-success:hover {
  3109. background: linear-gradient(180deg, color-mix(in srgb, var(--success) 32%, transparent), color-mix(in srgb, var(--success) 18%, transparent));
  3110. border-color: color-mix(in srgb, var(--success) 55%, transparent);
  3111. }
  3112. ​
  3113. .btn-danger {
  3114. background: linear-gradient(180deg, color-mix(in srgb, var(--error) 14%, transparent), color-mix(in srgb, var(--error) 6%, transparent));
  3115. border-color: color-mix(in srgb, var(--error) 34%, transparent);
  3116. color: var(--error);
  3117. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 8%, transparent);
  3118. }
  3119. ​
  3120. .btn-danger:hover {
  3121. background: linear-gradient(180deg, color-mix(in srgb, var(--error) 26%, transparent), color-mix(in srgb, var(--error) 14%, transparent));
  3122. border-color: color-mix(in srgb, var(--error) 55%, transparent);
  3123. color: var(--error);
  3124. transform: none;
  3125. }
  3126. ​
  3127. .btn-secondary {
  3128. background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 100%, #fff 3%), var(--bg-card));
  3129. border-color: var(--border-focus);
  3130. color: var(--text);
  3131. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent), var(--inset-hairline);
  3132. }
  3133. ​
  3134. .btn-secondary:hover {
  3135. background: linear-gradient(180deg, color-mix(in srgb, var(--bg-hover) 100%, #fff 3%), var(--bg-hover));
  3136. border-color: color-mix(in srgb, var(--accent) 40%, var(--border-focus));
  3137. transform: none;
  3138. }
  3139. ​
  3140. .btn-ghost:hover {
  3141. border-color: transparent;
  3142. }
  3143. ​
  3144. .nav-item,
  3145. .nav-item:hover,
  3146. .nav-item:active,
  3147. .nav-item.active {
  3148. transform: none;
  3149. transition: background-color .15s ease, color .15s ease;
  3150. }
  3151. ​
  3152. .form-input,
  3153. .form-textarea,
  3154. .form-select,
  3155. .block-field-input {
  3156. background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 100%, #fff 2.5%), var(--bg));
  3157. border-color: color-mix(in srgb, var(--border-focus) 80%, transparent);
  3158. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 0 0 1px color-mix(in srgb, var(--text) 2.5%, transparent);
  3159. }
  3160. ​
  3161. [data-theme="light"] .form-input,
  3162. [data-theme="light"] .form-textarea,
  3163. [data-theme="light"] .form-select,
  3164. [data-theme="light"] .block-field-input {
  3165. background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 100%, #fff 30%), var(--bg-card));
  3166. box-shadow: inset 0 1px 2px rgba(20, 20, 30, 0.06);
  3167. }
  3168. ​
  3169. .form-input:hover,
  3170. .form-textarea:hover,
  3171. .form-select:hover,
  3172. .block-field-input:hover {
  3173. border-color: color-mix(in srgb, var(--accent) 30%, var(--border-focus));
  3174. }
  3175. ​
  3176. .form-input:focus,
  3177. .form-textarea:focus,
  3178. .form-select:focus,
  3179. .block-field-input:focus {
  3180. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--bg)), color-mix(in srgb, var(--accent) 3%, var(--bg)));
  3181. border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  3182. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  3183. }
  3184. ​
  3185. .form-select {
  3186. cursor: pointer;
  3187. }
  3188. ​
  3189. .checkbox-label input[type="checkbox"],
  3190. .form-switch label {
  3191. background: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 100%, #fff 3%), var(--bg-card));
  3192. border: 1px solid color-mix(in srgb, var(--border-focus) 90%, transparent);
  3193. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent);
  3194. }
  3195. ​
  3196. .checkbox-label input[type="checkbox"]::before,
  3197. .form-switch label:before {
  3198. background: linear-gradient(180deg, color-mix(in srgb, var(--text-muted) 100%, #fff 12%), var(--text-muted));
  3199. box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  3200. }
  3201. ​
  3202. .checkbox-label input[type="checkbox"]:hover {
  3203. border-color: color-mix(in srgb, var(--accent) 35%, var(--border-focus));
  3204. }
  3205. ​
  3206. .checkbox-label input[type="checkbox"]:checked,
  3207. .form-switch input:checked+label,
  3208. [data-theme="light"] .checkbox-label input[type="checkbox"]:checked,
  3209. [data-theme="light"] .form-switch input:checked+label {
  3210. background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
  3211. border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  3212. box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 14px -4px color-mix(in srgb, var(--accent) 60%, transparent);
  3213. }
  3214. ​
  3215. .checkbox-label input[type="checkbox"]:checked::before,
  3216. .form-switch input:checked+label:before,
  3217. [data-theme="light"] .checkbox-label input[type="checkbox"]:checked::before,
  3218. [data-theme="light"] .form-switch input:checked+label:before {
  3219. background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent-hover) 30%, #fff));
  3220. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  3221. }
  3222. ​
  3223. [data-theme="light"] .checkbox-label input[type="checkbox"]::before,
  3224. [data-theme="light"] .form-switch label:before {
  3225. background: linear-gradient(180deg, color-mix(in srgb, var(--text-muted) 100%, #fff 12%), var(--text-muted));
  3226. }
  3227. ​
  3228. .checkbox-label input[type="checkbox"]:focus-visible {
  3229. outline: none;
  3230. box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  3231. }
  3232. ​
  3233. .table tr:hover td:first-child {
  3234. box-shadow: none;
  3235. }
  3236. ​
  3237. .settings-tab {
  3238. transition: color var(--dur) var(--ease-soft), border-color var(--dur) var(--ease-soft);
  3239. }
  3240. ​
  3241. .nav-more-btn,
  3242. .nav-sheet,
  3243. .nav-sheet-backdrop,
  3244. .mobile-avatar {
  3245. display: none;
  3246. }
  3247. ​
  3248. @media (max-width: 768px) {
  3249. body {
  3250. background: var(--bg);
  3251. }
  3252. ​
  3253. .app {
  3254. display: block;
  3255. padding: 0;
  3256. gap: 0;
  3257. height: auto;
  3258. min-height: 100vh;
  3259. overflow: visible;
  3260. }
  3261. ​
  3262. html,
  3263. body {
  3264. height: auto;
  3265. overflow: visible;
  3266. }
  3267. ​
  3268. .sidebar {
  3269. position: fixed;
  3270. top: auto;
  3271. left: calc(8px + env(safe-area-inset-left));
  3272. right: calc(8px + env(safe-area-inset-right));
  3273. bottom: calc(8px + env(safe-area-inset-bottom));
  3274. width: auto;
  3275. max-width: none;
  3276. height: auto;
  3277. transform: none;
  3278. padding: 6px;
  3279. flex-direction: row;
  3280. align-items: center;
  3281. background: var(--bg-elevated);
  3282. border: 1px solid var(--border-focus);
  3283. border-radius: 24px;
  3284. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), var(--inset-hairline);
  3285. z-index: 60;
  3286. transition: none;
  3287. }
  3288. ​
  3289. .sidebar::before,
  3290. .sidebar.open::before {
  3291. display: none;
  3292. }
  3293. ​
  3294. .sidebar .mobile-nav-toggle,
  3295. .main-header .mobile-nav-toggle,
  3296. .sidebar-header,
  3297. .sidebar-footer,
  3298. .nav-label {
  3299. display: none;
  3300. }
  3301. ​
  3302. .sidebar > a.nav-item {
  3303. display: none;
  3304. }
  3305. ​
  3306. .sidebar-nav {
  3307. display: flex;
  3308. flex-direction: row;
  3309. align-items: center;
  3310. justify-content: space-around;
  3311. width: 100%;
  3312. padding: 0;
  3313. overflow: visible;
  3314. }
  3315. ​
  3316. .nav-section {
  3317. display: contents;
  3318. margin: 0;
  3319. }
  3320. ​
  3321. .sidebar-nav .nav-item {
  3322. flex: 1;
  3323. min-width: 0;
  3324. flex-direction: column;
  3325. justify-content: center;
  3326. gap: 3px;
  3327. margin: 0;
  3328. padding: 7px 4px;
  3329. font-size: 10px;
  3330. font-weight: 600;
  3331. border-radius: 18px;
  3332. text-align: center;
  3333. white-space: nowrap;
  3334. overflow: hidden;
  3335. }
  3336. ​
  3337. .sidebar-nav .nav-item svg {
  3338. width: 20px;
  3339. height: 20px;
  3340. }
  3341. ​
  3342. .sidebar-nav .nav-item.nav-overflow-item {
  3343. display: none;
  3344. }
  3345. ​
  3346. .nav-more-btn {
  3347. display: flex;
  3348. flex: 1;
  3349. min-width: 0;
  3350. flex-direction: column;
  3351. align-items: center;
  3352. justify-content: center;
  3353. gap: 3px;
  3354. padding: 7px 4px;
  3355. background: none;
  3356. border: none;
  3357. border-radius: 18px;
  3358. color: var(--text-muted);
  3359. font: inherit;
  3360. font-size: 10px;
  3361. font-weight: 600;
  3362. cursor: pointer;
  3363. }
  3364. ​
  3365. .nav-more-btn svg {
  3366. width: 20px;
  3367. height: 20px;
  3368. }
  3369. ​
  3370. .nav-more-btn.open {
  3371. color: var(--accent);
  3372. }
  3373. ​
  3374. .nav-sheet-backdrop {
  3375. display: none;
  3376. position: fixed;
  3377. inset: 0;
  3378. background: rgba(0, 0, 0, 0.45);
  3379. z-index: 70;
  3380. }
  3381. ​
  3382. .nav-sheet-backdrop.open {
  3383. display: block;
  3384. animation: fadeIn var(--transition-base) ease-out;
  3385. }
  3386. ​
  3387. .nav-sheet {
  3388. display: none;
  3389. position: fixed;
  3390. left: calc(8px + env(safe-area-inset-left));
  3391. right: calc(8px + env(safe-area-inset-right));
  3392. bottom: calc(8px + env(safe-area-inset-bottom));
  3393. max-height: 70vh;
  3394. overflow-y: auto;
  3395. padding: 8px 10px calc(14px + env(safe-area-inset-bottom));
  3396. background: var(--bg-elevated);
  3397. border: 1px solid var(--border-focus);
  3398. border-radius: 24px;
  3399. box-shadow: var(--shadow-md);
  3400. z-index: 71;
  3401. }
  3402. ​
  3403. .nav-sheet.open {
  3404. display: block;
  3405. animation: modalSlideIn .38s cubic-bezier(.22, 1, .36, 1) backwards;
  3406. }
  3407. ​
  3408. .nav-sheet-handle {
  3409. width: 36px;
  3410. height: 4px;
  3411. margin: 6px auto 12px;
  3412. border-radius: 999px;
  3413. background: var(--border-focus);
  3414. }
  3415. ​
  3416. .nav-sheet-link {
  3417. display: flex;
  3418. align-items: center;
  3419. gap: 12px;
  3420. padding: 12px 10px;
  3421. color: var(--text);
  3422. font-size: 14px;
  3423. font-weight: 500;
  3424. border-radius: var(--radius-sm);
  3425. }
  3426. ​
  3427. .nav-sheet-link svg {
  3428. width: 18px;
  3429. height: 18px;
  3430. flex-shrink: 0;
  3431. }
  3432. ​
  3433. .nav-sheet-link:active {
  3434. background: var(--bg-card);
  3435. }
  3436. ​
  3437. .nav-sheet-link.active {
  3438. color: var(--accent);
  3439. background: var(--accent-dim);
  3440. }
  3441. ​
  3442. .main {
  3443. display: block;
  3444. width: 100%;
  3445. margin: 0;
  3446. height: auto;
  3447. overflow: visible;
  3448. background: transparent;
  3449. border: none;
  3450. border-radius: 0;
  3451. box-shadow: none;
  3452. }
  3453. ​
  3454. .main-header,
  3455. [data-theme="dark"] .main-header {
  3456. position: sticky;
  3457. top: 0;
  3458. z-index: 50;
  3459. padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
  3460. background: var(--bg);
  3461. border-bottom: none;
  3462. border-radius: 0;
  3463. backdrop-filter: none;
  3464. }
  3465. ​
  3466. .main-header-inner {
  3467. height: auto;
  3468. min-height: 40px;
  3469. gap: 10px;
  3470. }
  3471. ​
  3472. .main-header h1 {
  3473. font-size: 0.95rem;
  3474. font-weight: 700;
  3475. min-width: 0;
  3476. overflow: hidden;
  3477. text-overflow: ellipsis;
  3478. white-space: nowrap;
  3479. }
  3480. ​
  3481. .header-actions {
  3482. gap: 8px;
  3483. flex-shrink: 0;
  3484. }
  3485. ​
  3486. .header-actions .btn {
  3487. min-height: 0;
  3488. }
  3489. ​
  3490. .header-actions #theme-toggle-btn {
  3491. width: 34px;
  3492. height: 34px;
  3493. padding: 0;
  3494. border-radius: 999px;
  3495. }
  3496. ​
  3497. .header-actions #theme-toggle-btn span {
  3498. display: none;
  3499. }
  3500. ​
  3501. .mobile-avatar {
  3502. display: flex;
  3503. align-items: center;
  3504. justify-content: center;
  3505. width: 34px;
  3506. height: 34px;
  3507. border-radius: 50%;
  3508. background: var(--accent-dim);
  3509. color: var(--accent);
  3510. font-size: 0.8rem;
  3511. font-weight: 700;
  3512. flex-shrink: 0;
  3513. }
  3514. ​
  3515. .main-content {
  3516. position: relative;
  3517. min-height: calc(100vh - 64px);
  3518. padding: 20px calc(16px + env(safe-area-inset-right)) 104px calc(16px + env(safe-area-inset-left));
  3519. background: var(--bg-elevated);
  3520. border-top: 1px solid var(--border);
  3521. border-radius: 24px 24px 0 0;
  3522. box-shadow: var(--inset-hairline);
  3523. }
  3524. }
  3525. ​
  3526. .ne-list {
  3527. display: flex;
  3528. flex-direction: column;
  3529. gap: 10px;
  3530. margin-bottom: 14px;
  3531. }
  3532. ​
  3533. .ne-item {
  3534. background: var(--bg);
  3535. border: 1px solid var(--border);
  3536. border-radius: var(--radius);
  3537. padding: 10px;
  3538. transition: border-color var(--transition-fast);
  3539. }
  3540. ​
  3541. .ne-item:focus-within {
  3542. border-color: var(--border-focus);
  3543. }
  3544. ​
  3545. .ne-row {
  3546. display: flex;
  3547. align-items: center;
  3548. gap: 8px;
  3549. }
  3550. ​
  3551. .ne-row-compact {
  3552. margin-bottom: 8px;
  3553. }
  3554. ​
  3555. .ne-input {
  3556. flex: 1;
  3557. min-width: 0;
  3558. height: 38px;
  3559. padding: 0 12px;
  3560. background: var(--bg-elevated);
  3561. border: 1px solid var(--border);
  3562. border-radius: var(--radius-sm);
  3563. color: var(--text);
  3564. font-size: 0.875rem;
  3565. transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  3566. }
  3567. ​
  3568. .ne-input::placeholder {
  3569. color: var(--text-subtle);
  3570. }
  3571. ​
  3572. .ne-input:focus {
  3573. outline: none;
  3574. border-color: var(--accent);
  3575. box-shadow: 0 0 0 3px var(--accent-dim);
  3576. }
  3577. ​
  3578. .ne-select {
  3579. flex: 0 0 auto;
  3580. min-width: 140px;
  3581. cursor: pointer;
  3582. }
  3583. ​
  3584. .ne-title {
  3585. font-weight: 600;
  3586. }
  3587. ​
  3588. .ne-actions {
  3589. display: flex;
  3590. align-items: center;
  3591. gap: 2px;
  3592. flex-shrink: 0;
  3593. }
  3594. ​
  3595. .ne-btn,
  3596. .ne-icon-btn {
  3597. display: inline-flex;
  3598. align-items: center;
  3599. justify-content: center;
  3600. width: 34px;
  3601. height: 34px;
  3602. flex-shrink: 0;
  3603. background: transparent;
  3604. border: 1px solid transparent;
  3605. border-radius: var(--radius-sm);
  3606. color: var(--text-muted);
  3607. cursor: pointer;
  3608. transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  3609. }
  3610. ​
  3611. .ne-btn:hover:not(:disabled) {
  3612. background: var(--bg-hover);
  3613. color: var(--text);
  3614. }
  3615. ​
  3616. .ne-btn:disabled {
  3617. opacity: 0.3;
  3618. cursor: default;
  3619. }
  3620. ​
  3621. .ne-btn-danger:hover:not(:disabled) {
  3622. background: rgba(240, 84, 106, 0.12);
  3623. color: var(--error);
  3624. }
  3625. ​
  3626. .ne-icon-btn {
  3627. width: 38px;
  3628. height: 38px;
  3629. background: var(--bg-elevated);
  3630. border-color: var(--border);
  3631. }
  3632. ​
  3633. .ne-icon-btn:hover,
  3634. .ne-icon-btn.active {
  3635. border-color: var(--accent);
  3636. color: var(--accent);
  3637. background: var(--accent-dim);
  3638. }
  3639. ​
  3640. .ne-icon-svg {
  3641. width: 18px;
  3642. height: 18px;
  3643. flex-shrink: 0;
  3644. }
  3645. ​
  3646. .ne-picker {
  3647. margin-top: 10px;
  3648. padding: 10px;
  3649. background: var(--bg-elevated);
  3650. border: 1px solid var(--border);
  3651. border-radius: var(--radius-sm);
  3652. }
  3653. ​
  3654. .ne-picker-head {
  3655. display: flex;
  3656. gap: 8px;
  3657. margin-bottom: 10px;
  3658. }
  3659. ​
  3660. .ne-chip {
  3661. flex-shrink: 0;
  3662. padding: 0 14px;
  3663. height: 38px;
  3664. background: transparent;
  3665. border: 1px solid var(--border);
  3666. border-radius: var(--radius-sm);
  3667. color: var(--text-muted);
  3668. font-size: 0.8125rem;
  3669. cursor: pointer;
  3670. transition: background var(--transition-fast), color var(--transition-fast);
  3671. }
  3672. ​
  3673. .ne-chip:hover {
  3674. background: var(--bg-hover);
  3675. color: var(--text);
  3676. }
  3677. ​
  3678. .ne-picker-grid {
  3679. display: grid;
  3680. grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  3681. gap: 6px;
  3682. max-height: 200px;
  3683. overflow-y: auto;
  3684. }
  3685. ​
  3686. .ne-picker-item {
  3687. display: flex;
  3688. align-items: center;
  3689. justify-content: center;
  3690. height: 40px;
  3691. background: transparent;
  3692. border: 1px solid transparent;
  3693. border-radius: var(--radius-sm);
  3694. color: var(--text-muted);
  3695. cursor: pointer;
  3696. transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  3697. }
  3698. ​
  3699. .ne-picker-item:hover {
  3700. background: var(--bg-hover);
  3701. color: var(--text);
  3702. }
  3703. ​
  3704. .ne-picker-item.selected {
  3705. background: var(--accent-dim);
  3706. border-color: var(--accent);
  3707. color: var(--accent);
  3708. }
  3709. ​
  3710. .ne-empty {
  3711. padding: 18px;
  3712. margin-bottom: 14px;
  3713. text-align: center;
  3714. font-size: 0.8125rem;
  3715. color: var(--text-subtle);
  3716. border: 1px dashed var(--border);
  3717. border-radius: var(--radius);
  3718. }
  3719. ​
  3720. .ne-card .ne-empty {
  3721. padding: 12px;
  3722. margin-bottom: 8px;
  3723. }
  3724. ​
  3725. .ne-columns {
  3726. display: grid;
  3727. grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  3728. gap: 14px;
  3729. margin-bottom: 14px;
  3730. }
  3731. ​
  3732. .ne-card {
  3733. background: var(--bg);
  3734. border: 1px solid var(--border);
  3735. border-radius: var(--radius);
  3736. overflow: hidden;
  3737. }
  3738. ​
  3739. .ne-card-head {
  3740. display: flex;
  3741. align-items: center;
  3742. gap: 8px;
  3743. padding: 10px;
  3744. border-bottom: 1px solid var(--border);
  3745. background: var(--bg-elevated);
  3746. }
  3747. ​
  3748. .ne-card-body {
  3749. padding: 10px;
  3750. }
  3751. ​
  3752. .ne-add {
  3753. display: flex;
  3754. align-items: center;
  3755. justify-content: center;
  3756. gap: 6px;
  3757. width: 100%;
  3758. padding: 8px;
  3759. background: transparent;
  3760. border: 1px dashed var(--border-focus);
  3761. border-radius: var(--radius-sm);
  3762. color: var(--text-muted);
  3763. font-size: 0.8125rem;
  3764. cursor: pointer;
  3765. transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  3766. }
  3767. ​
  3768. .ne-add:hover {
  3769. background: var(--bg-hover);
  3770. color: var(--text);
  3771. border-color: var(--accent);
  3772. }
  3773. ​
  3774. @media (max-width: 640px) {
  3775. .ne-row {
  3776. flex-wrap: wrap;
  3777. }
  3778. ​
  3779. .ne-input {
  3780. flex: 1 1 100%;
  3781. }
  3782. ​
  3783. .ne-select {
  3784. flex: 1 1 100%;
  3785. }
  3786. ​
  3787. .ne-columns {
  3788. grid-template-columns: 1fr;
  3789. }
  3790. }
  3791. ​
  3792. .draft-banner {
  3793. display: flex;
  3794. align-items: center;
  3795. justify-content: space-between;
  3796. gap: 16px;
  3797. margin-bottom: 20px;
  3798. padding: 14px 18px;
  3799. background: var(--accent-dim);
  3800. border: 1px solid var(--accent);
  3801. border-radius: var(--radius);
  3802. }
  3803. ​
  3804. .draft-banner-text {
  3805. display: flex;
  3806. flex-direction: column;
  3807. gap: 2px;
  3808. font-size: 0.875rem;
  3809. color: var(--text-muted);
  3810. }
  3811. ​
  3812. .draft-banner-text strong {
  3813. color: var(--text);
  3814. }
  3815. ​
  3816. .draft-banner-actions {
  3817. display: flex;
  3818. gap: 8px;
  3819. flex-shrink: 0;
  3820. }
  3821. ​
  3822. @media (max-width: 640px) {
  3823. .draft-banner {
  3824. flex-direction: column;
  3825. align-items: stretch;
  3826. }
  3827. }
  3828. ​
  3829. .media-field {
  3830. position: relative;
  3831. width: 100%;
  3832. border-radius: var(--radius-sm);
  3833. transition: box-shadow var(--transition-fast);
  3834. }
  3835. ​
  3836. .media-row {
  3837. display: flex;
  3838. align-items: stretch;
  3839. gap: 8px;
  3840. }
  3841. ​
  3842. .media-row > input {
  3843. flex: 1;
  3844. min-width: 0;
  3845. }
  3846. ​
  3847. .media-actions {
  3848. display: flex;
  3849. gap: 6px;
  3850. flex-shrink: 0;
  3851. }
  3852. ​
  3853. .media-actions .btn {
  3854. display: inline-flex;
  3855. align-items: center;
  3856. gap: 6px;
  3857. white-space: nowrap;
  3858. }
  3859. ​
  3860. .media-progress {
  3861. display: none;
  3862. height: 3px;
  3863. margin-top: 8px;
  3864. background: var(--border);
  3865. border-radius: 3px;
  3866. overflow: hidden;
  3867. }
  3868. ​
  3869. .media-field.uploading .media-progress {
  3870. display: block;
  3871. }
  3872. ​
  3873. .media-progress-bar {
  3874. width: 0;
  3875. height: 100%;
  3876. background: var(--accent);
  3877. transition: width 120ms linear;
  3878. }
  3879. ​
  3880. .media-field.uploading .media-actions {
  3881. opacity: 0.5;
  3882. pointer-events: none;
  3883. }
  3884. ​
  3885. .media-status {
  3886. margin-top: 6px;
  3887. font-size: 0.75rem;
  3888. color: var(--text-muted);
  3889. }
  3890. ​
  3891. .media-status:empty {
  3892. display: none;
  3893. }
  3894. ​
  3895. .media-status.success {
  3896. color: var(--success);
  3897. }
  3898. ​
  3899. .media-status.error {
  3900. color: var(--error);
  3901. }
  3902. ​
  3903. .media-field.dragging {
  3904. box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-dim);
  3905. }
  3906. ​
  3907. .media-modal {
  3908. position: fixed;
  3909. inset: 0;
  3910. z-index: 1000;
  3911. display: flex;
  3912. align-items: center;
  3913. justify-content: center;
  3914. padding: 24px;
  3915. background: rgba(0, 0, 0, 0.6);
  3916. backdrop-filter: blur(4px);
  3917. }
  3918. ​
  3919. .media-modal-box {
  3920. display: flex;
  3921. flex-direction: column;
  3922. width: min(900px, 100%);
  3923. max-height: min(680px, 100%);
  3924. background: var(--bg-elevated);
  3925. border: 1px solid var(--border);
  3926. border-radius: var(--radius);
  3927. box-shadow: var(--shadow-card);
  3928. overflow: hidden;
  3929. }
  3930. ​
  3931. .media-modal-head {
  3932. display: flex;
  3933. align-items: center;
  3934. gap: 12px;
  3935. padding: 14px 16px;
  3936. border-bottom: 1px solid var(--border);
  3937. }
  3938. ​
  3939. .media-modal-head h3 {
  3940. flex-shrink: 0;
  3941. font-size: 1rem;
  3942. font-weight: 600;
  3943. }
  3944. ​
  3945. .media-modal-body {
  3946. flex: 1;
  3947. padding: 16px;
  3948. overflow-y: auto;
  3949. }
  3950. ​
  3951. .media-grid {
  3952. display: grid;
  3953. grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  3954. gap: 12px;
  3955. }
  3956. ​
  3957. .media-item {
  3958. display: flex;
  3959. flex-direction: column;
  3960. gap: 4px;
  3961. padding: 8px;
  3962. text-align: left;
  3963. background: var(--bg);
  3964. border: 1px solid var(--border);
  3965. border-radius: var(--radius-sm);
  3966. color: var(--text);
  3967. cursor: pointer;
  3968. transition: border-color var(--transition-fast), background var(--transition-fast);
  3969. }
  3970. ​
  3971. .media-item:hover {
  3972. border-color: var(--accent);
  3973. background: var(--bg-hover);
  3974. }
  3975. ​
  3976. .media-thumb {
  3977. display: flex;
  3978. align-items: center;
  3979. justify-content: center;
  3980. height: 96px;
  3981. margin-bottom: 4px;
  3982. color: var(--text-muted);
  3983. background: var(--bg-card);
  3984. border-radius: 6px;
  3985. overflow: hidden;
  3986. }
  3987. ​
  3988. .media-thumb img {
  3989. width: 100%;
  3990. height: 100%;
  3991. object-fit: cover;
  3992. }
  3993. ​
  3994. .media-name {
  3995. overflow: hidden;
  3996. font-size: 0.75rem;
  3997. text-overflow: ellipsis;
  3998. white-space: nowrap;
  3999. }
  4000. ​
  4001. .media-size {
  4002. font-size: 0.6875rem;
  4003. color: var(--text-subtle);
  4004. }
  4005. ​
  4006. .media-empty {
  4007. padding: 40px 16px;
  4008. text-align: center;
  4009. font-size: 0.875rem;
  4010. color: var(--text-subtle);
  4011. }
  4012. ​
  4013. @media (max-width: 640px) {
  4014. .media-row {
  4015. flex-wrap: wrap;
  4016. }
  4017. ​
  4018. .media-row > input {
  4019. flex: 1 1 100%;
  4020. }
  4021. ​
  4022. .media-modal-head {
  4023. flex-wrap: wrap;
  4024. }
  4025. }
  4026. ​
  4027. @media (min-width: 769px) {
  4028. .app {
  4029. overflow: clip;
  4030. }
  4031. ​
  4032. .sidebar {
  4033. overflow: clip;
  4034. }
  4035. }
  4036. ​
  4037. @media (min-width: 769px) {
  4038. .sidebar .nav-item,
  4039. .sidebar .nav-item:hover,
  4040. .sidebar .nav-item.active,
  4041. .sidebar .nav-item.active:hover {
  4042. font-weight: 500;
  4043. }
  4044. }
  4045. ​
  4046. .sidebar .nav-item,
  4047. .sidebar .nav-item:hover,
  4048. .sidebar .nav-item.active,
  4049. .sidebar .nav-item.active:hover,
  4050. .sidebar .nav-item svg,
  4051. .sidebar .nav-item:hover svg,
  4052. .sidebar .nav-item.active svg {
  4053. transform: none;
  4054. }
  4055. ​
  4056. .upd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 8px; }
  4057. .upd-actions form { margin: 0; }
  4058. .upd-heading { margin: 20px 0 10px; font-size: 0.95rem; font-weight: 600; }
  4059. .upd-changelog { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 0.875rem; line-height: 1.7; }
  4060. .upd-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; margin-left: 6px; background: var(--bg-hover); color: var(--text-muted); }
  4061. .upd-pill-added { background: rgba(52, 196, 140, 0.14); color: var(--success); }
  4062. .upd-pill-modified { background: var(--accent-dim); color: var(--accent); }
  4063. .upd-pill-deleted { background: rgba(240, 84, 106, 0.14); color: var(--error); }
  4064. .upd-row-actions { display: flex; gap: 8px; justify-content: flex-end; }
  4065. .upd-row-actions form { margin: 0; }
  4066. .upd-file { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); margin-bottom: 8px; overflow: hidden; }
  4067. .upd-file summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; font-size: 0.875rem; }
  4068. .upd-file summary .upd-pill { margin-left: 0; }
  4069. .upd-path { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
  4070. .upd-stats { display: flex; gap: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; }
  4071. .upd-add { color: var(--success); }
  4072. .upd-del { color: var(--error); }
  4073. .upd-move { color: var(--blue); }
  4074. .upd-note { padding: 0 14px 12px; margin: 0; }
  4075. .upd-diff { border-top: 1px solid var(--border); overflow-x: auto; font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; line-height: 1.5; }
  4076. .upd-line { display: flex; min-width: max-content; }
  4077. .upd-ln { flex: 0 0 44px; padding: 0 8px; text-align: right; color: var(--text-subtle); user-select: none; }
  4078. .upd-marker { flex: 0 0 22px; text-align: center; user-select: none; }
  4079. .upd-code { white-space: pre; padding-right: 14px; }
  4080. .upd-line-add { background: rgba(52, 196, 140, 0.12); }
  4081. .upd-line-del { background: rgba(240, 84, 106, 0.12); }
  4082. .upd-line-move { background: rgba(79, 178, 232, 0.12); }
  4083. .upd-gap { padding: 2px 14px; color: var(--text-subtle); background: var(--bg-card); }
  4084. .upd-warning { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid rgba(240, 84, 106, 0.35); border-radius: var(--radius-sm); background: rgba(240, 84, 106, 0.08); font-size: 0.85rem; line-height: 1.6; }
  4085. .upd-warning > svg { flex-shrink: 0; color: var(--error); margin-top: 2px; }
  4086. .upd-warning strong { color: var(--error); }
  4087. .upd-warning p, .upd-warning ul { margin: 6px 0 0; color: var(--text-muted); }
  4088. .upd-warning p strong { color: inherit; }
  4089. .upd-warning ul { padding-left: 18px; }
  4090. .upd-copy { font-family: ui-monospace, Consolas, monospace; font-size: 0.8rem; }
  4091. .upd-auto-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
  4092. .upd-last-run { margin-top: 16px; }
  4093. .upd-last-run .upd-pill { margin-left: 4px; }
  4094. ​
  4095. .ai-fab {
  4096. position: fixed; right: 24px; bottom: 24px; z-index: 900;
  4097. display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px;
  4098. border-radius: 999px;
  4099. border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  4100. background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  4101. -webkit-backdrop-filter: blur(14px) saturate(160%);
  4102. backdrop-filter: blur(14px) saturate(160%);
  4103. color: var(--accent); font: inherit; font-weight: 600; cursor: pointer;
  4104. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 0 transparent;
  4105. transition: box-shadow var(--transition-base), transform var(--transition-base);
  4106. }
  4107. .ai-fab:hover,
  4108. .ai-fab:focus-visible {
  4109. outline: none;
  4110. box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 22px 2px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 48px 8px color-mix(in srgb, var(--accent) 22%, transparent);
  4111. }
  4112. .ai-fab:active { transform: scale(0.97); }
  4113. .ai-fab-hidden { display: none; }
  4114. .ai-panel { position: fixed; right: 24px; bottom: 24px; z-index: 901; display: flex; flex-direction: column; width: 420px; max-width: calc(100vw - 32px); height: min(680px, calc(100vh - 48px)); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
  4115. .ai-panel[hidden] { display: none; }
  4116. .ai-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  4117. .ai-header-text { flex: 1; min-width: 0; }
  4118. .ai-title { font-weight: 600; }
  4119. .ai-subtitle { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  4120. .ai-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; }
  4121. .ai-btn:hover:not(:disabled) { background: var(--bg-hover); }
  4122. .ai-btn:disabled { opacity: 0.45; cursor: default; }
  4123. .ai-btn-primary { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
  4124. .ai-icon-btn { display: inline-flex; padding: 6px; border: none; background: none; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); }
  4125. .ai-icon-btn:hover { background: var(--bg-hover); color: var(--text); }
  4126. .ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
  4127. .ai-note { text-align: center; font-size: 0.82rem; line-height: 1.5; color: var(--text-muted); }
  4128. .ai-msg { max-width: 92%; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
  4129. .ai-msg-user { align-self: flex-end; background: var(--accent-dim); color: var(--text); }
  4130. .ai-msg-assistant { align-self: flex-start; background: var(--bg-card); border: 1px solid var(--border); }
  4131. .ai-msg-note { align-self: center; color: var(--text-muted); font-size: 0.8rem; }
  4132. .ai-msg-error { border-color: var(--error); color: var(--error); }
  4133. .ai-pending { color: var(--text-muted); }
  4134. .ai-proposal { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); padding: 12px 14px; }
  4135. .ai-ops { margin: 0 0 10px; padding-left: 18px; font-size: 0.85rem; line-height: 1.6; max-height: 190px; overflow-y: auto; }
  4136. .ai-actions { display: flex; gap: 8px; }
  4137. .ai-applied { color: var(--success); font-size: 0.85rem; font-weight: 500; }
  4138. .ai-warning { color: var(--error); font-size: 0.8rem; margin-bottom: 8px; }
  4139. .ai-muted { color: var(--text-muted); font-size: 0.82rem; }
  4140. .ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 10px; }
  4141. .ai-chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; }
  4142. .ai-chip:hover { background: var(--bg-hover); }
  4143. .ai-scope { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font-size: 0.8rem; color: var(--text-muted); }
  4144. .ai-select { flex: 1; min-width: 0; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font: inherit; font-size: 0.85rem; }
  4145. .ai-composer { display: flex; gap: 10px; padding: 0 16px 16px; }
  4146. .ai-input { flex: 1; min-width: 0; resize: none; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-focus); background: var(--bg); color: var(--text); font: inherit; font-size: 0.875rem; }
  4147. .ai-input:focus { outline: none; border-color: var(--accent); }
  4148. .ai-send { flex: 0 0 auto; width: 44px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-dim); color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  4149. .ai-send:disabled { opacity: 0.45; cursor: default; }
  4150. @media (max-width: 600px) {
  4151. .ai-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 85vh; border-radius: var(--radius) var(--radius) 0 0; }
  4152. .ai-fab { right: 16px; bottom: 16px; }
  4153. }
  4154. .ai-scope-tab { flex: 1; min-width: 0; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.85rem; }
  4155. ​
  4156. html[data-glass="off"] *,
  4157. html[data-glass="off"] *::before,
  4158. html[data-glass="off"] *::after {
  4159. -webkit-backdrop-filter: none !important;
  4160. backdrop-filter: none !important;
  4161. }
  4162. html[data-glass="off"] .main-header { background: var(--bg-elevated); }
  4163. html[data-glass="off"] .ai-fab { background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated)); }
  4164. html[data-glass="off"] .modal-overlay { background: rgba(0, 0, 0, 0.8); }
  4165. html[data-glass="off"] .media-modal { background: rgba(0, 0, 0, 0.7); }
  4166. ​
  4167. html[data-minimal="on"] *,
  4168. html[data-minimal="on"] *::before,
  4169. html[data-minimal="on"] *::after {
  4170. transition: none !important;
  4171. animation: none !important;
  4172. scroll-behavior: auto !important;
  4173. }
  4174. html[data-minimal="on"] .preview-frame-wrapper.loading::after { animation: spin 0.8s linear infinite !important; }
  4175. ​
  4176. html[data-minimal="on"] .user-avatar { background: #94a3b8; }
  4177. html[data-minimal="on"][data-theme="dark"] .user-avatar { background: #444; }
  4178. html[data-minimal="on"] .card,
  4179. html[data-minimal="on"] .block-item,
  4180. html[data-minimal="on"] .editor-wrapper { background: var(--bg-elevated); }
  4181. html[data-minimal="on"] .btn-primary { background: color-mix(in srgb, var(--accent) 16%, transparent); }
  4182. html[data-minimal="on"] .btn-primary:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); }
  4183. html[data-minimal="on"] .btn-success { background: color-mix(in srgb, var(--success) 16%, transparent); }
  4184. html[data-minimal="on"] .btn-success:hover { background: color-mix(in srgb, var(--success) 25%, transparent); }
  4185. html[data-minimal="on"] .btn-danger { background: color-mix(in srgb, var(--error) 10%, transparent); }
  4186. html[data-minimal="on"] .btn-danger:hover { background: color-mix(in srgb, var(--error) 20%, transparent); }
  4187. html[data-minimal="on"] .btn-secondary { background: var(--bg-card); }
  4188. html[data-minimal="on"] .btn-secondary:hover { background: var(--bg-hover); }
  4189. html[data-minimal="on"] .form-input,
  4190. html[data-minimal="on"] .form-textarea,
  4191. html[data-minimal="on"] .form-select,
  4192. html[data-minimal="on"] .block-field-input { background: var(--bg); }
  4193. html[data-minimal="on"][data-theme="light"] .form-input,
  4194. html[data-minimal="on"][data-theme="light"] .form-textarea,
  4195. html[data-minimal="on"][data-theme="light"] .form-select,
  4196. html[data-minimal="on"][data-theme="light"] .block-field-input { background: var(--bg-card); }
  4197. html[data-minimal="on"] .form-input:focus,
  4198. html[data-minimal="on"] .form-textarea:focus,
  4199. html[data-minimal="on"] .form-select:focus,
  4200. html[data-minimal="on"] .block-field-input:focus { background: color-mix(in srgb, var(--accent) 5%, var(--bg)); }
  4201. html[data-minimal="on"] .checkbox-label input[type="checkbox"],
  4202. html[data-minimal="on"] .form-switch label { background: var(--bg-card); }
  4203. html[data-minimal="on"] .checkbox-label input[type="checkbox"]::before,
  4204. html[data-minimal="on"] .form-switch label:before,
  4205. html[data-minimal="on"][data-theme="light"] .checkbox-label input[type="checkbox"]::before,
  4206. html[data-minimal="on"][data-theme="light"] .form-switch label:before { background: var(--text-muted); }
  4207. html[data-minimal="on"] .checkbox-label input[type="checkbox"]:checked,
  4208. html[data-minimal="on"] .form-switch input:checked+label { background: color-mix(in srgb, var(--accent) 26%, transparent); }
  4209. html[data-minimal="on"] .checkbox-label input[type="checkbox"]:checked::before,
  4210. html[data-minimal="on"] .form-switch input:checked+label:before { background: #fff; }
  4211. html[data-minimal="on"] .ai-fab { background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated)); }
  4212. ​
  4213. html[data-minimal="on"] *,
  4214. html[data-minimal="on"] *::before,
  4215. html[data-minimal="on"] *::after {
  4216. box-shadow: none !important;
  4217. text-shadow: none !important;
  4218. }
  4219. html[data-minimal="on"] :focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
  4220. html[data-minimal="on"] .form-input:focus,
  4221. html[data-minimal="on"] .form-textarea:focus,
  4222. html[data-minimal="on"] .form-select:focus,
  4223. html[data-minimal="on"] .block-field-input:focus { border-color: var(--accent); }
  4224. ​
  4225. html[data-glass="off"] .btn-primary {
  4226. background: var(--accent);
  4227. border-color: var(--accent);
  4228. color: #fff;
  4229. }
  4230. html[data-glass="off"] .btn-primary:hover {
  4231. background: var(--accent-hover);
  4232. border-color: var(--accent-hover);
  4233. color: #fff;
  4234. }
  4235. html[data-glass="off"] .btn-success {
  4236. background: var(--success);
  4237. border-color: var(--success);
  4238. color: #fff;
  4239. }
  4240. html[data-glass="off"] .btn-success:hover {
  4241. background: color-mix(in srgb, var(--success) 88%, #000);
  4242. border-color: color-mix(in srgb, var(--success) 88%, #000);
  4243. color: #fff;
  4244. }
  4245. html[data-glass="off"] .btn-danger {
  4246. background: transparent;
  4247. border-color: var(--error);
  4248. color: var(--error);
  4249. }
  4250. html[data-glass="off"] .btn-danger:hover {
  4251. background: color-mix(in srgb, var(--error) 14%, transparent);
  4252. border-color: var(--error);
  4253. color: var(--error);
  4254. }
  4255. html[data-glass="off"] .checkbox-label input[type="checkbox"]:checked,
  4256. html[data-glass="off"] .form-switch input:checked+label {
  4257. background: var(--accent);
  4258. border-color: var(--accent);
  4259. }
  4260. html[data-glass="off"] .checkbox-label input[type="checkbox"]:checked::before,
  4261. html[data-glass="off"] .form-switch input:checked+label:before {
  4262. background: #fff;
  4263. }
  4264. html[data-glass="off"] .ai-fab {
  4265. background: var(--accent);
  4266. border-color: var(--accent);
  4267. color: #fff;
  4268. }
  4269. ​
  4270. #editLangSwitch.lang-switch-short {
  4271. min-width: 0 !important;
  4272. width: auto;
  4273. height: 34px;
  4274. min-height: 0;
  4275. padding: 0 22px 0 10px !important;
  4276. font-size: 0.8rem;
  4277. font-weight: 600;
  4278. line-height: 1;
  4279. border-radius: 999px;
  4280. }
  4281. ​